fluid 创建自定义导航页

为什么要这样做？

有时为了快速找到收藏的网站，直接把他们放在博客上也是一个好选择。例如：

创建自定义页面

在 fluid 主题文档中，明确指出了该如何创建自定义页面，详见：自定义页面

创建 ejs 文件

在按照文档创建好自定义页面之后，会自动生成 index.md 文件。阅读 fluid 文档可以知道，文章页拥有一个属性 layout，可以快速渲染 md 文档为各种样式的页面。

经过观察可以知道，友情链接页面和上面说的这种导航页面十分接近，故以友情链接的模板进行修改便能快速得到想要的渲染模板。

友情链接的渲染模板 links.ejsl 在 Blog\node_modules\hexo-theme-fluid\layout 目录下，将其复制一份改为 collections.ejs 于同目录下，文件内容如下：

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
<%
page.layout = "collections"
page.title = theme.collections.title || __('collections.title')
page.subtitle = theme.collections.subtitle || __('collections.subtitle')
page.banner_img = theme.collections.banner_img
page.banner_img_height = theme.collections.banner_img_height
page.banner_mask_alpha = theme.collections.banner_mask_alpha
page.comment = theme.collections.comments.type

// 标题层级，默认 h4
const headingLevel = Math.min(6, Math.max(2, theme.collections.heading_level || 4))
const headingTag = `h${headingLevel}`
%>

<div class="collections-container">
  <% for(const category of theme.collections.categories || []) { %>
    <<%= headingTag %> class="collection-category">
      <%= category.name %>
    </<%= headingTag %>>

    <div class="collection-row">
      <% for(const item of category.items || []) { %>
        <div class="collection-card">
          <a href="<%= url_for(item.link) %>" class="card-body" target="_blank" rel="noopener">
            <% if (item.avatar || item.image) { %>
              <div class="collection-avatar">
                <img src="<%= url_for(item.avatar || item.image) %>" alt="<%= item.title %>"
                     onerror="this.onerror=null;this.src='<%= url_for(theme.collections.onerror_avatar) %>'" />
              </div>
            <% } %>
            <div class="collection-content">
              <div class="collection-title"><%= item.title %></div>
              <div class="collection-intro"><%= item.intro || '' %></div>
            </div>
          </a>
        </div>
      <% } %>
    </div>
  <% } %>
</div>

<% if(theme.collections.custom && theme.collections.custom.enable && theme.collections.custom.content) { %>
  <div class="collection-custom mx-auto">
    <%- theme.collections.custom.content %>
  </div>
<% } %>

修改之后的 collections.ejs 主要是将前者的关键字替换成 collections 并增加了一个必要的元素节点 headingTag 用来渲染分类标题，并取消了评论注入节点。

创建 styl 样式文件

渲染模板有了，接下来还需要创建 styl 文件用于样式定义。

友情链接的样式文件 links.styl 在：Blog\node_modules\hexo-theme-fluid\source\css\_pages 目录下的_links 文件夹中。

于是我们如法炮制，在_pages 目录下创建_collections 文件夹用于存放_collections.styl 文件。文件内容如下：

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
.collections-container
  padding 1rem

  .collection-category
    margin 1.5rem 0 0.75rem
    font-size 1.5rem
    font-weight bold
    border-bottom 1px solid var(--card-border-color)
    color var(--text-color)
    text-align left

  .collection-row
    display flex
    flex-wrap wrap
    gap 1rem
    justify-content flex-start

  .collection-card
    box-shadow none
    background-color transparent
    border 0
    // 修改为只在桌面端生效
    @media (min-width: 768px)
      flex 1 1 calc(33.333% - 1rem)
      max-width calc(33.333% - 1rem)

  .card-body
    margin 0
    padding 1rem
    border-radius .3rem
    display flex
    align-items flex-start  // 修改为顶部对齐
    width 100%
    min-height 80px  // 替代固定高度
    transition background-color 0.2s ease-in-out

    &:hover
      background-color var(--card-hover-bg)
      .collection-avatar
        transform scale(1.1)

  .collection-avatar
    flex none
    width 45px
    height 45px
    margin-right .75rem
    object-fit cover
    transition-duration .2s
    transition-timing-function ease-in-out

    img
      width 100%
      height 100%
      border-radius 50%
      background-color transparent
      object-fit cover

  .card-content
    display flex
    width 100%
    // 移除固定高度

  .collection-content
    flex 1
    display flex
    flex-direction column
    justify-content center
    min-width 0  // 修复flex布局溢出问题

  .collection-title
    color var(--text-color)
    font-weight bold
    // 移动端允许换行
    @media (max-width: 767px)
      white-space normal
      word-break break-word
    // 桌面端单行省略
    @media (min-width: 768px)
      overflow hidden
      text-overflow ellipsis
      white-space nowrap

  .collection-intro
    font-size 0.85rem
    line-height 1.2
    color var(--sec-text-color)
    // 统一使用webkit多行省略
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2
    text-overflow ellipsis
    overflow hidden

// 移动端专属样式
@media (max-width: 767px)
  .collection-row
    flex-direction column
    align-items stretch  // 改为拉伸填满
    gap 1.5rem  // 增加垂直间距

  .collection-card
    max-width 100%  // 改为100%填充父容器
    flex 1 1 auto  // 自动伸缩
    padding 0 5%  // 左右留白替代max-width

    .card-body
      padding 1.25rem  // 增加点击区域

该样式将会与友情链接的各小项目表现一致。例如：
image-20250515155622458

并且在移动端也将有较为良好的显示效果：
image-20250516060905783

在_config.fluid.yml 中进行配置

使用 ejs 渲染模板，就可以在.md 文档中使用 layout 来指定渲染，并且可以在 config 文件中进行简单配置就完成渲染。

在 fluid 的 config 文件中，配置如下：

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
#---------------------------
# 导航页
# collections Page
#---------------------------
collections:
  enable: true
  title: "我的收藏"
  subtitle: "整理的一些有趣内容"
  banner_img:
  banner_img_height: 80
  banner_mask_alpha: 0.3

  # 标题层级，支持 2 ~ 6，默认 4（对应 h2 ~ h6）以优化SEO
  heading_level: 2

  # 标题样式配置（可选）
  heading_style:
    color: "#333333" # 标题文字颜色
    border_bottom: "1px solid #ddd" # 标题下边框样式
    margin: "0 0 1rem 0" # 标题外边距（上右下左）
    font_size: "1.25rem" # 标题字体大小

  # 头像加载失败时的替代图片
  onerror_avatar: /img/avatar/emo.webp

  # 分类列表
  categories:
    - name: "快捷访问"
      items:
        - title: "Can I use"
          link: "https://caniuse.com/"
          avatar: "https://caniuse.com/img/favicon-128.png"
          intro: "前端 API 兼容性查询"
        - title: "Squoosh"
          link: "https://squoosh.app/"
          avatar: "https://notes.fe-mm.com/icons/squoosh.png"
          intro: "基于浏览器的本地图片压缩工具（支持自定义参数和格式转换）"
    - name: "周刊|博客"
      items:
        - title: "Frontend Weekly"
          link: "https://frontender-ua.medium.com/"
          avatar: "https://notes.fe-mm.com/icons/frontender-ua.png"
          intro: "前端周刊"
  # 自定义底部HTML内容，支持HTML标签
  custom:
    enable: true
    content: |
      <div style="text-align:center; margin-top: 2rem;">
        欢迎来访我的收藏页面！如果你有好用的网站，欢迎推荐～
      </div>

  # 评论设置
  comments:
    enable: false
    type: giscus

当然，你也可以使用自定义的 css 再精细的控制一下样式。