第四篇 Hexo 魔改实录 | 给博客添个“藏宝阁”，美观又实用！

✨ 为什么要造“藏宝阁”？

友人帐千篇一律，课程资料四散无序。
我曾经把所有课程链接全塞进 link.yml，看起来就像是个“堆放文件的仓库”……

于是我灵机一动：不如建一个真正属于自己的“藏宝阁”页面！

✅ 让课程资料分类清晰
✅ 保持与友链统一的美观风格
✅ 保留 flexcard、telescopic、anzhiyu 三种展示模式
✅ 数据独立，后续维护更清晰

🔧 魔改步骤全记录

🧱 第一步：独立数据源 treasure.yml

路径：source/_data/treasure.yml

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
- class_name: BIT自动化课程笔记
  class_desc: ✨宝藏点1：恭喜你🎉，发现了藏匿博主本科笔记的宝藏点
  flink_style: telescopic
  hundredSuffix: ""
  link_list:
    - name: 计算机控制系统
      link: https://dcntfazxmk4c.feishu.cn/docx/G1j4d5v5zoYCvsxTzfpcWzhCnbd?from=from_copylink
      avatar: /img/pictures_markdown/image-20.png
      descr: 大三下学期计算机控制系统课程笔记
      siteshot: /img/pictures_markdown/image-19.png
      color: vip
      tag: 专业课
    - name: 智能控制系统
      link: https://dcntfazxmk4c.feishu.cn/docx/EALVdjWyEoavHIx7OHicap8Gn3d?from=from_copylink
      avatar: /img/pictures_markdown/image-20.png
      descr: 大三下学期智能控制系统课程笔记
      siteshot: /img/pictures_markdown/image-21.png
      color: vip
      tag: 专选课
    - name: 形势与政策VI
      link: https://dcntfazxmk4c.feishu.cn/docx/K83NdZlxUoOzqCxEUGScARVWnwb?from=from_copylink
      avatar: /img/pictures_markdown/image-20.png
      descr: 大三下学期形势与政策VI课程笔记
      siteshot: /img/pictures_markdown/image-22.png
      color: vip
      tag: 必修课

📃 第二步：新增页面 source/treasure/index.md

1
2
3
4
5
6
7
8
9
---
title: 藏宝阁
date: 2025-04-11
type: treasure
layout: page
comments: false
aside: false
top_img:
---

注意：这里的 type: treasure 是关键，它会触发我们在 page.pug 中配置的自定义页面逻辑。

💎 第三步：新增 treasure.pug 展示模板

路径：themes/anzhiyu/layout/includes/page/treasure.pug
内容请参考 link.pug，并按以下格式引用 site.data.treasure 替代原来的 link 数据，在这里给出了可以直接使用的treasure.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
#article-container
  .flink
    - const treasureData = site.data.treasure || []
    if treasureData.length > 0
      each i in treasureData
        if i.class_name
          h2!= i.class_name + " (" + i.link_list.length + ")"
        if i.class_desc
          .flink-desc!= i.class_desc
        if i.flink_style === 'anzhiyu'
          div(class=i.lost_contact ? 'anzhiyu-flink-list cf-friends-lost-contact' : 'anzhiyu-flink-list')
            each item in i.link_list
              - let color = item.color || ""
              - let tag = item.tag || ""
              .flink-list-item
                if color == "vip" && tag
                  span.site-card-tag.vip #[=tag]
                    i.light
                else if color == "speed" && tag
                  span.site-card-tag.speed #[=tag]
                else if tag
                  span.site-card-tag(style=`background-color: ${color}`) #[=tag]
                else if item.recommend
                  span.site-card-tag 荐
                if i.lost_contact
                  a.cf-friends-link(href=url_for(item.link) title=item.name target="_blank")
                    img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                    .flink-item-info
                      .flink-item-name.cf-friends-name-lost-contact= item.name
                else
                  a.cf-friends-link(href=url_for(item.link) cf-href=url_for(item.link) title=item.name target="_blank")
                    img.cf-friends-avatar.no-lightbox(src=url_for(item.avatar) cf-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                    .flink-item-info
                      .flink-item-name.cf-friends-name= item.name
                      .flink-item-desc(title=item.descr)= item.descr

        else if i.flink_style === 'telescopic'
          .telescopic-site-card-group
            each item in i.link_list
              - let color = item.color || ""
              - let tag = item.tag || ""
              - let siteshot = item.siteshot || `https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/${item.link}`
              .site-card
                if color == "vip" && tag
                  span.site-card-tag.vip #[=tag]
                    i.light
                else if color == "speed" && tag
                  span.site-card-tag.speed #[=tag]
                else if tag
                  span.site-card-tag(style=`background-color: ${color}`) #[=tag]
                else if item.recommend
                  span.site-card-tag 荐
                a.img.no-text-decoration(target='_blank', title=`${item.name}`, href=`${item.link}`, rel='external nofollow')
                  img.flink-avatar(src=siteshot onerror=`this.onerror=null;this.src='${theme.default_img}'` alt=item.name)
                a.info.cf-friends-link.no-text-decoration(target='_blank', title=`${item.name}`, href=`${item.link}`, cf-href=url_for(item.link), rel='external nofollow')
                  .site-card-avatar
                    img.flink-avatar.cf-friends-avatar.no-fancybox(src=item.avatar onerror=`this.onerror=null;this.src='${theme.default_img}'` alt=item.name)
                  .site-card-text
                    span.title.cf-friends-name #[=item.name]
                    span.desc(title=item.descr) #[=item.descr]

        else if i.flink_style === 'flexcard'
          .flexcard-flink-list
            each item in i.link_list
              a.flink-list-card.cf-friends-link(href=url_for(item.link) cf-href=url_for(item.link) target='_blank' data-title=item.descr)
                .wrapper.cover
                  - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
                  img.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='cover')
                .info
                  img.cf-friends-avatar.no-lightbox.flink-avatar(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='cover')
                  span.flink-sitename.cf-friends-name= item.name

  != page.content

🧩 第四步：注册页面类型 treasure

在 themes/anzhiyu/layout/page.pug 中 case page.type 区段加入：

1
2
when 'treasure'
  include includes/page/treasure.pug

🧭 第五步：导航栏添加入口

编辑 theme.yml：

1
2
nav:
  藏宝阁: /treasure/ || anzhiyu-icon-fan

图标我使用的是 anzhiyu-icon-fan，其他备选还有 anzhiyu-icon-box、anzhiyu-icon-folder 等。

📸 最终效果展示

与友链同样风格，课程笔记展示优雅上线！

藏宝阁效果展示图

🔚 小结 & 后记

这次魔改“藏宝阁”，让我更熟悉了 anzhiyu 主题的模板机制，尤其是：

  • layout/page.pug 的页面类型控制
  • source/_data/*.yml 自定义数据源
  • flink_style 三种展示风格的复用

如果你也想把博客做成一个课程资料宝库，这套思路完全可以复用！

🌈 如果你喜欢这个页面，也欢迎来我博客看看更多魔改项目哦~