个人博客_文章标签

个人博客_文章标签

文章一多，必然要对文章进行分类。在Hexo中有分类和标签两种区分方法，分类和标签听起来很接近，但是在Hexo中两者有着明显的差别：分类具有顺序性和层次性，也就是说Foo, Bar不等于Bar, Foo。而标签没有顺序和层次。

Front-matter

Front-matter是文件最上方以 — 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: Hello World
date: 2013/7/13 20:46:25
categories:
- Diary
tags:
- PS3
- Games
---

tags和categories就是其中的参数值之一，需要注意的是，Hexo不支持指定多个同级分类，比如下面的指定方法：

categories:
  - Diary
  - Life

这会使分类Life成为Diary的子分类，而不是并列分类。如果你需要为文章添加多个分类，可以尝试以下list中的方法：

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类：PlayStation和 Games分别都是父分类Diary的子分类，同时 Life是一个没有子分类的分类。

创建Page

只在文章Front-matter中添加标签是不够的，需要为分类或者标签新建一个Page，使用如下命令：

hexo new page "categories"

hexo new page "tags"

打开source\tags\index.md文件，修改如下：

---
title: 标签
date: 2020-02-14 22:20:43
type: tags
layout: tags
comments: false
---

这样才能使得tags被正确渲染。categories也是同理，不过yilia对分类的支持有点问题，我干脆只做了tags，这样也能避免tags和categories混用。

为了以后文章自动添加标签，可以修改一下模板，打开 scaffolds/目录下的post.md文件，添加：

tags: 

页面配置

主题配置

如果要制作一个专门的标签页，类似于标签云，那么在主题配置文件中修改如下：

menu:
  主页: /
  标签: /tags

脚本配置

最后还需要编写相应脚本使得tags页面真正生效，并对标签进行色彩和效果配置。在themes/yilia-plus/layout/下新建一个tags.ejs，内容如下，还可以根据个人喜好进一步修改相关参数：

<article class="article article-type-post show">
  <header class="article-header" style="border-bottom: 1px solid #ccc">
    <h1 class="article-title" itemprop="name">标签</h1>

  </header>

  <% if (site.tags.length) { %>
    <div class="tag-cloud">
      <div class="tag-cloud-title">
        <%- "请根据标签找到你关注的内容～ " %>
        <br>
        <br>
      </div>

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

    <style>
      .tag-cloud {
        text-align: center;
        margin-top: 50px;
      }

      .tag-cloud-title {
        font-weight: 700;
        font-size: 24px;
        color: rgb(8, 182, 115);
      }

      .tag-cloud-tags {
        max-width: 40em;
        margin: 2em auto;
        margin-top: 0em;
      }

      .tag-cloud-tags a {
        margin-right: 1em;
        border-bottom: 1px dashed gray;
        line-height: 65px;
        white-space: nowrap;
      }

      .tag-cloud-tags a:hover {
        border-bottom: 3px solid rgb(30, 112, 206);
        font-weight: bolder;
        color: #1795e4;
        text-decoration: none;
      }
    </style>

  <% } %>

</article>

最后效果

参考

[1] Hexo搭建个人博客：yilia主题配置(四) - 分类管理
[2] Hexo-创建分类（categories）和标签（tags）首页
[3] Front-matter