hexo-tag-cloud插件介绍hexo-tag-cloud插件是一个Hexo博客的标签云插件，能够美观优雅得展示标签插件说明：https://github.com/MikeCoder/hexo-tag-cloud/blob/master/README.ZH.md
安装插件
npm install hexo-tag-cloud@^2.0.* --save配置插件(Next主题)
侧边栏
找到
blog/theme/next/layout/_macro/sidebar.swig文件，添加如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13<!-- tag-cloud -->
{% 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 %}然后
hexo clean && hexo g && hexo s就可以查看啦~
**效果:**
tags页
在tags页中显示标签云，则找到
blog/theme/next/layout/page.swig：1
2
3<div class="tag-cloud-tags">
{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
</div>在这段代码之前（或之后），添加下述代码:
1
2
3
4
5
6
7
8
9
10
11
12
13<!-- tag-cloud -->
{% 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 %}
**效果:**
