概述

默认安装的 hexo 本身是没有分类和标签首页的，
例如：http://orzcss.com/categories/
页面打开后，总是显示 Cannot GET /categories/
尝试了很多方法还是无效。

找了很多资料，都没有人提供解决方案，更多的是没有答案的问题，也许是这个问题太简单了，没人愿意记录笔记。

现在告诉大家怎么实现。

步骤一

新建一个页面，命名为 ‘categories’ | ‘tags’。命令如下：

1
2
3

hexo new page "categories"

hexo new page "tags"

步骤二

编辑刚新建的页面，将页面的类型设置为 categories | tags ，主题将自动为这个页面显示 分类|标签云。页面内容如下：

1
2
3
4
5

---
title: 分类
date: 2016-10-21 11:59:10
type: "categories"
---

1
2
3
4
5

---
title: 标签
date: 2016-10-21 11:59:10
type: "tags"
---

注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

1
2
3
4
5
6

---
title: 分类
date: 2016-10-21 11:59:10
type: "categories"
comments: false
---

1
2
3
4
5
6

---
title: 标签
date: 2016-10-21 11:59:10
type: "tags"
comments: false
---

步骤三

在菜单中添加链接。编辑 yilia/_config.yml（我用的是 yilia 主题），添加 categories | tags 到 menu 中，如下:

1
2
3
4
5

menu:
home: /
archives: /archives
categories: /categories
tags: /tags

步骤四 【这一步非常重要!!!】

找到 layout/_partial/article.ejs （我用的是 yilia 主题）

然后找到 <div class="article-entry" itemprop="articleBody"> 这一行

这个 div 里面的内容全部替换为：

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

<% if (post.excerpt && index){ %>       <%- post.excerpt %>  
<% } else { %>  
    <%- post.content %>  
<% } %>  

步骤五

修改样式，如果觉得不好看，自己改喜欢的样式

找到 yilia/source/css/_partial/article.styl 在最后面添加下面的 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
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

/*tag-cloud*/
.tag-cloud {
text-align: center;
margin-top: 50px;
}
.tag-cloud a {
display: inline-block;
margin: 10px;
}
.tag-cloud-title {
font-weight: 700;
font-size: 24px;
}
.tag-cloud-tags {
margin-top: 15px;
a {
display: inline-block;
text-decoration: none;
font-weight: normal;
font-size: 10px;
color: #fff;
line-height: normal;
padding: 5px 5px 5px 10px;
position: relative;
border-radius: 0 5px 5px 0;
font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
&:hover {
opacity: 0.8;
}
&:before {
content: " ";
width: 0;
height: 0;
position: absolute;
top: 0;
left: -18px;
border: 9px solid transparent;
}
&:after {
content: " ";
width: 4px;
height: 4px;

  border-radius: 4px;  
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);  
  position: absolute;  
  top: 7px;  
  left: 2px;  
}  

}
a.color1 {
background: #FF945C;
&:before {
border-right-color: #FF945C;
}
}
a.color2 {
background: #F5C7B7;
&:before {
border-right-color: #F5C7B7;
}
}
a.color3 {
background: #BA8F6C;
&:before {
border-right-color: #BA8F6C;
}
}
a.color4 {
background: #CFB7C4;
&:before {
border-right-color: #CFB7C4;
}
}
a.color5 {
background: #7B5D5F;
&:before {
border-right-color: #7B5D5F;
}
}
}

/*category-all-page*/
.category-all-page {
margin-top: 50px;
.category-all-title {
font-weight: 700;
font-size: 24px;
text-align: center;
}
.category-list-item:after {
content: '';
clear: both;
display: table;
}
.category-list-count {
float: right;
margin-left: 5px;
}
.category-list-count:before {
content: '一共 ';
}
.category-list-count:after {
content: ' 篇文章';
}
}