参考教程

引用站外地址
藏宝阁页面的实现
参考教程

新建pug文件

在[blogRoot]\themes\butterfly\layout\includes\page下新建recommend.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
#article-container
  .recommend
    - let recommendPageContent = page.content
    if site.data.recommend
      - let result = ""
      each i in site.data.recommend
        - 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="recommend-desc">${i.class_desc}</div>` : ""
        - let listResult = ""
        each j in i.link_list
          - 
            listResult += `
              <div title="${j.name}" referrerPolicy="no-referrer" class="recommend_box" style="${j.img?`background-image: url(${j.img})`:'background-color: #333;'}">
                  <div class="recommend_top">
                    <i class="${j.icon}"></i>

                  </div>
                  <div class="recommend_content">
                    <span>${j.name?j.name:'未知'}</span>
                  </div>
                </div>
              `
          -
        - result += `${className}${classDesc} <div class="recommend-list">${listResult}</div>`
      - recommendPageContent = recommendPageContent + result
    != recommendPageContent

引入recommend.pug文件

在[blogRoot]\themes\butterfly\layout\page.pug中添加如下代码：

1
2
3
4
5
6
7
8
9
10
when 'tags'
  include includes/page/tags.pug
when 'link'
  include includes/page/flink.pug
when 'categories'
  include includes/page/categories.pug
+when 'recommend'
+  include includes/page/recommend.pug
default
  include includes/page/default-page.pug

新建recommend.styl文件

在[blogRoot]\themes\butterfly\source\css_page下新建recommend.styl文件并粘贴如下代码：
(以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
.recommend
  h2
    margin-bottom: 0
  .recommend-desc
    margin-bottom: 10px
  .recommend-list
    display: flex
    gap: 18px
    flex-wrap: wrap
    .recommend_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: 8px
      position: relative
      overflow: hidden
      padding: 10px
      color: #fff
      transition: .5s
      &::after
        content: ''
        position: absolute
        height: 100%
        width: 100%
        left: 0
        top: 0
        background: rgba(0,0,0,0.3)
        z-index: 0
        transition: .5s
      &:hover
        transform: translateY(-10px)
        &::after
          background: rgba(0,0,0,0.1)
      .recommend_top
        display: flex
        z-index: 1
        align-items: center
        justify-content: space-between
      .recommend_content
        z-index: 1
        margin-top: 120%
        span
          display: block
          font-size: 18px
          font-weight: bold
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis

[data-theme='dark']
  .recommend .recommend-list .recommend_box
    color: #ddd !important
    &:hover
      transform: translateY(-10px)
      &::after
        background: rgba(0,0,0,0.2)
    &::after
      background: rgba(0,0,0,0.5)
.recommend .recommend-list
  @media screen and (max-width: 1100px)
    gap: 15px
    .recommend_box
      --w: calc(20% - 12px)
  @media screen and (max-width: 900px)
    gap: 16px
    .recommend_box
      --w: calc(25% - 12px)
  @media screen and (max-width: 768px)
    gap: 15px
    .recommend_box
      --w: calc(100% / 3 - 10px)
  @media screen and (max-width: 500px)
    gap: 16px
    .recommend_box
      --w: calc(50% - 8px)

新建yml文件

在博客根目录新建source/_data/recommend.yml文件，如果_data文件夹也没有的话需要自己创建。参考友链部署。

1
2
3
4
5
- class_name:  📺 电视剧
  class_desc: #分类描述
  link_list:
    - name: 大明王朝1566 
      img: https://www.themoviedb.org/t/p/original/e3iif1iTmezx8lEIc7jQQRCanm7.jpg