Hexo 添加标签云

标签云.png

截图出自 https://ruofei.site/，访问该站点可查看效果（在侧边栏下方）。标签云效果基于 Hexo 博客的 NexT 主题，其他主题的配置方式也可以参考这篇文章。

安装插件

打开站点根目录下的 package.json 文件，添加依赖 "hexo-tag-cloud": "2.*" 后执行 npm i。或者直接使用命令行安装：

npm i hexo-tag-cloud --save

配置插件

打开博客根目录的配置文件 _config.yml 并添加以下代码片段：

# hexo-tag-cloud 标签云 | see https://github.com/MikeCoder/hexo-tag-cloud
tag_cloud:
  textFont: Trebuchet MS, Helvetica # 字体
  textColor: '#555' # 字体颜色
  textHeight: 25 # 字体高度
  outlineColor: '#E2E1D1' # 字体背景色
  maxSpeed: 0.1 # 标签云最大移动速度

之后在主题目录下修改视图。主题不同，需要修改的文件也不同，此处以 NexT 主题为例，其他主题请参考插件文档。

打开 layout/_macro/sidevar.swig 文件，找到类名为 sidebar-inner 的 div 元素，在该元素中最后位置添加以下代码片段：

{% 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">
    <div id="myCanvasContainer" class="widget tagcloud">
    <canvas width="220" height="250" id="resCanvas" style="width=100%">
        {{ list_tags() }}
    </canvas>
    </div>
</div>
{% endif %}

本地预览

完成上面步骤后，在终端执行：

hexo clean && hexo s

即可预览效果。

---

本文标题： Hexo 添加标签云
本文作者： 若非
发布时间： 2020年02月05日 - 22:33:43
版权声明： 文章转载自 https://ruofei.site/post/a602c461/，采用 BY-NC-SA 许可协议。转载请注明出处！