在Next主题下添加标签云
一、Hexo-Tag-Cloud标签云介绍
hexo-tag-cloud插件是github上某位大佬写的一个Hexo博客的标签云插件，旨在直观的展示标签的种类，美观大方且非常优雅。
二、插件安装方法
进入到 hexo 的根目录，在 package.json 中添加依赖:
“hexo-tag-cloud”: “2.0.*” 操作如下：
1、使用如下命令安装插件：
1
2
|
npm install hexo-tag-cloud@^2.0.* --save
|
插件的配置需要对应的环境，可以在主题文件夹里找一下，有没有对应的渲染文件，然后根据渲染文件的类型，选择对应的插件配置方法。
2、配置插件
(1) 在主题文件夹找到文件 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 %}
|
代码添加到后面即可，添加示意图如下:
3、主题配置
在博客根目录，找到 _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.1
|
- textColor: ‘#333’ 字体颜色
- textHeight: 25 字体高度，根据部署的效果调整
- maxSpeed: 0.1 文字滚动速度，根据自己喜好调整
三、效果语言
在git中输入：
1
2
|
hexo clean && hexo g && hexo s
|
四、博客部署
博客部署，在git中输入：
1
2
|
hexo clean && hexo g && hexo d
|
推荐使用 && 作为组合命令的串联符号
注：一定要严格清理缓存，这样不容易出现问题，即需要执行hexo clean
参考文章
参考文献一
参考文献二
