新建collect页面

在cmd中输入以下命令：

hexo new page collect

修改collect页面样式

1、在头部yaml中添加aside: false

2、在[blogRoot]\source\collect\index.md中添加如下代码：

.layout{
    max-width:90% !important;
}

修改page.pug

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

when 'tags'
  include includes/page/tags.pug
when 'link'
  include includes/page/flink.pug
when 'categories'
  include includes/page/categories.pug
+when 'collect'
+  include includes/page/collect.pug
default
  include includes/page/default-page.pug

新建collect.pug

在[blogRoot]\themes\butterfly\layout\includes\page下新建collect.pug文件并粘贴如下代码： （样式可能需要根据自己的页面进行微调）

#article-container
  .collect
    - let collectPageContent = page.content
    if site.data.collect
      - let result = ""
      each i in site.data.collect
        - 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="collect-desc">${i.class_desc}</div>` : ""
        - let listResult = ""
        each j in i.link_list
          - 
            listResult += `
              <div title="${j.name}" referrerPolicy="no-referrer" class="collect_box" style="${j.img?`background-image: url(${j.img})`:'background-color: #333;'}">
                  <div class="collect_top">
                    <span>${j.tip?j.tip:'电影'}</span>
                  </div>
                  <div class="collect_content">
                    <span>${j.name?j.name:'未知'}</span>
                    <div>${j.score?toStar(j.score):toStar(0)}</div>
                  </div>
                </div>
              `
          -
        - result += `${className}${classDesc} <div class="collect-list">${listResult}</div>`
      - collectPageContent = collectPageContent + result
    != collectPageContent

新建collect.styl

在[blogRoot]\themes\butterfly\source\css\_page下新建collect.styl文件并粘贴如下代码：

.collect
  h2
    margin-bottom: 0
  .collect-desc
    margin-bottom: 10px
  .collect-list
    display: flex
    gap: 18px
    flex-wrap: wrap
    .collect_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: .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)
      .collect_top
        display: flex
        z-index: 1
        align-items: center
        justify-content: space-between
      .collect_content
        z-index: 1
        margin-top: 86%
        span
          display: block
          font-size: 18px
          font-weight: bold
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis

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

增加辅助函数

在[blogRoot]themes\butterfly\scripts\helpers\page.js的合适位置粘贴如下代码：

// 藏宝阁星星
hexo.extend.helper.register('toStar', function(num) {
    let tmp = ''
    for (let i = 0; i < Math.floor(num); i++) { tmp += '<i class="fa-solid fa-star"></i>' } // 整数部分加 实心星星
    if (num - Math.floor(num) != 0) tmp += '<i class="fa-solid fa-star-half-alt"></i>' // 小数部分转成 半星
    for (let i = 0; i < 5 - Math.ceil(num); i++) { tmp += '<i class="fa-regular fa-star"></i>' } // 不够5个补 空心星星
    return tmp
})

新建collect.yml

在[blogRoot]\source\_data下面新建collect.yml，弄过友链的应该都很熟悉。 按照如下格式配置即可(很像友链格式)

- class_name: #📺 电影
  class_desc: #分类描述
  link_list:
    - name: 让子弹飞 #名字
      img: https://t1.szrtcpa.com/upload/vod/20220313-27/fa8e1f40e62df7aa609cba34f5ee8a25.jpg #图片链接
      score: 5 # 1-5星
      tip: 电影 # 右上角文字