Hexo-pure改造计划——添加标签云

改造 , , 评论
温馨提示：点击页面下方以展开或折叠目录~

Hexo pure改造计划——添加标签云

安装插件

1
npm install hexo-tag-cloud --save

配置插件

将./themes/pure/layout/_widget/tagcloud.ejs修改为

1
2
3
4
5
6
7
8
9
10
11
12
<% if (site.tags.length) { %>
    <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"><%= __('widget.tagcloud') %></h3>
        <div id="myCanvasContainer" class="widget tagcloud">
            <canvas width="250" height="250" id="resCanvas" style="width=100%">
                <%- tagcloud() %>
            </canvas>
        </div>
    </div>
<% } %>

站点配置

在_config.yml最后添加：

1
2
3
4
5
6
7
# hexo-tag-cloud
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 25
    outlineColor: '#E2E1D1'
    maxSpeed: 0.1

更新

20230918

在站点配置中添加是否启用标签选项

站点配置

在_config.yml最后添加：

1
2
3
4
5
6
7
8
tag_cloud:
    enable: true
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 25
    outlineColor: '#E2E1D1'
    maxSpeed: 0.1
    pauseOnSelected: false # true 意味着当选中对应 tag 时,停止转动

配置插件

将./themes/pure/layout/_widget/tagcloud.ejs修改为

1
2
3
4
5
6
7
8
9
10
11
12
<% if (site.tags.length && config.tag_cloud.enable) { %>
  <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"><%= __('widget.tagcloud') %></h3>
      <div id="myCanvasContainer" class="widget tagcloud">
          <canvas width="250" height="250" id="resCanvas" style="width=100%">
              <%- tagcloud() %>
          </canvas>
      </div>
  </div>
<% } %>

阿波botmany things want to learn.

允许别人做别人，也要允许自己做自己啊！