为 Hexo 博客引入智能对话：集成 AI 聊天机器人全攻略

dong4j2024-11-292025-02-21

random-pic-api

简介

最近在玩儿检索增强生成（RAG，Retrieval Augmented Generation）, 本地部署了一套 dify, 应该算是 RAG 功能最全的开源项目了, 可以集成工大厂商的 AI API 以及自建的 LLM 服务.

所以就用 dify 做了一个个人知识库, 数据来源与博客内容.

dify 的部署以及使用可查看官方文档, 写的非常详细, 这里只是介绍一下如何将 dify 集成到 hexo 的博客中.

根据官方文档的说明, 我选择使用 script 标签方式 集成 dify 到博客中, 这种方式会有一个聊天机器人按钮, 不会影响博客的整体体验:

集成

首先从 dify 获取嵌入到网站中的代码, 比如下面这样:

<script>
 window.difyChatbotConfig = {
  token: 'xxxxxxxxxxxx',
  baseUrl: 'http://192.168.1.2'
 }
</script>
<script
 src="http://192.168.1.2/embed.min.js"
 id="xxxxxxxxxxxx"
 defer>
</script>
<style>
  #dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
  }
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
  }
</style>

embed.min.js 文件我下载到本地并上传到了 CDN, 然后对上述代码进行了拆分.

根据个人 hexo 配置的不同部分步骤或代码不一定适用, 但是思路都是一样.

在 source/js/dify 目录下新建下面 2 个 js 文件(/js/dify 没有就新建, 当然你可以在其他地方创建, 只要能被 hexo 引用)

dify-chat.embed.min.js 用于保存上述 embed.min.js 中的代码.

另一个是 dify-chat.js:

window.difyChatbotConfig = {
  // 必填项，由 Dify 自动生成
  token: "xxxxxxxxxxxx",
  // 可选项，默认为 false
  isDev: false,
  // 可选项，当 isDev 为 true 时，默认为 '[https://dev.udify.app](https://dev.udify.app)'，否则默认为 '[https://udify.app](https://udify.app)'
  baseUrl: "https://dify.dong4j.ink:1024",
  // 可选项，可以接受除 `id` 以外的任何有效的 HTMLElement 属性，例如 `style`、`className` 等
  containerProps: {},
  // 可选项，是否允许拖动按钮，默认为 `false`
  draggable: false,
  // 可选项，允许拖动按钮的轴，默认为 `both`，可以是 `x`、`y`、`both`
  dragAxis: "both",
  // 可选项，在 dify 聊天机器人中设置的输入对象
  inputs: {
    // 键是变量名
    // 例如：
    // name: "NAME"
  },
};

然后对 css 样式进行自定义修改, 可以新建 dify-chat.css 文件, 也可以根据官方文档, 在 difu-chat.js 进行添加, 我这里选择新建 css 文件:


:root {
    /* 按钮距离底部的距离，默认为 `1rem` */
    --dify-chatbot-bubble-button-bottom: 4.5rem;
    /* 按钮距离右侧的距离，默认为 `1rem` */
    --dify-chatbot-bubble-button-right: unset;
    /* 按钮距离左侧的距离，默认为 `unset` */
    --dify-chatbot-bubble-button-left: 1.5rem;
    /* 按钮距离顶部的距离，默认为 `unset` */
    --dify-chatbot-bubble-button-top: unset;
    /* 按钮背景颜色，默认为 `#155EEF` */
    --dify-chatbot-bubble-button-bg-color: #155EEF;
    /* 按钮宽度，默认为 `50px` */
    --dify-chatbot-bubble-button-width: 35px;
    /* 按钮高度，默认为 `50px` */
    --dify-chatbot-bubble-button-height: 35px;
    /* 按钮边框半径，默认为 `25px` */
    --dify-chatbot-bubble-button-border-radius: 30px;
    /* 按钮盒阴影，默认为 `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
    --dify-chatbot-bubble-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
    /* 按钮悬停变换，默认为 `scale(1.1)` */
    --dify-chatbot-bubble-button-hover-transform: scale(1.1);
  }

我将按钮固定到了左下角, 这样不会影响右下角的 hexo 按钮.

hexo 加载

dify 对于移动设备不是很友好, 所以我只在非移动设备上开启了 dify 聊天功能:

function loadStylesheet(href) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.appendChild(link);
}

function loadScript(src, async = true) {
  const script = document.createElement('script');
  script.src = src;
  script.async = async;
  document.body.appendChild(script);
}

function isMobileDevice() {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent.toLowerCase());
}

if (!isMobileDevice()) {
  // 如果不是移动设备，动态加载CSS和JS文件
  loadStylesheet('https://cdn.dong4j.site/source/static/dify-chat.css');
  loadScript('https://cdn.dong4j.site/source/static/dify-chat.embed.min.js');
  loadScript('https://cdn.dong4j.site/source/static/dify-chat.js');
}