Hexo博客Next主题添加动态标签词云

发表于 更新于 分类于 ， 阅读次数： 阅读次数： Changyan： 本文字数： 273 阅读时长 ≈ 1 分钟

使用"hexo-tag-cloud"插件添加动态标签云。

效果

损不足 - 奉有余 (leafminer.github.io)

安装插件

  • 进入到 hexo 的根目录，然后在 package.json 中添加依赖: “hexo-tag-cloud”: “2.1.*”

  • 然后执行npm install命令

  • 或者npm install --save hexo-tag-cloud进行安装

配置主题

找到文件 hexo\node_modules\hexo-theme-next\layout\_macrosidebar.njk, 然后添加如下内容。

1
2
3
4
5
6
7
8
9
10
11
12
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
<div class="widget-wrap">
  <h3 class="widget-title">标签云</h3>
  <div id="myCanvasContainer" class="widget tagcloud">
    <canvas width="250" height="250" id="resCanvas" style="width:100%">
      {{ list_tags() }}
    </canvas>
  </div>
</div>
{% endif %}

在你的Hexo博客根目录，找到 _config.yml 文件然后添加如下的配置项:

1
2
3
4
5
6
7
8
# hexo-tag-cloud
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 25
    outlineColor: '#E2E1D1'
    maxSpeed: 0.5
    pauseOnSelected: false # true 意味着当选中对应 tag 时,停止转动

预览部署

  • 完成安装和显示，可以通过 hexo clean && hexo g && hexo s 来进行本地预览, hexo clean为必须选项。

  • PS:不要使用hexo g -d 或者 hexo d -g这类组合命令。

参考

hexo-tag-cloud - npm (npmjs.com)