转载自：http://orzcss.com/posts/5a207d64/

概述

默认安装的 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 (page.type === "tags") { %>
<div class="tag-cloud">
	<div class="tag-cloud-title">
	<%- _p('counter.tag_cloud', site.tags.length) %>
	</div>

	<div class="tag-cloud-tags">
	<%- tagcloud({
		min_font: 12,
		max_font: 30,
		amount: 200,
		color: true,
		start_color: '#ccc',
		end_color: '#111'
		}) %>
	</div>
</div>

<% } else if (page.type === 'categories') { %>

<div class="category-all-page">
	<div class="category-all-title">
	<%- _p('counter.categories', site.categories.length) %>
	</div>

	<div class="category-all">
	<%- list_categories() %>
	</div>

</div>

<% } else { %>

	<% 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: ' 篇文章';
  }
}

最新文章

  1. iphone 异常捕获处理
  2. 练习--分治法--Merge k Sorted Lists
  3. Android的JunitTest
  4. Numpy 操作
  5. 机器翻译评测——BLEU算法详解
  6. opencv 学习入门篇
  7. 如何在IOS上调试Hybrid应用
  8. 18 Ui美化 剪切动画clip
  9. php数组去重（一维数组）
  10. Web应用 布局
  11. 计算x
  12. S老师 Shader 学习
  13. public class 和class 的区别
  14. android studio 代码混淆如何忽略第三方jar包
  15. Guava Files 源码分析(一)
  16. c++11——tuple元组
  17. VS2013只显示会附加到进程，无法启动调试
  18. 洛谷P3803 【模板】多项式乘法 [NTT]
  19. docker使用命令汇总
  20. C语言获取系统时间

热门文章

  1. 关于.net的精彩对话（转）
  2. Django集合Ueditor
  3. srs-librtmp pusher(push h264 raw)
  4. CtfStudying之SSH私钥泄露
  5. 6-基于TMS320C6678、FPGA XC5VSX95T的6U CPCI 8路光纤信号处理卡
  6. man(2) readv writev
  7. java 继承父类并实现接口、接口之间的多继承
  8. robotframework关键字
  9. CSS多列布局（栅格布局）
  10. R语言里面的循环变量