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

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

使用"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 %}

【推荐，防止更新主题重置】或者修改主题的config.yml，去掉sidebar前面的#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
# 在网站目录“source/_data”中创建您的自定义文件，并取消下面所需文件的注释。
custom_file_path:
  head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

新建文件source/_data/sidebar.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">Tag Cloud</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)