在 Hexo 博客中使用标签云 hexo-tag-cloud

Hexo 标签云插件效果图

安装 hexo-tag-cloud

进入到 Hexo 的根目录，打开终端，输入以下命令：

yarn add hexo-tag-cloud

去修改主题的 tagcloud 的模板

打开文件：themes/pure/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>
<% } %>

最后一步

完成安装和显示，可以通过 hexo clean && hexo g && hexo s 来进行本地预览, hexo clean 为必须选项。

PS:不要使用 hexo g -d 或者 hexo d -g 这类组合命令

===END===

---