本业仅为测试,上图为实时渲染完成.
本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开发一个自动生成关键词词云图的插件,词云图根据文章内容生成.
最终成品如下:
因为插件不稳定,暂时没有部署至我的博客,截了张图示意. 稍后生成在本地的代码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的函数式编程,这部分的代码非常丑陋.
demo code:https://github.com/M09Ic/hexo-generator-wordcloud/blob/master/test/fencidemo.js
词云图
echarts-wordcloud github链接:https://github.com/ecomfe/echarts-wordcloud
安装:
1 | npm install echarts |
这里我采用echarts的wordcloud组件.因为使用非常方便.
将上一步生成的数据生成词云图.
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在生产静态博客不同阶段执行插件代码的方式.这里我用到了Generator
与Tag
.
插件的逻辑与代码都非常简单,首先通过Generator
生产词云图所需要的json格式的数据,然后通过Tag
在需要时添加词云图.
我的插件设计思路如下,代码见文章开头的github链接,或使用npm install hexo-generator-wordcloud
下载.
因为结巴分词与词云图对性能消耗较大,因此我原本计划写一个generator,但因为echarts库依赖canvas完成渲染,nodejs中缺少这部分api.因此只能通过实时渲染的方式生成词云图.
项目结构:
1 | ---package.json # 用来发布到npm,保存了该项目的基本信息与依赖的库. |
hexo会自动调用所有hexo-
开头的包,在index.js注册conifg中注册对应的配置项,并注册generator
,在每个文章的目录下生成wordcloud.json
.里面保存了文章中出现的词与词频.方便接下来使用.
同时,注册了一个tag,如某个文章需要词云图,可以通过在markdown文件中添加tag来插入.
1 | --- |
Usage
安装:npm install hexo-generator-wordcloud --save
在配置文件中引入echarts.js,例如:
1 | echarts: |
markdown中任意位置插入tag:\{\% wordcloud \%\}
然后执行 hexo g
即可.
效果
总结
分词+词云图我之前用python写爬虫的时候实现过,难度并不大.但为一个开源项目添加一个插件还是第一次.
从代码难度上来说并不困难,但是需要大量的时间阅读hexo的文档与源码,这比多写几行代码更为重要.
该项目目前bug较多,建议不要使用.抽时间重构.