添加分类、标签云（球状）、彩色标签

添加分类页面

1.新建页面

$ cd your-hexo-site
$ hexo new page categories

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 categories。

2.设置页面类型

编辑刚新建的页面，将页面的 type 设置为 categories ，主题将自动为这个页面显示分类。页面内容如下：

---
title: 分类
date: 2022-03-15 22:02:26
type: "categories"
---

编辑主题配置文件，将menu中categories前的#去掉。

menu:#categories: /categories/ || fa fa-th

在下载NEXT主题时，主题配置文件中menu默认有categories，只需将前面的#去掉即可。

添加标签页面

1. 新建页面

$ cd your-hexo-site
$ hexo new page tags

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 tags。

2. 设置页面类型

编辑刚新建的页面，将页面的 type 设置为 categories ，主题将自动为这个页面显示分类。页面内容如下：

---
title: 标签
date: 2022-03-15 22:12:04
type: "tags"
---

3. 修改菜单

编辑主题配置文件，将menu中tags前的#去掉。

menu:#tags: /tags/ || fa fa-tags

在下载NEXT主题时，主题配置文件中menu默认有tags，只需将前面的#去掉即可。

Next 7.0+ TagCanvas 球形标签云

Next版本在 7.0+ 可以使用球形标签云的 tagcanvas.js 插件进行样式修改，具体修改步骤如下：

关于球形标签云 tagcanvas.js 插件下载链接：点击这里

将下载的压缩包中excanvas.js文件，放入 /theme/next/source/js 目录下

1. 新建标签云 swig 文件

在 \theme\next\layout\_partials 目录下，建一个名为 tagcanvas.swig 的文件，并写入如下内容：

<div class="tags" id="myTags"><canvas width="500" height="500" id="my3DTags"><p>Anything in here will be replaced on browsers that support the canvas element</p></canvas>
</div>
<div class="tags" id="tags"><ul style="display: none">{{ tagcloud({min_font   : theme.tagcloud.min,max_font   : theme.tagcloud.max,amount     : theme.tagcloud.amount,color      : true,start_color: theme.tagcloud.start,end_color  : theme.tagcloud.end})}}</ul>
</div>
<script type="text/javascript" src="/js/tagcanvas.js"></script>
<script type="text/javascript" >window.onload = function() {try {TagCanvas.Start('my3DTags','tags',{textFont: 'Georgia,Optima',textColour: null,outlineColour: 'black',weight: true,reverse: true,depth: 0.8,maxSpeed: 0.05,bgRadius: 1,freezeDecel: true});} catch(e) {document.getElementById('myTags').style.display = 'none';}};
</script>

2. 修改 page.swig

首先将 \theme\next\layout\page.swig 文件中的如下代码删除或注释：

<div class="tag-cloud-tags">{{ tagcloud({min_font   : theme.tagcloud.min,max_font   : theme.tagcloud.max,amount     : theme.tagcloud.amount,color      : true,start_color: theme.tagcloud.start,end_color  : theme.tagcloud.end})}}</div>

然后在相应位置添加如下代码：

{# tagcanvas plugin 球型云标签 #}
{% include '_partials/tagcanvas.swig' %}

3. 修改主题配置文件（_config.yml）

打开 \theme\config.yml，找到 tagcloud 字段，根据实际需要进行修改即可：

# 标签云设置页面
tagcloud:min: 12 # 最小字体尺寸，以px为单位max: 30 # 最大字体尺寸，以px为单位start: "#ccc" # 开始颜色 (hex, rgba, hsla or color keywords)end: "#111" # 结束颜色 (hex, rgba, hsla or color keywords)amount: 200 # 标签数量，当大于200个后，请进行更改

Next8.10+主题添加彩色标签

标签页添加彩色标签

每个标签都有自己单一的标签，且每次刷新都会有不同的颜色。

在themes\next\layout下新建tag-color.njk，修改里面的内容为：

  <script type="text/javascript">var alltags = document.getElementsByClassName('tag-cloud-tags');var tags = alltags[0].getElementsByTagName('a');for (var i = tags.length - 1; i >= 0; i--) {var golden_ratio = 0.618033988749895;var s = 0.5;var v = 0.999;var h = golden_ratio + Math.random()*0.8 - 0.5;var h_i = parseInt(h * 6);var f = h * 6 - h_i;var p = v * (1 - s);var q = v * (1 - f * s);var t = v * (1 - (1 - f) * s);var r, g, b;switch (h_i) {case 0:r = v;g = t;b = p;break;case 1:r = q;g = v;b = p;break;case 2:r = p;g = v;b = t;break;case 3 :r = p;g = q;b = v;break;case 4:r = t;g = p;b = v;break;case 5:r = v;g = p;b = q;break;default:r = 1;g = 1;b = 1;}tags[i].style.background = "rgba("+parseInt(r*255)+","+parseInt(g*255)+","+parseInt(b*255)+","+0.5+")";}
</script><style>.tag-cloud-tags{text-align: center;counter-reset: tags;}.tag-cloud-tags a{display: inline-block;border: 0px;border-radius: 10px;padding: 0px 10px;margin: 8px;color: rgba(34, 34, 34, 0.8);}
/* 文字前添加相应的符号，content后的Unicode可以自定义*/.tag-cloud-tags a:before{font-family: 'Font Awesome 5 Free';content: "\f02b";font-weight: 900;}.tag-cloud-tags a:hover{box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);transform: scale(1.1);transition-duration: 0.15s;}
</style>

打开theme\next\layout\page.njk ，搜索<div class="post-body，修改代码如下：

      <div class="post-body{% if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}">{%- if page.type === 'tags' %}{%- include '_partials/page/tags.njk' -%}{% elif page.type === 'categories' %}{%- include '_partials/page/categories.njk' -%}{% elif page.type === 'schedule' %}{%- include '_partials/page/schedule.njk' -%}{% else %}{{ page.content }}{%- endif %}</div>
+      {% include 'tag-color.njk' %}

效果图：

在文章底部添加彩色标签

打开themes\next\layout\_macro\post.njk文件，搜索for tag in post.tags.toArray()，在下面添加我们之前写好的黄金分割生成的随机颜色代码，如下:

 <div class="post-tags">{%- for tag in post.tags.toArray() %}<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>{%- endfor %}</div><script type="text/javascript">var tagsall=document.getElementsByClassName("post-tags")for (var i = tagsall.length - 1; i >= 0; i--){var tags=tagsall[i].getElementsByTagName("a");for (var j = tags.length - 1; j >= 0; j--) {var golden_ratio = 0.618033988749895;var s = 0.5;var v = 0.999;var h = golden_ratio + Math.random()*0.8 - 0.5;var h_i = parseInt(h * 6);var f = h * 6 - h_i;var p = v * (1 - s);var q = v * (1 - f * s);var t = v * (1 - (1 - f) * s);var r, g, b;switch (h_i) {case 0:r = v;g = t;b = p;break;case 1:r = q;g = v;b = p;break;case 2:r = p;g = v;b = t;break;case 3 :r = p;g = q;b = v;break;case 4:r = t;g = p;b = v;break;case 5:r = v;g = p;b = q;break;default:r = 1;g = 1;b = 1;}tags[j].style.background = "rgba("+parseInt(r*255)+","+parseInt(g*255)+","+parseInt(b*255)+","+0.5+")";}}                        </script>

然后打开根目录下的source\_data文件夹新建styles.styl，添加以下代码：

//文章底部彩色标签样式
.posts-expand .post-tags a {display: inline-block;font-size: 0.8em;padding: 0px 10px;border-radius: 8px;color: rgb(85, 85, 85);border: 0px;
}

文章底部标签#改为图标（打开根目录下的\themes\next\layout_macro\post.njk 文件，找到如下代码：)

 {%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else '#' %}

将代码中的#改为：

 <i class="fa fa-tag"></i>

效果图：