让 Hexo 自动生成 Tag Cloud 标签云页面
前言
参看上篇
创建404页面 的文章，我们可以轻易地创建一个链接为
http://"主页"/tags/ 的页面，然后编辑对应 .md 文件设置样式。在此基础上，我们还需要在主题 layout 布局中添加代码，引入辅助函数，才能自动生成所需的标签云页面。下面简单介绍下实现过程。
匹配页面
在主题文章的 layout 中合适位置插入下列 if 语句，让代码只在标签云页面生效。
1
2
3
4
| <!-- page.path 表示不含根路径的页面网址。还有数种方式可以匹配页面，在此不赘述。 -->
<% if (page.path === "tags/index.html"){ %>
<引入 tags 页面的代码>
<% } %>
|
以主题 Yelee 为例，须在 /layout/_partial/article.ejs, div article-entry 中插入代码。
1
2
3
4
5
6
7
8
9
10
| <div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% } else { %>
<% if (page.path === "tags/index.html"){ %>
<引入 tags 页面的代码>
<% } %>
<%- post.content %>
<% } %>
</div>
|
插入标签云
使用 Hexo 辅助函数 <%- tagcloud([tags], [options]) %> 插入标签云，参数详解请查看 官方文档。
1
2
3
4
5
6
7
8
| <%- tagcloud({
min_font: 16,
max_font: 35,
amount: 999,
color: true,
start_color: 'gray',
end_color: 'black',
}) %>
|
自定义样式
审查元素，按需修改相关样式。下面是目前本博客 标签云页面 所添加的代码，附上供参考。
/layout/_partial/article.ejstag cloud page1
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
| <% if (page.path === "tags/index.html"){ %>
<hr>
<br>
<%- list_categories({
depth: 1,
}) %>
<div class="tags">
<%- tagcloud({
min_font: 16,
max_font: 35,
amount: 999,
color: true,
start_color: 'gray',
end_color: 'black',
}) %>
</div>
<style>
.category-list li{
display: inline-block;
margin: 0 1em .5em 0;
padding: 4px;
border: 1px solid lightgray;
font-size: 1.2em;
}
.category-list a {
color: gray;
}
.category-list-item:hover a {
color: gray;
text-decoration: none;
font-weight: bold;
}
.category-list-count {
margin-left: 2px;
font-size: .9em;
}
.article-entry ul li:before{
display: none;
}
.article-inner {
text-align: center;
}
.tags {
max-width: 40em;
margin: 2em auto;
margin-top: 0em;
}
.tags a {
margin-right: 1em;
border-bottom: 1px solid gray;
line-height: 65px;
white-space: nowrap;
}
.tags a:hover {
border-bottom: 2px solid black;
font-style: italic;
text-decoration: none;
}
</style>
<% } %>
|
知道怎么在特定页面中引入 Hexo 自带的函数和变量后，大家应该就可以比较自在地在文章中引入需要的内容了，标签列表，文章列表，文章地址，日期时间等都可以。
参考资料
- tagcloud: 插入标签云 by Hexo on
2015: https://hexo.io/zh-cn/docs/helpers.html#tagcloud
- 变量使用 by Hexo on
2015: https://hexo.io/zh-cn/docs/variables.html
- feat: tags cloud page 标签云页面 by MOxFIVE on
2015/10/12: https://github.com/MOxFIVE/hexo-theme-yelee/commit/3a82bb65b325826b3f71cae10e39e5314ccb63cb
- 统计分类及标签数 by MOxFIVE on
2015/12/1: https://github.com/MOxFIVE/hexo-theme-yelee/commit/56abe4226454571335a62120ab404792f274437f
