摘要：在hexo的yilia主题中添加分类功能，并实现分级分类。
一、添加 CATEGORIES 页面
生成INDEX.MD文件
1
hexo new page categories
在souce下生成一个categories文件夹，文件夹下有一个index.md文件
修改INDEX.MD文件
1
2
3
4
5
6
7---
title: 文章分类
date: 2019-10-30 16:36:49
type: "categories"
layout: "categories"
comments: false #关闭评论
---在有些评论系统中，在分类页面是会显示评论的，不想显示的可以将comments置为false。
添加 CATEGORIES 到MENU菜单
在yilia主题下的主配置文件_config.xml中找到menu,并把categories添加进去。
1
2
3menu:
主页: /
分类: /categories
二、YILIA 主题的配置
路径：themes/yilia/source/main.0cf68a.css（每个yilia主题下的main.后面都有所不同，yilia-plus为main.b8fa34.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
50category-all-page {
margin: 30px 40px 30px 40px;
position: relative;
min-height: 70vh;
}
.category-all-page h2 {
margin: 20px 0;
}
.category-all-page .category-all-title {
text-align: center;
}
.category-all-page .category-all {
margin-top: 20px;
}
.category-all-page .category-list {
margin: 0;
padding: 0;
list-style: none;
}
.category-all-page .category-list-item-list-item {
margin: 10px 15px;
}
.category-all-page .category-list-item-list-count {
color: $grey;
}
.category-all-page .category-list-item-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-item-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-item {
margin: 10px 10px;
}
.category-all-page .category-list-count {
color: $grey;
}
.category-all-page .category-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-child {
padding-left: 10px;
}路径:theme/yilia/layout/,新增categories.ejs 添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<article class="article article-type-post show">
<header class="article-header" style="border-bottom: 1px solid #ccc">
<h1 class="article-title" itemprop="name">
<%= page.title %>
</h1>
</header>
<% if (site.categories.length){ %>
<div class="category-all-page">
<h2>共计 <%= site.categories.length %> 个分类</h2>
<%- list_categories(site.categories, {
show_count: true,
class: 'category-list-item',
style: 'list',
depth:3, #这里代表着几层分类（需要把#及其之后的文字删掉）
separator: ''
}) %>
</div>
<% } %>
</article>
三、添加分类示例
在文章开头按如下填写
1
2
3
4
5
6
7title: yilia主题添加分类功能
typora-copy-images-to: yilia主题添加分类功能
date: 2020-02-17 16:59:45
categories:
- 个人博客
- yilia
tags: [yilia]效果如下：
这里只演示了深度为2的情况。
四、参考文献
- 本文作者： 随风而行
- 本文链接： http://yoursite.com/2020/02/17/yilia主题添加分类功能/
- 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！