hexo 彩色标签云插件
最近开了一个 nodejs 的坑，之前并没有接触过 nodejs，学了半天打算实践一下，恰巧 hexo 就是用 nodejs 开发的轻量级博客框架，故给 hexo 写了一个彩色标签云插件。
hexo-echarts-tagcloud 是一个基于 echarts 的 hexo 标签云插件。
[图片: 效果]
https://static.txisfine.cn/upload/20200415162757.png/pkwatermark
介绍
快速启动
目前插件已经推送到了 npm 仓库，大家可以通过npm install -g hexo-echarts-tagcloud直接安装。
安装完成之后，需要修改_config.yml文件，增加插件的配置项。
# hexo-echarts-tagcloud
tagcloud:
enable: true
documentId: card-tag-cloud
```
在配置项中，enable 决定是否启用插件；documentId 是主题模板中 tag 组件的 id，这个 id 需要去所使用的主题源码中找。
配置完成之后，就可以在主题中挂载标签云插件了。
在主题中挂载标签云插件
目前我只测试了在 butterfly 主题中部署标签云插件。butterfly 主题使用了 pug 模板引擎。
- Pug 格式主题
if config.tagcloud.enable
script(type="text/javascript" charset="utf-8" src="/js/tagcloud/echarts.simple.js")
script(type="text/javascript" charset="utf-8" src="/js/tagcloud/echarts-wordcloud.js")
script(type="text/javascript" charset="utf-8" src="/js/tagcloud/tagcloud.js")
#card-tag-cloud(class=["card-tag-cloud"] style={height:"500px"})
```
注意，你需要给这个组件定义一个高度，style={height:"500px"}
其他格式的模板正在适配中……你也可以自行尝试，给我提交 PR。
提交 BUG 和建议
目前该项目在 GitHub 中开源，仓库地址：hexo-echarts-tagcloud
如果你遇到问题，可以发起 issues，最好可以带好错误截图和浏览器、hexo 版本，一遍更快的定位问题。或者可以直接发邮件到 tocker#16iot.cn，也是和 issues 一样的要求呀。
开源许可证
技术实现
hexo-echarts-tagcloud 是如何生成标签云的呢？插件依赖了 echarts 图表组件生成标签云。
安装插件后，会在 hexo 的生成器上注册一个扩展组件hexo.extend.generator.register，每次生成静态文件时，会自动调用这个组件。
调用该组件，通过 index.js 入口进入，主要完成三件事情。
- 生成网站的 tag 标签
site.tags的网站变量。
- 生成 tagcloud.js
nunjucks渲染这个模板，最终生成 tagcloud.js。
- 拷贝 js 文件