设置分类列表页

小技巧

设置分类列表页

问题

最近通过github+hexo(ocean主题)搭建了博客。期间遇到了各种问题，主要还是因为自己不是程序员，有些代码看不懂。

比如我想，以后如果文章多起来，只有一个归档可不行，最好要有个分类的界面。把文章都整理好，以后也方便自己查东西。

照着网上的操作：

  1. 先生成一个分类的网页，输入命令hexo new page categories
  2. 找到对应网页的md文件，在其头部内添加上type: "categories"
  3. 最后测试，新建一篇文章，在文章md文件头部上添加categories: 分类的名称
  4. 保存
  5. 最后需要在主页上把分类页展现出来。
  6. 找到主题配置文件_config.yml。在meun中加入分类: /categories
  7. 保存

上述操作做完之后，查看效果。发现文章里面是有分类的显示

但是，在主页里面点击分类的连接，进入分类网页，没有任何显示。如下图红框处，最开始是没有任何显示的.


解决方法

网上查了大量文章，很多都只是说了配置问题，我是按配置正确操作的，但是就是解决不了。

后来看到一篇文章，猜测出应该是这个ocean主题缺少对应的代码。

参考链接：hexo主题开发指南-分类列表页与分类文章列表页

分类列表页显示博客里的所有分类，分类文章列表页显示某个分类中的文章列表。

Hexo 并没有专门分类列表页的模板，那该如何处理呢？一般是写在页面模板中，即 layout/page.swig 里，然后判断页面类型变量 page.type，如果是 categories，则显示分类列表页。再在博客里创建一个页面，指定其 type 为 categories

ocean主题是用ejs写出来的。而这个链接里面给的是swig的代码。所以估计不能直接用

定位了问题，接下来就好处理了。由于我暂时还不会写代码，所以只好找答案复制粘贴。

参考链接：Hexo-创建分类（categories）和标签（tags）首页，给出如下代码

找到 layout/_partial/article.ejs

然后找到 <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
39
> <% 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
107
> /*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;
>       background-color: #fff;
>       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: ' 篇文章';
>   }
> }
>

通过上述操作，问题解决。不过显示出来的样式不是自己喜欢的那种。等以后自己学会编程，再回头过来修改吧～