Yilia添加标签云

2021-07-19

字数统计:317字阅读时长≈1分

Yilia主题并没有单独的标签页，而是留在了侧栏，单独为Yilia添加一个标签云的页面

在博客目录安装标签云程序

1	npm install hexo-tag-cloud@^2.0.* --save

在主题目录 themes/yilia/layout/ 创建 tags-could.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="archives-wrap">
  <div class="widget-wrap">
    <header class="article-header">
    <h1 class="article-title"><%= __('tagcloud') %></h1>
    </header>
    <div id="myCanvasContainer" class="widget tagcloud">
      <canvas width="250" height="250" id="resCanvas" style="width:100%">
        <%- tagcloud() %>
      </canvas>
    </div>
  </div>
  </div>
<% } %>

标签云自定义，在博客根目录 _config.yml 文件添加

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

创建一个新的标签页

1	hexo new page "tags"

修改 tags/index.md 内容

---
title: 标签云
type: "tags"
layout: "tags-could"
---

现在就可以本地预览查看效果了

1	hexo clean && hexo g && hexo s

查看当前博客的标签云

标签云项目D0n9X1n/hexo-tag-cloud