hexo 彩色标签云插件

最近开了一个 nodejs 的坑，之前并没有接触过 nodejs，学了半天打算实践一下，恰巧 hexo 就是用 nodejs 开发的轻量级博客框架，故给 hexo 写了一个彩色标签云插件。

hexo-echarts-tagcloud 是一个基于 echarts 的 hexo 标签云插件。

介绍

快速启动

目前插件已经推送到了 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 格式主题
  在主题目录原 tag 模板组件位置中新增以下内容

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 一样的要求呀。

开源许可证

Apache License.

技术实现

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 目录，以便发布。

参考文档

• Hexo
• nunjucks
• echarts