Hexo next主题建立标签云

发表于 | 分类于 | | 热度: ℃ |

效果如首页

使用hexo-tag-cloud插件

hexo-tag-cloud github 地址

安装hexo-tag-cloud

进入到博客根目录，安装
npm install hexo-tag-cloud@^2.0.* --save

插件配置

在主题文件夹找到文件 theme/next/layout/_macro/sidebar.swig, 然后添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/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 %}

到倒数第四行，在以下字符前，

1
2
3
    </div>
  </aside>
{% endmacro %}

主题配置

博客根目录的——config.yml

1
2
3
4
5
6
7
# hexo-tag-cloud
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 25
    outlineColor: '#E2E1D1'
    maxSpeed: 0.1
交个盆友