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

繁星学编程

已于 2022-11-28 19:49:53 修改

阅读量2.2k

点赞数 4

分类专栏： Hexo-Next主题文章标签：其他经验分享

于 2022-03-23 21:38:16 首次发布

本文链接：https://blog.csdn.net/qq_45867247/article/details/123696652

版权

Hexo-Next主题专栏收录该内容

5 篇文章 2 订阅

订阅专栏

添加分类页面

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>

效果图：

繁星学编程

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录