让 Hexo 自动生成 Tag Cloud 标签云页面

前言

参看上篇 创建404页面 的文章,我们可以轻易地创建一个链接为 http://"主页"/tags/ 的页面,然后编辑对应 .md 文件设置样式。在此基础上,我们还需要在主题 layout 布局中添加代码,引入辅助函数,才能自动生成所需的标签云页面。下面简单介绍下实现过程。

tag-cloud

匹配页面

在主题文章的 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 page
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
<% 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 自带的函数和变量后,大家应该就可以比较自在地在文章中引入需要的内容了,标签列表,文章列表,文章地址,日期时间等都可以。

参考资料

  1. tagcloud: 插入标签云 by Hexo on 2015: https://hexo.io/zh-cn/docs/helpers.html#tagcloud
  2. 变量使用 by Hexo on 2015: https://hexo.io/zh-cn/docs/variables.html
  3. feat: tags cloud page 标签云页面 by MOxFIVE on 2015/10/12: https://github.com/MOxFIVE/hexo-theme-yelee/commit/3a82bb65b325826b3f71cae10e39e5314ccb63cb
  4. 统计分类及标签数 by MOxFIVE on 2015/12/1: https://github.com/MOxFIVE/hexo-theme-yelee/commit/56abe4226454571335a62120ab404792f274437f
文章目录
  1. 1. 前言
  2. 2. 匹配页面
  3. 3. 插入标签云
  4. 4. 自定义样式
  5. 5. 参考资料
|