Hexo添加标签云

效果参考我博客主页

如何使用

安装

进入到 hexo 的根目录，然后在 package.json 中添加依赖: "hexo-tag-cloud": "2.1.*"
然后执行 npm install 命令
然后需要你去修改主题的 tagcloud 的模板，这个依据你的主题而定。

对于 ejs 的用户

这里以默认主题 landscape 为例。
tagcloud 模板文件为 hexo/themes/landscape/layout/_widget/tagcloud.ejs
将这个文件修改为如下内容：

<% if (site.tags.length) { %>
  <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"><%= __('tagcloud') %></h3>
    <div id="myCanvasContainer" class="widget tagcloud">
      <canvas width="250" height="250" id="resCanvas" style="width=100%">
        <%- tagcloud() %>
      </canvas>
    </div>
  </div>
<% } %>

对于 swig 用户

这里以 Next 主题为例。
找到文件 next/layout/_macro/sidebar.swig, 然后添加如下内容：

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

对于 jade 用户

这里以 Apollo 主题为例
找到 apollo/layout/archive.jade 文件，并且把 container 代码块修改为如下内容:

...
block container
    include mixins/post
    .archive
        h2(class='archive-year')= 'Tag Cloud'
        script(type='text/javascript', charset='utf-8', src=url_for("/js/tagcloud.js"))
        script(type='text/javascript', charset='utf-8', src=url_for("/js/tagcanvas.js"))

        #myCanvasContainer.widget.tagcloud(align='center')
            canvas#resCanvas(width='500', height='500', style='width=100%')
                !=tagcloud()
            !=tagcloud()
    +postList()
...

最后一步

完成安装和显示，可以通过 hexo clean && hexo g && hexo s 来进行本地预览, hexo clean 为必须选项。
**PS:不要使用 hexo g -d 或者 hexo d -g 这类组合命令。

自定义

hexo-tag-cloud 插件支持自定义。非常简单的步骤就可以改变你的标签云的字体和颜色，还有突出高亮。

在你的博客根目录，找到 _config.yml 文件然后添加如下的配置项:

# hexo-tag-cloud
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 25
    outlineColor: '#E2E1D1'
    maxSpeed: 0.5

然后使用 hexo c && hexo g && hexo s 来享受属于你自己的独一无二的标签云吧

分享我遇到的一个BUG

安装完标签云之后本地测试正常，部署到线上就失效

我看了一下tag的配置文件，路径指向的是src="/js/tagcloud.js"和src="/js/tagcanvas.js"，也就是说，这两个文件都是生成再js目录下的，但我本地成功在这个目录是没有找到这两个文件的，之后用find命令找到在/public/js/下，在hexo的.gitignore文件中，这个目录是被忽略的，线上就是在js目录下找不到对应的两个文件而加载失败的。
随后我又将tag的配置文件路径指向`src=”/public/js/tagcloud.js”，部署到线上仍然不行，纠结了很久，在本地localhost：4000看一切都正常。

解决办法：

可以的话，最好是 hexo clean && hexo g && hexo s 看看效果，然后再用 hexo d 部署。hexo clean 是必须的。

如果上述方案不行的话，采用下面的：
路径应该都是『/js/』目录。这个不需要改变的。
如果你是部署到 github 的话，你的博客是在 .deploy_git 目录下(和 public 同级)。
你看看这个目录里面有没有这两个 js 文件。
如果没有，临时的解决方案是把这两个 js 拷贝到 .deploy_git/js 目录，然后手动 git push。

按照上述办法，我先是临时将两个js文件拷到.deploy_git/js，然后hexo clean、hexo d -g，发现并没有生效，在控制台仍然没有看到这两个文件，回头一看，放入.deploy_git/js中的文件都没了，然后又手动push了一次就好了。

可以试试删除 .deploy_git 文件夹，然后 hexo clean && hexo g && hexo d 看看这两个文件有没有进去。

重点：

出现这种现象，主要原因是我使用了组合命令，比如：hexo clean && hexo d -g或者hexo clean然后执行hexo d -g或者hexo g -d，在这种情况下，就会导致那两个文件没有推送上去。

简而言之，就是hexo d要单独执行，其他命令可以组合执行，否则就会导致无法推送那两个文件。