创建小说/影视页面的基本步骤

此次博客的美化参考了这篇文章创建图书馆等页面的基本步骤在此之上做了一点小小的修改，教程如下：

修改原来的library.pug，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.author-content-item.like-library.single.share
    .card-content
        .author-content-item-tips=_p('书籍/影视')
        span.author-content-item-title=_p('书页，胶卷与我们相遇，')
          span.inline-word=_p('文字与影像的赋能')
        span.author-content-item-title=_p('让我们')
          span.inline-word=_p('感悟生活')
        .content-bottom
            .tips=_p('我的鉴赏记录')
        .banner-button-group
            a.banner-button(href="https://www.themoviedb.org/")
                i.fas.fa-circle-chevron-right
                span.banner-button-text=_p('感受更多')
blockquote
  p 读一本好书，胜似交了一位好友；赏一部佳片，仿若经历一场人生 

<!-- 添加样式块来彻底控制链接样式 -->
style.
    .library_content a,
    .library_content a:link,
    .library_content a:visited,
    .library_content a:hover,
    .library_content a:active {
        text-decoration: none !important;
        text-underline-offset: none !important;
        border-bottom: none !important;
        color: #fff !important; /* 明确设置链接颜色为白色，覆盖默认链接颜色 */
    }

.library
    - let libraryPageContent = page.content
    if site.data.library 
    - let library_result = ""
    each i in site.data.library
        - let className = i.class_name ? `<h2 ${i.class_desc?'':'style="margin-bottom:12px"'}>${i.class_name} (${i.link_list.length})</h2>` : ""
        - let classDesc = i.class_desc ? `<div class="library-desc">${i.class_desc}</div>` : ""
        - let listResult = ""
        each j in i.link_list
            - 
                // 仅当存在链接时才添加a标签，否则保持原有span
                const nameContent = j.link 
                    ? `<a href="${j.link}" target="_blank">${j.name?j.name:'未知'}</a>`
                    : `<span>${j.name?j.name:'未知'}</span>`;
                
                listResult += `
                <div title="${j.name}" referrerPolicy="no-referrer" class="library_box" style="${j.img?`background-image: url(${j.img})`:'background-color: #333;'}">
                    <div class="library_top">
                        <i class="${j.icon?j.icon:'fa-solid fa-film'}"></i>
                    </div>
                    <div class="library_content">
                        ${nameContent}
                        <div>${j.comment?j.comment:''}</div>
                    </div>
                </div>
                `
        -
        - library_result += `${className}${classDesc} <div class="library-list">${listResult}</div>`
    - libraryPageContent = libraryPageContent + library_result
    != libraryPageContent

添加了跳转功能，点击名称即可进行跳转，为了不修改原本的CSS样式，所以样式写在了该代码里，主要取消了链接的下划线和链接文字的变色的样式。
在library.yml之中，在每个影视里添加link:字段并且放入链接（我放的是网盘链接，各位看自己情况放）

原本想直接通过图片进行跳转，发现会破坏原本的样式所以选择此下策。