title: "让 Hexo 自动生成 Tag Cloud 标签云页面"
date: 2015-10-25 12:08:49
categories:
- 术业专攻
tags:
- Hexo
- TagCloud
toc:
comments:
original:
permalink: hexo-tag-cloud
---

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

[1]: /2015/10/16/hexo-404-page/

<!-- more -->

![tag-cloud](/resources/tag-cloud.png)

## 匹配页面
在主题文章的 layout 中合适位置插入下列 if 语句，让代码只在标签云页面生效。

``` actionscript
<!-- page.path 表示不含根路径的页面网址。还有数种方式可以匹配页面，在此不赘述。 -->
<% if (page.path === "tags/index.html"){ %>
    <引入 tags 页面的代码>
<% } %>
 ```

以主题 [Yelee][2] 为例，须在 `/layout/_partial/article.ejs`, div `article-entry` 中插入代码。

``` actionscript
<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]) %>` 插入标签云，参数详解请查看 [官方文档][3]。

[2]: https://github.com/MOxFIVE/hexo-theme-yelee "简而不减 Hexo 双栏博客主题"
[3]: https://hexo.io/zh-cn/docs/helpers.html#tagcloud "tagcloud: 插入标签云"

``` actionscript
  <%- tagcloud({
      min_font: 16, 
      max_font: 35, 
      amount: 999, 
      color: true, 
      start_color: 'gray', 
      end_color: 'black',
  }) %>
```

## 自定义样式
审查元素，按需修改相关样式。下面是目前本博客 [标签云页面](/tags) 所添加的代码，附上供参考。

{% codeblock /layout/_partial/article.ejs lang:erb https://github.com/MOxFIVE/hexo-theme-yelee/commit/3a82bb65b325826b3f71cae10e39e5314ccb63cb tag cloud page %}
<% 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>
<% } %>
{% endcodeblock %}

>知道怎么在特定页面中引入 Hexo 自带的函数和变量后，大家应该就可以比较自在地在文章中引入需要的内容了，标签列表，文章列表，文章地址，日期时间等都可以。

## 参考资料

1. ***tagcloud: 插入标签云*** by **Hexo** on <code>2015</code>: <https://hexo.io/zh-cn/docs/helpers.html#tagcloud>
1. ***变量使用*** by **Hexo** on <code>2015</code>: <https://hexo.io/zh-cn/docs/variables.html>
1. ***feat: tags cloud page 标签云页面*** by **MOxFIVE** on <code>2015/10/12</code>: <https://github.com/MOxFIVE/hexo-theme-yelee/commit/3a82bb65b325826b3f71cae10e39e5314ccb63cb>
1. ***统计分类及标签数*** by **MOxFIVE** on <code>2015/12/1</code>: <https://github.com/MOxFIVE/hexo-theme-yelee/commit/56abe4226454571335a62120ab404792f274437f>