0 起

突然想给自己的博客网站添加一个ai助手，帮助我提问关于博客有关的知识。

1 选型

目前搭建的博客网站是一个静态网站，是没有后端来处理的，所以为节省成本，不如直接就使用云服务来完成。
最后选择的是dify，他有如下优点：

低代码平台，构建简单
有学生认证的优惠，零成本

2 工作流构建

为了提高输出的质量，考虑将自己的博客内容作为知识库传给ai助手，在工作流中直接识别是否是博客相关内容。
最后构建出来的工作流如图所示：

workflow

用户输入问题，通过知识库检索给出检索结果。使用LLM判断query和检索结果是否相关，并输出格式化的数据。
根据格式化的数据进行分支，一路根据知识库结果回复，另一路直接处理回复。

3 知识库的同步

写完博客后，如何将博客内容同步到知识库呢？
有两种方案：
方案一：自动同步
自动去爬取博客内容，定时同步博客知识库。
优点：

自动化程度高

缺点：

需要云服务器来部署服务，自行完成同步。成本较高。
同步的时机需要再仔细考量，是要设置定时任务来更新，还是设置触发器？
维护会更困难

方案二：手动同步
在本地使用hexo发布博客时使用脚本顺便更新知识库。
优点：

成本低
逻辑简单
容易维护

缺点：

每次都要手动操作，需要多执行一条命令

最后选择的时方案二

4 知识库同步的实现

查看知识库的api文档，看到有“从文本创建文档”这一条目，完美契合需求。

只需要发送类似这样的http请求就可以了

curl --request POST \
  --url https://api.dify.ai/v1/datasets/{dataset_id}/document/create-by-file \
  --header 'Authorization: Bearer <token>' \
  --header 'Content-Type: multipart/form-data' \
  --form 'data={"indexing_technique":"high_quality","process_rule":{"mode":"custom", "rules": { "segmentation":{"separator":"###", "max_tokens":500}}}}' \
  --form file='@example-file'

我使用go语言来编写代码

代码逻辑是：
读取命令行参数，确定本地文档所在目录->读取目录下的markdown文档->构建http请求，更新到知识库->返回结果

我的同步代码在这里代码仓库
还有可以优化的地方，比如使用json等方式缓存已经构建过的文档，防止重复构建。

5 嵌入ai助手

获取js代码：构建好dify应用后点击发布->嵌入到网站->复制js代码

我想实现在所有页面都可以随时点出来询问的效果。

首先在themes/butterfly/layout/_partial目录下创建dify.pug

将代码粘贴到其中。添加模块头dify。

由于footer.pug模块在各个页面中都会出现，可以考虑嵌入到这个部分。
在footer.pug的最后加上模块的引用。

6 测试和微调

本地测试，此时应该已经可以在右下角看到蓝色气泡了，点击应可以正常唤起。输入问题，可以给予正确的回复。

与原有组件冲突问题：

当前气泡只有在页面底部才会出现，页面中间是没有的。
当前气泡的位置与我原来的网站的组件有重叠，所以需要微调位置。

在当前dify版本，气泡的位置是直接由dify-chatbot-bubble-button来控制的。
修改参数，修改right改为60px，同时加上fixed，确保中间也有气泡。

再次测试，就可以获得正确的效果了。

目前还没有适配手机页面，手机竖屏看会有一些问题。