手把手教你使用 Coco AI 订阅RSS，智能检索Hexo博客

最近 Coco AI 上线了几个新功能：**S3 连接器、本地文件连接器、RSS 连接器**。本篇先重点讲 RSS 连接器检索 HEXO 博客的接入方法。 https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai ### 一、安装 Coco Server 使用 Docker 部署是最省心的方式。 #### 方式 1：映射数据目录（推荐） ```bash docker run -d \ --name cocoserver \ -p 9000:9000 \ -v data:/app/easysearch/data \ -v config:/app/easysearch/config \ -v logs:/app/easysearch/logs \ infinilabs/coco:0.7.1-2426 ``` <!-- more --> #### 方式 2：快速测试（不映射目录） ```bash docker run -d \ --name cocoserver \ -p 9000:9000 \ infinilabs/coco:0.7.1-2426 ``` > 测试环境可以用方式 2，生产环境建议使用方式 1，避免数据丢失。 ### 二、模型配置 创建完用户后，我直接设置了 **Ollama** 作为模型提供商： - 地址：`http://localhost:11434` - 模型：`deepseek-r1:7b`  在「模型提供商」界面可以看到默认开启的 **Coco AI**，它会直接调用我配置的 Ollama，也支持其他兼容 OpenAI API 的 LLM。   --- ### 三、数据源概览 Coco AI 默认植入了官方文档和 Hacker News 数据源，这次新增了三类连接器：  - S3 连接器 - 本地文件连接器 - RSS 连接器（本篇重点）  --- ### 四、Hexo 拓展 RSS 功能 我们先来安装 Hexo： ```bash pnpm install -g hexo-cli hexo init my-blog cd my-blog pnpm install ``` Hexo 默认没有开启 RSS，需要通过插件来支持。你可以这样做： --- #### 1. 安装 `hexo-generator-feed` ```bash pnpm add hexo-generator-feed ``` #### 2. 配置 `_config.yml` 在 Hexo 根目录的 `_config.yml` 里加上： ```yaml feed: type: atom # 可选: atom / rss2 / json path: atom.xml # 输出文件路径 limit: 20 # 0 表示不限制数量 ``` #### 3. 生成 ```bash pnpm hexo clean && pnpm hexo generate ``` 生成的 RSS 会在 `public/atom.xml` ### 五、添加 RSS 连接器 1. 选择 **RSS 连接器**，比如本地调试模式是 localhost:4000： 2. 输入 RSS 地址（这里我用的是我的博客）： ``` http://host.docker.internal:4000/atom.xml ``` 3. 刷新时间设为 **1 分钟**（默认即可）  添加完成后可以看到我同时接入了 S3、本地文件和 RSS：  ### 六、在 Coco App 中查看数据源 登录 Coco App 后，可以看到刚才添加的 S3、本地文件和 RSS 数据源：  --- ### 七、搜索效果 使用 Coco-AI 搜索时，能快速检索到 RSS 中的内容，效果比博客自带的好很多：  ### 总结 通过 RSS 连接器，Coco-AI 可以实时抓取和索引博客内容，并与本地文件、S3 数据等统一搜索，非常适合做多源聚合知识库。 如果 RSS 输出有限，可以调整博客端的 RSS 配置，让它输出更多历史内容，发挥 Coco AI 检索的最大价值。

Coco-AI 集成语雀作为语料库进行检索

说在前面，这个功能需要在语雀后台申请 Personal Access Token。使用的需要超级会员的（不是邀请新用户给的专业会员），所以需要付费使用。 https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai  <!-- more --> 然后在语雀后台，也就是https://www.yuque.com/settings/tokens处可以看见申请token的地方，如果你没有超级会员，这个是没办法用的。  点击新建，创建 token 分发权限，我这边给了所以的权限，语雀和 Notion 不同，这里给了权限就够了，其他地方无需在给权限。（手动@Notion 还要在文档或者文件夹授权）  点击查看详情可以看到 token，这里的 token 是可以反复查看的，由此语雀这一侧的设置完毕。  回到 coco-AI,我这边使用的是这个镜像，这里添加了对个人版本语雀的支持。 ```bash infinilabs/coco:0.3.2_NIGHTLY-20250417 ``` 启动命令如下： ``` docker run -d --name cocoserver -p 9000:9000 infinilabs/coco:0.3.2_NIGHTLY-20250417 ``` 然后进入后台初始化模型，我这里使用的本地部署的 deepseek：  点击数据源，选择 yuque connector  配置的地方很简单，填入数据源名称和 Token 和刷新时间。  然后我们就可以看到刷新的数据了 

Coco-AI 接入 Google drive

https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai 在 Coco-AI 最早的版本就提供了接入 Google drive 的视频，今天我终于实现了，而且借着全图形化的优势更加方便了。 参考这个文档新建 google SSO（好像也没啥参考性） https://developers.google.com/workspace/drive/api/quickstart/go?hl=zh-cn <!-- more --> 创建客户端  填入信息，  然后在数据访问中添加权限 - 缺少的权限加在这里（如图），https://www.googleapis.com/auth/drive  在 coco-sever 更新 google drive 的信息  然后在 coco-server 中连接  跳转 google sso  由于是测试账户，所以会有这个弹窗，继续就好  再次进行测试  获取权限  显示登陆成功  然后可以在数据源中看到对应数据 

Coco-AI 服务端文件系统检索

随着企业和个人数据量的激增，如何高效管理与搜索文件资料，已成为提升工作效率的关键。 **Coco-AI** 新增的 **本地文件连接器**，可以直接接入服务端文件系统，实现秒级搜索、即时访问，让服务器上的文件像本地文档一样触手可及。 本文将介绍如何通过 **Docker 快速部署 Coco Server**，并配置本地文件连接器，实现服务端文件的智能检索。 ### 一、快速部署 Coco Server Coco Server 是连接器功能的核心组件，部署完成后即可接入本地文件、RSS 等多种数据源。 生产环境建议使用持久化存储，避免数据丢失。 在应用商店中下载 https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai --- ### 二、配置 AI 模型 创建用户后，我选择 **Ollama** 作为模型提供商： - **地址**：`http://localhost:11434` - **模型**：`deepseek-r1:7b`  在「模型提供商」界面可以看到默认启用的 **Coco AI**，它会直接调用已配置的 Ollama，也支持任何兼容 OpenAI API 协议的 LLM。   --- ### 三、数据源概览 Coco-AI 默认内置了 **官方文档** 和 **Hacker News** 数据源，并在近期新增：  - **本地文件连接器**（本文重点） - RSS 连接器 - S3 连接器  --- ### 四、配置本地文件连接器 本地连接器的配置非常简单，只需： 1. 选择文件路径 2. 设置需要索引的文件后缀 3. 等待系统从 **localFS** 中智能提取内容  ### 使用 Docker 时的注意事项 如果通过 Docker 部署 Coco Server，需要将本地目录映射到容器内，因为连接器读取的是**容器内部路径**，而非主机路径。 当然，也可以像我这样直接在 **Orbstack** 等容器平台上传文件，省去目录映射的步骤。  添加完成后，可以在连接器列表中看到新建的服务端本地文件连接器：  ### 五、在 Coco App 中查看与检索 登录 **Coco App** 后，可以看到刚刚添加的 **本地文件** 数据源，并直接进行搜索。  这是刚才添加的服务端文件的搜索结果：  此外，Coco-AI 还支持客户端本地文件搜索，但本文重点展示的是**服务端文件检索**功能：  ### 结尾 通过本地文件连接器，Coco-AI 不仅能帮助你把服务端的文档、日志、配置文件快速接入 AI 检索，还能结合多数据源进行统一搜索，大幅减少人工查找和信息碎片化的时间成本。 未来你还可以将 本地文件检索 与 RSS、API、数据库连接器组合使用，让企业级信息管理更智能、更实时、更高效。 如果你也想让服务器里的海量资料触手可及，不妨部署一个试试——也许你的检索方式，从今天就会不一样。

从零到用：RSS 接入 Coco-AI 实战指南

最近 Coco-AI 上线了几个新功能：**S3 连接器、本地文件连接器、RSS 连接器**。我会逐一介绍，本篇先重点讲 RSS 连接器的接入方法。 ### 一、安装 Coco Server 在应用商店中下载 https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai ### 二、模型配置 创建完用户后，我直接设置了 **Ollama** 作为模型提供商： - 地址：`http://localhost:11434` - 模型：`deepseek-r1:7b`  在「模型提供商」界面可以看到默认开启的 **Coco AI**，它会直接调用我配置的 Ollama，也支持其他兼容 OpenAI API 的 LLM。   --- ### 三、数据源概览 Coco-AI 默认植入了官方文档和 Hacker News 数据源，这次新增了三类连接器：  - S3 连接器 - 本地文件连接器 - RSS 连接器（本篇重点）  --- ### 四、添加 RSS 连接器 1. 选择 **RSS 连接器** 2. 输入 RSS 地址（这里我用的是我的博客）： ``` https://airag.click/atom.xml ``` 3. 刷新时间设为 **1 分钟**（默认即可）  添加完成后可以看到我同时接入了 S3、本地文件和 RSS：  ### 五、小插曲：RSS 条目数量限制 一开始我发现 Coco-AI 只能显示 **最近 20 条**，以为是 Coco Server 的限制，后来群友提醒才发现是 **RSS 服务端设置**的问题。  在博客服务端调整配置后，RSS 就能显示 **全部文章** 了。虽然很多 RSS 只显示最近内容，但其实可以通过配置让它输出完整数据。  --- ### 六、在 Coco App 中查看数据源 登录 Coco App 后，可以看到刚才添加的 S3、本地文件和 RSS 数据源：  --- ### 七、搜索效果 使用 Coco-AI 搜索时，能快速检索到 RSS 中的内容，效果比博客自带的好很多：  点击搜索结果可直接跳转到博客文章。我用的是 **Hexo 主题**，其他 RSS 源也一样适用。  ### 总结 通过 RSS 连接器，Coco-AI 可以实时抓取和索引博客内容，并与本地文件、S3 数据等统一搜索，非常适合做多源聚合知识库。 如果 RSS 输出有限，可以调整博客端的 RSS 配置，让它输出更多历史内容，发挥 Coco-AI 检索的最大价值。

Coco AI 全新升级：全图形化 RAG 配置，一键开启智能知识管理！

https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai # Coco AI 再升级，全图形化配置 RAG 在《Coco AI APP 初体验：开启智能知识管理新篇章》和《打造智能语料库：通过 Coco AI Server 实现 Notion 笔记 RAG 检索功能》中，我介绍了 Coco AI 的第一个版本 ，我们我需要调用服务端的接口来手动添加数据源和配置登录信息，见那么在 0.2 的版本中，极限科技又开发了一个管理页面用来处理这些繁琐的信息。 同时这次更新也带来了全平台的支持，当然如果你愿意也可以自己编译源代码。 <!-- more -->  我们先来用 Docker 启动服务端，一行命令搞定，不需要再传递负载的命令行参数，也无需在启动 Easysearch。 ``` docker run -d --name cocoserver -p 9000:9000 infinilabs/coco:0.2.1-1998 ``` 服务启动在 9000 端口，那么在浏览器中打开欢迎页面：  创建账户，选择模型，和之前一样，我还是选择本地部署的 ollama 并且使用 deepseek 模型。 设置完成后我们看到主页面，我们的目的是添加数据源，这样就不用使用复杂的请求。  可以进一步设置 LLM 推理后端：  AI 助手这个功能还在开发中，后续可以期待一下。  连接数据源这里我认为是最大的亮点之一，不用再想之前改配置文件了，需要做的事情简单，以 Notion 为例简单填入 Token 和设置刷新时间即可。后按与 Notion 数据源的详细配置，可以回看之前写的《打造智能语料库：通过 Coco AI Server 实现 Notion 笔记 RAG 检索功能》  过了一会就可以在数据源中刷新出来的文档了，目前 Notion 只导入了标题，后期后导入具体内容的计划。  甚至还可以在这里进行搜索，小小的站内搜索吧。  然后回到客户端，进行登录，同时也支持暂时关闭不再需要的数据源。  登录这里不再需要手动抓 token 了，直接重定向，很方便。  登录之后，和之前一样检索，总体来说比之前省心很多。  我之前使用的是 0.1 的版本，再登录之后会遇到这个错误，只要重新安装最新版本的客户端就好了。  升级之后同样这个 chat 也进化了，还支持深度思考。由于这里我只导入了文档的标题，所以它也只给我回了文档。  这次更新体验直接提升了一大截，精简了很多配置，也简化了登录信息。感觉差不多下一步可以把这个服务部署到 NAS 上做日常使用了。

容器运行 Coco AI，如何访问宿主机的 localhost？

使用容器确实方便了很多事情，但在网络访问上可能会引出一些麻烦。 如果你的调试服务只监听在宿主机的 `localhost`，那么在容器里访问时，会找的是**容器自己的 localhost**，所以无法连通。 https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai https://appstore.lazycat.cloud/#/shop/detail/xu.infinilabs.console 因为无论是 Coco server 还是 Console 都是服务端发送请求，所以我统一记录下来。 下面介绍几种在不同环境下的解决方案。 ## 1. Mac 的 Orbstack 在 **Orbstack** 环境中，可以使用 `host.docker.internal` 代替宿主机的 `localhost`。 例如访问宿主机的 Hexo 服务（`http://localhost:4000/atom.xml`）时，直接这样写： ```bash http://host.docker.internal:4000/atom.xml ``` <!-- more --> `host.docker.internal` 会被解析到宿主机 IP，相当于容器内部的 “localhost”。  ## 2. Linux 下单容器运行 在 Linux 环境中，`host.docker.internal` 默认可能不可用，可以用以下方法： ### 方法 1：`--add-host` 运行容器时显式添加： ```bash docker run --add-host=host.docker.internal:host-gateway ... ``` 容器里访问： ```bash curl http://host.docker.internal:4000/atom.xml ``` ### 方法 2：`--network host` 在本地调试时让容器和宿主机共用网络命名空间： ```bash docker run --network host ... ``` 这样容器里的 `localhost:4000` 就等于宿主机的 `localhost:4000`。 ⚠️ 缺点：端口可能冲突，不建议在生产环境使用。 --- ## 3. Docker Compose 下多容器访问宿主机 在 **Linux + docker-compose** 场景下，容器访问宿主机的 `localhost` 同样需要绕过。可以使用以下几种方式（推荐优先使用前两种）： ### 方案 1：`host.docker.internal` ```yaml version: "3.8" services: myservice: image: your-image extra_hosts: - "host.docker.internal:host-gateway" ``` 容器里访问： ```bash curl http://host.docker.internal:4000/atom.xml ``` ### 方案 2：Docker 网桥网关 IP Linux 默认 `docker0` 网桥的宿主机 IP 通常是 `172.17.0.1`，可用以下命令确认： ```bash ip addr show docker0 ``` 容器里直接访问： ```bash curl http://172.17.0.1:4000/atom.xml ``` ⚠️ 缺点：如果 Docker 网络结构改动，IP 可能变化。 ### 方案 3：`network_mode: host` ```yaml services: myservice: image: your-image network_mode: host ``` 容器内的 `localhost:4000` 直接访问宿主机服务。 ⚠️ 缺点同上，失去网络隔离，端口冲突风险高。 ### 方案 4：绑定 Hexo 到 `0.0.0.0` 并用局域网 IP 容器里访问： ```bash curl http://192.168.x.x:4000/atom.xml ``` 其中 `192.168.x.x` 为宿主机的局域网 IP。 💡 **建议**：如果 Compose 版本 ≥ 3.4，优先使用 **方案 1**。写死 `host.docker.internal` 后，即使宿主机 IP 变化，也能稳定访问。 通过上面的几种方式，无论是在 **Orbstack**、**Linux 单容器** 还是 **Docker Compose** 场景下，都能找到合适的方法让容器访问宿主机的 `localhost` 服务。 日常调试时，推荐优先使用 `host.docker.internal`（配合 `--add-host` 或 Compose 的 `extra_hosts`），既稳定又无需记 IP； 在容器之间互访，则直接使用 **服务名/容器名**，让 Docker 自带的 DNS 帮你解析。 掌握这些技巧，既能让 Coco AI 的调试环境跑得顺畅，也能为后续复杂的容器网络架构打好基础。

Coco-AI 支持嵌入，让你的网站拥有 AI 搜索力

在之前的文章中，我们让 Hexo，hugo 博客 支持了 coco AI 检索，也就是说我们还得使用客户端来检索，那是不是把搜索放在博客上呢？ https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai Coco-AI 在 0.3 的版本中  --- 先找一个 html 来看个效果。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>搜索组件嵌入示例</title> <style> body { font-family: sans-serif; padding: 2rem; } #searchbox { margin-top: 20px; border: 1px solid #ccc; padding: 16px; border-radius: 8px; } </style> </head> <body> <h1>欢迎使用 Cloudsmithy 搜索组件</h1> <p>下面是通过 ES Module 引入的搜索框：</p> <div id="searchbox"></div> <script type="module"> import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget"; searchbox({ container: "#searchbox", }); </script> </body> </html> ``` ## 💡 原始代码： ```html <div id="searchbox"></div> <script type="module"> import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget"; searchbox({ container: "#searchbox" }); </script> ``` --- ## 🧩 每部分解析 ### 1. `<div id="searchbox"></div>` 这是一个空的 `div` 元素，作为**挂载容器**。你的 `searchbox` 组件会被渲染进这个 `div`。 - 就像 React 或 Vue 应用会挂载到 `<div id="app">` 一样 - 你在这里指定了 id 为 `searchbox`，用于后面初始化组件时绑定 --- ### 2. `<script type="module">` 这表示：这是一个 **ES Module 格式的 JavaScript 脚本**。 - 现代浏览器支持原生的模块化加载（无需打包器） - 可以使用 `import` 加载其他模块、组件 --- ### 3. `import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget";` 从远程地址（本地服务器）中导入 `searchbox` 函数： - 说明这个 URL 返回的是一个 JavaScript 模块，里面导出了 `searchbox` - 类似 Vue、React 中的组件库导入： ```js import { Button } from "element-plus"; ``` --- ### 4. `searchbox({container: "#searchbox"});` 调用 `searchbox` 函数，初始化组件，并挂载到页面中： - 参数是一个对象，指明组件要渲染在哪个 DOM 元素里 - `container: "#searchbox"` 通过 CSS 选择器指定了上面那个 `div` --- ## 🧠 通俗类比 就像你在网页上写： ```html <div id="chat"></div> <script type="module"> import { chatWidget } from "./chat.js"; chatWidget({ container: "#chat" }); </script> ``` 它就是在某个 `div` 中挂载一个聊天插件一样。你这段代码的本质就是嵌入并运行一个远程提供的 JS 组件。 --- ## ✅ 总结一句话： 这段代码的作用是： > **把远程加载的 `searchbox` 组件挂载到网页上的 `<div id="searchbox">` 中，完成动态插入功能。** --- 如果你希望我反向帮你写出那个 `searchbox` 模块怎么写，或者做成本地文件测试，也可以告诉我~ 下面是一个可以在任意网站自动嵌入你给出的 `<div>` 和 `<script>` 的油猴（Tampermonkey）脚本示例： --- ### ✅ 功能说明 - 在页面加载完成后，向 `<body>` 插入一个 `#searchbox` 的 `div` - 加载你的远程模块并初始化 `searchbox` 组件 --- 一开始打算在 hexo 的组件上改，但是在编译阶段有问题，索性使用油猴脚本来实现 ### 🐵 Tampermonkey 脚本示例 ```javascript // ==UserScript== // @name Searchbox Embedder // @namespace http://tampermonkey.net/ // @version 0.1 // @description 在任意网页中注入 searchbox 小部件 // @author You // @match *://*/* // @grant none // @run-at document-end // ==/UserScript== (function () { "use strict"; // 创建 searchbox 容器 const searchboxDiv = document.createElement("div"); searchboxDiv.id = "searchbox"; document.body.appendChild(searchboxDiv); // 动态加载模块脚本（ESM） const script = document.createElement("script"); script.type = "module"; script.textContent = ` import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget"; searchbox({ container: "#searchbox" }); `; document.body.appendChild(script); })(); ``` --- ### ⚠️ 注意事项 1. 浏览器必须支持 ES Module。 2. 若该域名不是 HTTPS，确保目标网页也是 HTTP，否则会被浏览器拦截跨协议内容。 3. 若需局部生效，请将 `@match` 改为具体的页面，例如：`https://example.com/*` --- --- ## 🌟 脚本整体作用 这个油猴脚本的作用是：**在任何网页上自动插入一个 `div#searchbox` 容器，并加载你提供的远程模块脚本，渲染搜索框组件**。 --- ## 📜 脚本逐行解析 ```javascript // ==UserScript== // @name Searchbox Embedder ``` - `@name` 是脚本的名字，显示在 Tampermonkey 的控制面板中。 ```javascript // @namespace http://tampermonkey.net/ ``` - 命名空间，可以用来区分多个脚本的作者或用途（不重要）。 ```javascript // @version 0.1 ``` - 脚本版本号。 ```javascript // @description 在任意网页中注入 searchbox 小部件 ``` - 简要说明这个脚本做什么。 ```javascript // @author You ``` - 作者名，可以改成你自己的。 ```javascript // @match *://*/* ``` - 匹配所有网站页面。如果你只想对某个特定网站注入，可将它改为： `// @match https://example.com/*` ```javascript // @grant none ``` - 没有使用 Tampermonkey 的特殊权限（如 GM\_\* 方法），所以可以写 `none`。 ```javascript // @run-at document-end ``` - 脚本在 DOM 加载完成后执行（类似 `DOMContentLoaded`）。 --- ## 💻 主体逻辑解析 ```javascript (function () { 'use strict'; ``` - 启用严格模式，避免某些低级错误。 ```javascript // 创建 searchbox 容器 const searchboxDiv = document.createElement("div"); searchboxDiv.id = "searchbox"; document.body.appendChild(searchboxDiv); ``` - 创建一个 `<div id="searchbox">` 并插入到 `<body>` 中，作为挂载点。 ```javascript // 动态加载模块脚本（ESM） const script = document.createElement("script"); script.type = "module"; ``` - 创建一个新的 `<script type="module">`，用来加载 ES 模块。 ```javascript script.textContent = ` import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget"; searchbox({ container: "#searchbox" }); `; ``` - 直接把模块内容写入 script 标签中： - 从你本地地址加载 `searchbox` 组件 - 调用 `searchbox({ container: "#searchbox" })` 初始化它 ```javascript document.body.appendChild(script); })(); ``` - 把这个 `<script type="module">` 插入到 `<body>` 中，触发模块加载和执行。 --- ## ✅ 总结 这个脚本做了三件事： 1. 在网页中插入一个 `div#searchbox` 2. 动态加载你本地的模块组件 3. 初始化这个组件并挂载到 `#searchbox` 上 --- 你如果希望它在某些页面不显示、加个按钮控制显示、支持浮窗、带样式等等，我也可以帮你升级脚本。需要的话告诉我你的想法~

Coco-AI 接入自定义数据源

https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai 之前使用 Hugo Connector 接入和 hexo 和任意 Markdown，后来官方也支持了对于任意数据源的支持，主要是开放了这个接口：  具体操作如下： <!-- more --> 设置 - conntor - 新增，让输入名称和描述等信息，新建出来 conntor  然后我们就能在数据源上的页面上看到刚刚添加的了 Customize Connector 了  点开提示，给了一个 API  然后我们去创建 token，如图  我这边使用 Postman 进行设置  如果你的请求没有带 token，就是这样的。  转成代码的是这样的，当然也可以开发自己的 agent。 ```python import requests import json url = "http://localhost:9000/datasource/d00eeolvf2xxx/_doc" payload = json.dumps({ "title": "I am just a Coco doc that you can search", "summary": "Nothing but great start", "content": "Coco is a unified private search engien that you can trust.", "url": "http://coco.rs/", "icon": "default" }) headers = { 'Content-Type': 'application/json' } response = requests.request("POST", url, headers=headers, data=payload) print(response.text) ```

Coco-AI 支持嵌入，让你的网站拥有 AI 搜索力

https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai ## Coco-AI 支持嵌入，让你的网站支持 AI 搜索 在之前的文章中，我们让 Hexo，hugo 博客 支持了 coco AI 检索，也就是说我们还得使用客户端来检索，那是不是把搜索放在博客上呢？ <!-- more --> Coco-AI 在 0.3 的版本中  --- 先找一个 html 来看个效果。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>搜索组件嵌入示例</title> <style> body { font-family: sans-serif; padding: 2rem; } #searchbox { margin-top: 20px; border: 1px solid #ccc; padding: 16px; border-radius: 8px; } </style> </head> <body> <h1>欢迎使用 Cloudsmithy 搜索组件</h1> <p>下面是通过 ES Module 引入的搜索框：</p> <div id="searchbox"></div> <script type="module"> import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget"; searchbox({ container: "#searchbox", }); </script> </body> </html> ``` ## 💡 原始代码： ```html <div id="searchbox"></div> <script type="module"> import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget"; searchbox({ container: "#searchbox" }); </script> ``` --- ## 🧩 每部分解析 ### 1. `<div id="searchbox"></div>` 这是一个空的 `div` 元素，作为**挂载容器**。你的 `searchbox` 组件会被渲染进这个 `div`。 - 就像 React 或 Vue 应用会挂载到 `<div id="app">` 一样 - 你在这里指定了 id 为 `searchbox`，用于后面初始化组件时绑定 --- ### 2. `<script type="module">` 这表示：这是一个 **ES Module 格式的 JavaScript 脚本**。 - 现代浏览器支持原生的模块化加载（无需打包器） - 可以使用 `import` 加载其他模块、组件 --- ### 3. `import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget";` 从远程地址（本地服务器）中导入 `searchbox` 函数： - 说明这个 URL 返回的是一个 JavaScript 模块，里面导出了 `searchbox` - 类似 Vue、React 中的组件库导入： ```js import { Button } from "element-plus"; ``` --- ### 4. `searchbox({container: "#searchbox"});` 调用 `searchbox` 函数，初始化组件，并挂载到页面中： - 参数是一个对象，指明组件要渲染在哪个 DOM 元素里 - `container: "#searchbox"` 通过 CSS 选择器指定了上面那个 `div` --- ## 🧠 通俗类比 就像你在网页上写： ```html <div id="chat"></div> <script type="module"> import { chatWidget } from "./chat.js"; chatWidget({ container: "#chat" }); </script> ``` 它就是在某个 `div` 中挂载一个聊天插件一样。你这段代码的本质就是嵌入并运行一个远程提供的 JS 组件。 --- ## ✅ 总结一句话： 这段代码的作用是： > **把远程加载的 `searchbox` 组件挂载到网页上的 `<div id="searchbox">` 中，完成动态插入功能。** --- 如果你希望我反向帮你写出那个 `searchbox` 模块怎么写，或者做成本地文件测试，也可以告诉我~ 下面是一个可以在任意网站自动嵌入你给出的 `<div>` 和 `<script>` 的油猴（Tampermonkey）脚本示例： --- ### ✅ 功能说明 - 在页面加载完成后，向 `<body>` 插入一个 `#searchbox` 的 `div` - 加载你的远程模块并初始化 `searchbox` 组件 --- 一开始打算在 hexo 的组件上改，但是在编译阶段有问题，索性使用油猴脚本来实现 ### 🐵 Tampermonkey 脚本示例 ```javascript // ==UserScript== // @name Searchbox Embedder // @namespace http://tampermonkey.net/ // @version 0.1 // @description 在任意网页中注入 searchbox 小部件 // @author You // @match *://*/* // @grant none // @run-at document-end // ==/UserScript== (function () { "use strict"; // 创建 searchbox 容器 const searchboxDiv = document.createElement("div"); searchboxDiv.id = "searchbox"; document.body.appendChild(searchboxDiv); // 动态加载模块脚本（ESM） const script = document.createElement("script"); script.type = "module"; script.textContent = ` import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget"; searchbox({ container: "#searchbox" }); `; document.body.appendChild(script); })(); ``` --- ### ⚠️ 注意事项 1. 浏览器必须支持 ES Module。 2. 若该域名不是 HTTPS，确保目标网页也是 HTTP，否则会被浏览器拦截跨协议内容。 3. 若需局部生效，请将 `@match` 改为具体的页面，例如：`https://example.com/*` --- --- ## 🌟 脚本整体作用 这个油猴脚本的作用是：**在任何网页上自动插入一个 `div#searchbox` 容器，并加载你提供的远程模块脚本，渲染搜索框组件**。 --- ## 📜 脚本逐行解析 ```javascript // ==UserScript== // @name Searchbox Embedder ``` - `@name` 是脚本的名字，显示在 Tampermonkey 的控制面板中。 ```javascript // @namespace http://tampermonkey.net/ ``` - 命名空间，可以用来区分多个脚本的作者或用途（不重要）。 ```javascript // @version 0.1 ``` - 脚本版本号。 ```javascript // @description 在任意网页中注入 searchbox 小部件 ``` - 简要说明这个脚本做什么。 ```javascript // @author You ``` - 作者名，可以改成你自己的。 ```javascript // @match *://*/* ``` - 匹配所有网站页面。如果你只想对某个特定网站注入，可将它改为： `// @match https://example.com/*` ```javascript // @grant none ``` - 没有使用 Tampermonkey 的特殊权限（如 GM\_\* 方法），所以可以写 `none`。 ```javascript // @run-at document-end ``` - 脚本在 DOM 加载完成后执行（类似 `DOMContentLoaded`）。 --- ## 💻 主体逻辑解析 ```javascript (function () { 'use strict'; ``` - 启用严格模式，避免某些低级错误。 ```javascript // 创建 searchbox 容器 const searchboxDiv = document.createElement("div"); searchboxDiv.id = "searchbox"; document.body.appendChild(searchboxDiv); ``` - 创建一个 `<div id="searchbox">` 并插入到 `<body>` 中，作为挂载点。 ```javascript // 动态加载模块脚本（ESM） const script = document.createElement("script"); script.type = "module"; ``` - 创建一个新的 `<script type="module">`，用来加载 ES 模块。 ```javascript script.textContent = ` import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget"; searchbox({ container: "#searchbox" }); `; ``` - 直接把模块内容写入 script 标签中： - 从你本地地址加载 `searchbox` 组件 - 调用 `searchbox({ container: "#searchbox" })` 初始化它 ```javascript document.body.appendChild(script); })(); ``` - 把这个 `<script type="module">` 插入到 `<body>` 中，触发模块加载和执行。 --- ## ✅ 总结 这个脚本做了三件事： 1. 在网页中插入一个 `div#searchbox` 2. 动态加载你本地的模块组件 3. 初始化这个组件并挂载到 `#searchbox` 上