Hexo博客美化之动态标签云

​ 动态标签云是指在博客标签界面的标签是动态运动的，而不是原来的静态排列，有一说一，确实好看，开整开整。

使用到的插件

hexo-tag-cloud

官方配置文档

安装tag-cloud

• 进入hexo更目录，打开package.json，在dependencies添加最新版的tag-cloud，例如："hexo-tag-cloud": "2.1.*"。
• 执行npm install安装插件命令。
• 之后要去修改主题的tagcloud模板，不同引擎的主题修改内容不同，这里可以参考官方文档，但是基本步骤类似，这里以fluid为例，其使用的是ejs引擎。

Fluid修改tagcloud模板

• Fluid主题的标签云位于node_modules\hexo-theme-fluid\layout\tags.ejs文件内，因此需要修改该文件的内容，打开文件，标签云代码如下所示（不同版本可能会有一些出入，大体上都是类似的）：

  <div class="text-center tagcloud">
    <%- tagcloud({
      min_font: min_font,
      max_font: max_font,
      amount: 999,
      unit: unit,
      color: true,
      start_color,
      end_color
    }) %>
  </div>

• 直接上原有的tagcloud注释掉，换上tag-cloud的代码

  <div class="text-center tagcloud">
    <!-- <%- tagcloud({
      min_font: min_font,
      max_font: max_font,
      amount: 999,
      unit: unit,
      color: true,
      start_color,
      end_color
    }) %> -->
     <% 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>
  <% } %>
  </div>

• 配置完成后，可以通过 hexo clean && hexo g && hexo s 来进行本地预览, hexo clean 为必须选项。

修复标签云高糊

​ 上过上述步骤后，理论上，标签云已经搭建完成了，但是但是，打开网页发现标签太大了，并且高糊，难受死了，好在有解决方法。

• 在标签云页面，F12打开控制台，找到标签云元素canvas，审查样式，可以修改width和height进行，知道感觉画面比较舒服。我这里使用的代码如下：

  <div class="text-center tagcloud">
    <!-- <%- tagcloud({
      min_font: min_font,
      max_font: max_font,
      amount: 999,
      unit: unit,
      color: true,
      start_color,
      end_color
    }) %> -->
      <% 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"><%= __('好多标签啊') %></h3> -->
        <div id="myCanvasContainer" class="widget tagcloud">
          <canvas width="600" height="600" id="resCanvas" </canvas>>
            <%- tagcloud() %>
          </canvas>
        </div>
      </div>
    <% } %>
  </div>

  同时，我还把字体调整了一下，在博客根目录_config.yml添加下面配置即可，目前看上去很舒服，( •̀ ω •́ )✧。

# hexo-tag-cloud
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 30
    outlineColor: '#E2E1D1'
    maxSpeed: 0.15
    pauseOnSelected: false # true 意味着当选中对应 tag 时,停止转动