hexo 彩色标签云插件
最近开了一个 nodejs 的坑,之前并没有接触过 nodejs,学了半天打算实践一下,恰巧 hexo 就是用 nodejs 开发的轻量级博客框架,故给 hexo 写了一个彩色标签云插件。
hexo-echarts-tagcloud 是一个基于 echarts 的 hexo 标签云插件。
介绍
快速启动
目前插件已经推送到了 npm 仓库,大家可以通过npm install -g hexo-echarts-tagcloud
直接安装。
安装完成之后,需要修改_config.yml
文件,增加插件的配置项。
1 | # hexo-echarts-tagcloud |
在配置项中,enable 决定是否启用插件;documentId 是主题模板中 tag 组件的 id,这个 id 需要去所使用的主题源码中找。
配置完成之后,就可以在主题中挂载标签云插件了。
在主题中挂载标签云插件
目前我只测试了在 butterfly 主题中部署标签云插件。butterfly 主题使用了 pug 模板引擎。
- Pug 格式主题
在主题目录原 tag 模板组件位置中新增以下内容
1 | if config.tagcloud.enable |
注意,你需要给这个组件定义一个高度,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 标签
hexo 为我们提供了名为site.tags
的网站变量。 - 生成 tagcloud.js
我写了一个 tagcloud.js.tp 作为模板文件,通过nunjucks
渲染这个模板,最终生成 tagcloud.js。 - 拷贝 js 文件
将生成的 js 和 echarts 库通通拷贝到 public 目录,以便发布。