创建图书馆等页面的基本步骤

创建图书馆等页面的基本步骤

页面美化主要参考其他人的教程

我短时间内不打算更改样式，后面有时间会考虑改成抽屉样式。

其实影视馆、收藏馆与图书馆页面的大致结构差不多，现在就以搭建图书馆页面为例，讲解一下搭建步骤。

创建一个新的页面

1
hexo new page library

然后更改[博客更目录]/source/library/index.md,一定要添加type: library

修改page.pug

打开[主题根目录]/layout/page.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
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
      when 'essay'
        include includes/page/essay.pug
      when 'room'
        include includes/page/room.pug
      when 'about'
        include includes/page/about.pug
      when 'album'
        include includes/page/album.pug
      when 'fcircle'
        include includes/page/fcircle.pug
      when 'album_detail'
        include includes/page/album_detail.pug
      when 'music'
        include includes/page/music.pug
      when 'movies'
        include includes/page/movies.pug
+      when 'library'
+        include includes/page/library.pug

新建library.pug

在[主题根目录]/layout/includes/page>下新建 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
//- library page
#article-container
    .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.douban.com/")
                    i.fas.fa-circle-chevron-right
                    span.banner-button-text=_p('感受更多')
    blockquote
      p 读一本好书，胜似交了一位好友


    .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
                - 
                    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">
                            <span>${j.name?j.name:'未知'}</span>
                            <div>${j.comment?j.comment:''}</div>
                        </div>
                        </div>
                    `
            -
            - library_result += `${className}${classDesc} <div class="library-list">${listResult}</div>`
        - libraryPageContent = libraryPageContent + library_result
        != libraryPageContent


新建library.yml

在[博客根目录]/source/_data>下新建library.yml，添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# class_name  分类标题   
# class_desc  分类描述
# link_list  影视列表 
  # name 影视名
  # img  海报图
  # comment  评价
  # icon  左上角图表

- class_name: 小说
  class_desc: 令人印象深刻
  link_list:
    - name: 三体 
      img: https://img1.doubanio.com/view/subject/s/public/s2768378.jpg
      comment: 看完后内心真的超级震撼 
      icon: fa-solid fa-bookmark  
    - name: 龙族
      img: https://img9.doubanio.com/view/subject/l/public/s24870866.jpg 
      comment: 每个人心中都住着一个衰小孩 
      icon: fa-solid fa-bookmark

添加css样式

在[博客根目录]/source/css>下新建library.css，添加以下代码

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
.author-content-item.single.like-library {
    height: 19rem;
    background: url(https://cdn.jsdelivr.net/gh/smileToC/personPic/blogImg/202305140856657.jpg) no-repeat top;
    background-size: cover;
    color: var(--anzhiyu-white);
    overflow: hidden;
}

.library h2 {
    margin-bottom: 0;
  }
  .library .library-desc {
    margin-bottom: 10px;
  }
  .library .library-list {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }
  .library .library-list .library_box {
    --w: calc(100% / 6 - 15px);
    width: var(--w);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    padding: 10px;
    color: #fff;
    transition: 0.5s;
  }
  .library .library-list .library_box::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.3);
    z-index: 0;
    transition: 0.5s;
  }
  .library .library-list .library_box:hover {
    transform: translateY(-10px);
  }
  .library .library-list .library_box:hover::after {
    background: rgba(0,0,0,0.1);
  }
  .library .library-list .library_box .library_top {
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
  }
  .library .library-list .library_box .library_content {
    z-index: 1;
    margin-top: 86%;
  }
  .library .library-list .library_box .library_content span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .movies .movies-list .movies_box .movies_content div {
    width: 174px;
    display: block;
    font-size: 14px;
    font-weight: normal;
    /* white-space: nowrap;
    overflow: hidden; */
  }
  [data-theme='dark'] .library .library-list .library_box {
    color: #ddd !important;
  }
  [data-theme='dark'] .library .library-list .library_box:hover {
    transform: translateY(-10px);
  }
  [data-theme='dark'] .library .library-list .library_box:hover::after {
    background: rgba(0,0,0,0.2);
  }
  [data-theme='dark'] .library .library-list .library_box::after {
    background: rgba(0,0,0,0.5);
  }
  @media screen and (max-width: 1100px) {
    .library .library-list {
      gap: 15px;
    }
    .library .library-list .library_box {
      --w: calc(20% - 12px);
    }
  }
  @media screen and (max-width: 900px) {
    .library .library-list {
      gap: 16px;
    }
    .library .library-list .library_box {
      --w: calc(25% - 12px);
    }
  }
  @media screen and (max-width: 768px) {
    .library .library-list {
      gap: 15px;
    }
    .library .library-list .library_box {
      --w: calc(100% / 3 - 10px);
    }
  }
  @media screen and (max-width: 500px) {
    .library .library-list {
      gap: 16px;
    }
    .library .library-list .library_box {
      --w: calc(50% - 8px);
    }
  }

缺少的样式可以通过 F12 扒，然后在主题配置文件中引入css

1
2
3
4
5
6
inject:
  head:
    # 自定义css
    # - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  - <link rel="stylesheet" href="/css/movies.css" media="defer" onload="this.media='all'">
+  - <link rel="stylesheet" href="/css/library.css" media="defer" onload="this.media='all'">

以上步骤仅供参考，一些样式可以自行修改