博客与建站

Hexo添加菜单与分类之二

想在hexo增加一个与categories或tags平行的类别，好增加菜单的索引肿么办呢？

以 hipaper 主题为例子，比如增加一个叫”fenlei”的类别与菜单，步骤如下：

一
1
2
3
hexo new page fenlei # 会生产 source/fenlei/index.md文件
vim source/fenlei/index.md

在source/fenlei/index.md文件头部增加如下内容
layout: “fenlei”
fenlei: “”

二

在 themes/hipaper/layout目录下增加 fenlei.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<div class="archives-wrap" style="margin: 0px;">
    <div class="row">
        <!-- Fenlei 云 -->
        <div class="archives-tags-wrap">
            <% 
                // 构建 fenlei 数据（仿照 site.tags 结构）
                const fenleiData = {};
                site.posts.forEach(post => {
                    if (post.fenlei) {
                        const fenleiList = Array.isArray(post.fenlei) ? 
                            post.fenlei : 
                            [post.fenlei];
                        fenleiList.forEach(f => {
                            const key = f.toString().trim();
                            if (key) {
                                if (!fenleiData[key]) {
                                    fenleiData[key] = [];
                                }
                                fenleiData[key].push(post);
                            }
                        });
                    }
                });
            %>
            <% if (Object.keys(fenleiData).length) { %>
                <blockquote>
                    <% Object.keys(fenleiData).sort().forEach(fenlei => { %>
                        <a href="#<%= fenlei %>" 
                           style="font-size: <%= Math.min(22, 14 + fenleiData[fenlei].length * 2) %>px;">
                            <%= fenlei %> (<%= fenleiData[fenlei].length %>)
                        </a>
                    <% }) %>
                </blockquote>
            <% } %>
        </div>

        <!-- Fenlei 文章列表 -->
        <% Object.keys(fenleiData).sort().forEach(fenlei => { %>
        <div class="archives-wrap">
            <div class="archive-year-wrap" id="<%= fenlei %>">
                <h1 class="archive-tag"><%= fenlei %></h1>
            </div>
            <div class="archives">
                <% fenleiData[fenlei].sort((a, b) => b.date - a.date).forEach(post => { %>
                    <%- partial('_partial/archive-post', {post: post, index: true}) %>
                    <% if (post.subtitle && post.subtitle.length) { %>
                        <h3 class="post-subtitle">
                            <%- post.subtitle %>
                        </h3>
                    <% } %>
                <% }) %>
            </div>
        </div>
        <% }) %>
    </div>
</div>

<style>
    /* 保持与 tags 相同的样式 */
    .archives-tags-wrap a {
        margin-right: 15px;
        line-height: 2;
        display: inline-block;
    }
</style>

三

编辑 themes/hipaper/config.yml文件，增加菜单
menu:
fenlei: fenlei

四

以后在撰写markdown文件里，文件头要增加 fenlei: “你的内容”