標(biāo)簽云.png
截圖出自 https://ruofei.site/洽瞬，訪問該站點(diǎn)可查看效果（在側(cè)邊欄下方）。標(biāo)簽云效果基于 Hexo 博客的 NexT 主題蟆融，其他主題的配置方式也可以參考這篇文章姐仅。
安裝插件
打開站點(diǎn)根目錄下的 package.json 文件刊头，添加依賴 "hexo-tag-cloud": "2.*" 后執(zhí)行 npm i仗颈》鸩眨或者直接使用命令行安裝：
npm i hexo-tag-cloud --save
配置插件
打開博客根目錄的配置文件 _config.yml 并添加以下代碼片段：
# hexo-tag-cloud 標(biāo)簽云 | see https://github.com/MikeCoder/hexo-tag-cloud
tag_cloud:
textFont: Trebuchet MS, Helvetica # 字體
textColor: '#555' # 字體顏色
textHeight: 25 # 字體高度
outlineColor: '#E2E1D1' # 字體背景色
maxSpeed: 0.1 # 標(biāo)簽云最大移動速度
之后在主題目錄下修改視圖。主題不同挨决，需要修改的文件也不同请祖，此處以 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 %}
本地預(yù)覽
完成上面步驟后盖高，在終端執(zhí)行：
hexo clean && hexo s
即可預(yù)覽效果慎陵。
本文標(biāo)題： Hexo 添加標(biāo)簽云
本文作者： 若非
發(fā)布時間： 2020年02月05日 - 22:33:43
版權(quán)聲明： 文章轉(zhuǎn)載自 https://ruofei.site/post/a602c461/，采用 BY-NC-SA 許可協(xié)議喻奥。轉(zhuǎn)載請注明出處荆姆！
