Hexo NexT主题侧栏添加标签云插件

发表于 分类于 阅读次数： 本文字数： 178 阅读时长 ≈ 1 分钟

Hexo 标签云插件，Hexo Tag Cloud

插件介绍

插件地址：https://github.com/D0n9X1n/hexo-tag-cloud

中文说明：https://github.com/D0n9X1n/hexo-tag-cloud/blob/master/README.ZH.md

安装插件

SSH进入到 Hexo 的根目录，运行

1
npm install hexo-tag-cloud@^2.1.* --save

配置插件

修改 Hexo根目录/theme/next/layout/_macro/sidebar.njk 文件，搜索 back2top.sidebar 在上方插入如下代码：

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 %}

保存文件修改！

如图所示

SSH进入Hexo目录，重新部署

1
hexo cl && hexo g