hexo插件开发笔记--hexo-generator-wordcloud

本业仅为测试,上图为实时渲染完成.

本repo暂未完成,为了先交作业,仅是一个演示demo,完整版会在之后commit

前言

我做大作业或毕业设计有个习惯,一定要做有用的东西.所以我的前端大作业打算给我的博客添加一些功能.

项目展示地址: https://m09ic.top , 采用hexo搭建.hexo是一个纯静态博客框架,没有后台管理界面.我采用git与github page完成CI(持续集成)的工作来代替繁琐的服务器管理与后台管理.

博客的搭建过程在此:https://m09ic.top/posts/64867 本文不再叙述.

临时展示demo链接: http://m09ic.top/m09ictest.github.io/posts/38789/ (仅仅在同一个域名上搭建了两个,路径配置有问题)

本次开发的插件源码地址: https://github.com/M09Ic/hexo-generator-wordcloud

需求是给hexo开发一个自动生成关键词词云图的插件,词云图根据文章内容生成.

最终成品如下:image-20200603174054949

因为插件不稳定,暂时没有部署至我的博客,截了张图示意. 稍后生成在本地的代码demo.

分为三步实现,

第一步,使用AI分词将文章内容根据频率转换成json格式,这里我采用盘古分词库来进行中文分词.

第二步,生成词云图.这里我采用echarts的wordcloud模块,

第三步,将功能集成至hexo,并publish到npmjs.

正文

中文分词

盘古分词github链接:https://github.com/leizongmin/node-segment

安装: npm install segment

原本想采用结巴分词,因为功能更加强大,但是底层额依赖于C++与python,安装困难.所以采用了盘古中文分词库.

盘古分词除了返回分词结果之外,还能返回词性.

词性是通过16进制标志位来确定的,对应的表如下:

https://github.com/leizongmin/node-segment/blob/master/lib/POSTAG.js

我已经过滤了标点符号与常见无意义的连词,在此之上,还需要过滤一些没有意义的成分,只保留有效的关键字.

例如,连词,助词,量词,介词,数词,叹词,语气词,状态词等等都是无用的.

最后,过滤掉对应的词,并将返回的数字根据频率统计转换为能被echarts-wordcloud解析的库.

js写得有点少,不太熟悉js的函数式编程,这部分的代码非常丑陋.

image-20200603152549504

demo code:https://github.com/M09Ic/hexo-generator-wordcloud/blob/master/test/fencidemo.js

词云图

echarts-wordcloud github链接:https://github.com/ecomfe/echarts-wordcloud

安装:

1
2
npm install echarts
npm install echarts-wordcloud

这里我采用echarts的wordcloud组件.因为使用非常方便.

将上一步生成的数据生成词云图.

image-20200603145538942

demo code: https://github.com/M09Ic/hexo-generator-wordcloud/blob/master/test/wordclouddemo.html

hexo-generator-wordcloud

hexo是一个台湾人开发的开源静态博客系统,代码在github上—https://github.com/hexojs/hexo,已有30k的stars.

生成词云图的demo已经实现了,接下去就是将demo封装成插件并publish.

hexo插件开发可以见官方文档,但官方文档写得实在简略,被很多像我这样打算为他开发插件的开发者诟病.许多时候,在官方文档中得不到答案的时候,必须得阅读他的源码.

官方提供了多种给hexo添加功能的方法,比较常用的有Filter,Helper,Generator,Tag,Renderer以及相对独立的Theme.分别是hexo在生产静态博客不同阶段执行插件代码的方式.这里我用到了GeneratorTag.

插件的逻辑与代码都非常简单,首先通过Generator生产词云图所需要的json格式的数据,然后通过Tag在需要时添加词云图.

我的插件设计思路如下,代码见文章开头的github链接,或使用npm install hexo-generator-wordcloud下载.

因为结巴分词与词云图对性能消耗较大,因此我原本计划写一个generator,但因为echarts库依赖canvas完成渲染,nodejs中缺少这部分api.因此只能通过实时渲染的方式生成词云图.

项目结构:

1
2
3
4
5
6
---package.json # 用来发布到npm,保存了该项目的基本信息与依赖的库.
---index.js # 入口文件,注册generator与config,以及修改模板文件
---lib #库文件目录
generator.js #生成词云图的代码
---README.md # 使用说明,暂时未空
---LICENSE # 采用了GPL开源协议

hexo会自动调用所有hexo-开头的包,在index.js注册conifg中注册对应的配置项,并注册generator,在每个文章的目录下生成wordcloud.json.里面保存了文章中出现的词与词频.方便接下来使用.

同时,注册了一个tag,如某个文章需要词云图,可以通过在markdown文件中添加tag来插入.

1
2
3
4
5
6
7
8
9
---
title: hexo插件开发笔记--hexo-wordcloud
tags: hexo
categories: 开发
---
<!--more-->

{% wordcloud %}
...

Usage

安装:npm install hexo-generator-wordcloud --save

在配置文件中引入echarts.js,例如:

1
2
3
echarts: 
echarts: https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js
echarts_wordcloud: /js/echarts-wordcloud.min.js

markdown中任意位置插入tag:\{\% wordcloud \%\}

然后执行 hexo g即可.

效果

image-20200603174031716

总结

分词+词云图我之前用python写爬虫的时候实现过,难度并不大.但为一个开源项目添加一个插件还是第一次.

从代码难度上来说并不困难,但是需要大量的时间阅读hexo的文档与源码,这比多写几行代码更为重要.

该项目目前bug较多,建议不要使用.抽时间重构.