抓取博客文章关键词并在vuepress上显示动态词云

前言

无意间看到一个issue有提及希望vuepress-theme-hope能新增echarts的词云，看了paper-dragon的成果，果然很赞。但是由于目前theme-hope兼容的echarts图表有限，因此采用了“另辟蹊径”的方法来实现动态获取博客所有文章关键词，然后在博客中动态显示（每git push一次就自动更新词云）

成果展示

说明

以下图片是一个svg图片，因此可以通过![]()的格式在文章的任意位置引用，且因为是矢量图，因此是在任何界面查看都是“高清无损”的。

提示

本词云特点总结：

1. 矢量图，很清楚
2. 选了自认为效果还不错的繁体字体： Noto Serif TC
3. 在Git push更新项目时可通过Github Action自动运行生成词云的python文件，并与原有deploy-docs.yml合并在一起

方法思路

总体来说，词云生成的思路如下流程图。
通过wordcloud2Svg.py生成图片，然后将该流程集成到deploy-docs.yml当中（与部署Github Page联合一起使用）

词云生成流程

wordcloud2Svg.py代码示例见后面章节

具体可见本仓库的src/.vuepress/public/scripts/wordcloud2Svg.py

主要说明（具体说明见代码的注释）：

1. 遍历文章目录，将所有.md的文章内容合并为contents
2. 通过jieba.analyse.textrank来获取contents当中的关键词（通过topK设置关键词数量），并输出为keyword_counts
3. 通过OpenCC将keyword_counts转换为繁体（可根据自身喜好决定是否需要转换）
4. 通过wordcloud.generate_from_frequencies()来生成词云内容
5. 通过wordcloud.to_svg(embed_font=True)来生成svg内容
6. 将最终结果写入到/assets/img/wordcloud.svg文件当中

自动生成流程

deploy-docs.yml代码示例如下，具体可见本仓库的.github/workflows/deploy-docs.yml
主要说明（具体说明见代码的注释）：

1. 需要修改内容
   将以下代码修改为你自己的github账号、邮箱

env:
  GITHUB_NAME: XXXX
  GITHUB_EMAIL: XXXX

2. 在新增/修改文章然后push到Github时，将会运行Action脚本，实现动态生成

图片使用说明

如果action流程可正常运行，每次push后，将会在项目的src/.vuepress/public/assets/img路径下生成wordcloud.svg，此时在任意文章位置，你可以有以下3种引用图片方式：

#vuepress-theme-hope内部资源路径，举例：
![](/assets/img/wordcloud.svg)

#github原始图片路径，举例：
![](https://raw.githubusercontent.com/arthurfsy2/arthurfsy2.github.io/main/src/.vuepress/public/assets/img/wordcloud.svg)

#gitmirror免费CDN路径（githubusercontent换成gitmirror即可），举例：
![](https://raw.gitmirror.com/arthurfsy2/arthurfsy2.github.io/main/src/.vuepress/public/assets/img/wordcloud.svg)

参考代码

wordcloud2Svg

参考代码

deploy-docs

参考代码