打开 “懒猫微服客户端” 下载应用

coco-ai

🥥 Coco AI App - Search, Connect, Collaborate, Your Personal AI Search and Assistant, all in one space.

19 次下载
0 次点赞
2 条评论
0 次催更
19

安装次数

0

点赞

2

应用评论

0

催更次数

桌面端

应用描述

🥥 Coco AI App - Search, Connect, Collaborate, Your Personal AI Search and Assistant, all in one space.

相关攻略

不建 Hugo、不用 Hexo,纯 Markdown 文件也能接入 Coco-AI!

之前我们介绍过如何通过 Coco-AI 检索 Hugo 和 Hexo 的文件结构。这种方式虽然适合博客类内容,但对于一些**零碎的笔记**或者并非建站类的 Markdown 文件,显然不够灵活。 为了解决这个问题,我写了一个适配器(connector),并发布了对应的 Docker 镜像,来实现**任意 Markdown 文件目录的元数据整理与 API 暴露**: https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai <!-- more --> 👉 镜像地址:[https://hub.docker.com/r/cloudsmithy/flask-markdown-connector](https://hub.docker.com/r/cloudsmithy/flask-markdown-connector) ## 核心原理 该 connector 的主要逻辑是: 1. **递归扫描目录及子目录下的 Markdown 文件**; 2. **识别或补充元数据**(即 YAML Front Matter); 3. **通过 RESTful API 暴露这些 Markdown 的结构信息和元数据内容**。 如下图所示,我们会在每个 Markdown 文件开头添加或提取出 YAML 元数据: ![元数据展示](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250328105358641.png) ## 一键部署 使用以下命令即可快速拉起服务: ```bash docker run -d --name markdown-connector \ -p 1313:5000 \ -v "$(pwd):/app/markdown" \ --restart always \ cloudsmithy/flask-markdown-connector ``` ### 参数说明: - `-d`:后台运行容器; - `--name markdown-connector`:指定容器名称; - `-p 1313:5000`:将宿主机的 1313 端口映射到容器的 5000 端口; - `-v "$(pwd):/app/markdown"`:将当前目录挂载进容器; - `--restart always`:配置容器异常退出后自动重启; - `cloudsmithy/flask-markdown-connector`:镜像名称。 ## API 一览 通过浏览器访问 `http://localhost:1313/apidocs` 即可打开内置 Swagger 文档。方便上层系统(如 Coco-AI)访问 Markdown 文件的元数据与内容。接口结构简洁直观,支持获取索引、刷新缓存、读取内容等功能。 ![Swagger 文档](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250328114039208.png) ### 🔹 `GET /` **功能**:返回服务启动提示信息 **说明**:用于检查服务是否正常运行 **示例响应**: ```json { "message": "Markdown Connector is running." } ``` ### 🔹 `GET /api/posts` **功能**:获取生成的 `index.json`(缓存版) **说明**:返回 Markdown 文件的路径与元数据列表,从缓存中读取,响应速度快 **用途**:Coco Server 可用作索引加载入口 **示例响应**: ```json [ { "title": "Docker 学习笔记", "path": "dev/docker.md", "tags": ["docker", "学习"], "created": "2024-11-22" }, ... ] ``` ### 🔹 `GET /index.json` **功能**:实时渲染当前 Markdown 目录结构 **说明**:等价于 `/api/posts`,但是实时读取文件而非使用缓存,适合调试或手动使用 **用途**:确保数据为最新状态时使用 ### 🔹 `GET /api/refresh` **功能**:重新扫描并生成最新的 `index.json` 缓存 **说明**:用于强制刷新目录索引,适用于新增 / 修改了 Markdown 文件后 **响应示例**: ```json { "message": "Index cache refreshed." } ``` ### 🔹 `GET /posts/` **功能**:列出 Markdown 文件路径列表(不含元数据) **说明**:返回所有可访问的 Markdown 文件路径,用于构建下拉菜单、快速跳转 **响应示例**: ```json ["notes/linux.md", "dev/docker.md", "ideas/gpt-agent.md"] ``` ### 🔹 `GET /posts/{filename}` **功能**:获取指定 Markdown 文件的内容 **参数**: - `{filename}`:Markdown 文件路径(相对于挂载目录) **用途**:用于前端点击跳转后展示具体笔记内容 **响应示例**: ```json { "filename": "dev/docker.md", "content": "# Docker 学习笔记\n\n## 容器 vs 镜像 ..." } ``` - 用于 Coco Server,推荐使用 `/api/posts` 作为内容索引源; - 使用 `/api/refresh` 后再拉一次 `/api/posts` 可确保内容最新; - 若前端需要展示具体内容,可调用 `/posts/{filename}`; - 若用在其他 AI 项目中,也可用于构建轻量级 Markdown 知识检索接口。 ## 与 Coco Server 集成 在 Orbstack 中,我们可以清晰地看到本地 Markdown 文件已经映射到容器中: ![Orbstack 文件映射](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250328110115287.png) 接着我们将 connector 的服务地址填入 Coco Server 配置中: ![配置 Coco Server](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250328114420941.png) 你可以使用 `/api/posts` 或 `/index.json` 接口,它们返回的内容基本一致: - `/api/posts` 是来自缓存的接口; - `/index.json` 是实时渲染本地文件结构。 另外,通过 `/api/refresh` 还可以手动触发缓存刷新: ![刷新缓存](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250328112740320.png) ## 效果演示 成功接入后,Coco Server 就可以读取 Markdown 文件的结构与元数据信息: ![Coco 成功抓取](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250328112721540.png) 点击条目还可以跳转到对应的网页: ![跳转链接](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250328114249329.png) 当然,和之前一样,也支持在搜索栏中直接搜索并跳转: ![搜索跳转](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250328114455959.png) ## 小结 通过这个 Flask 版 Markdown Connector,我们可以将任意 Markdown 文件目录结构化暴露给 Coco-AI,实现: - 笔记内容统一索引 - 结构与元数据清晰可控 - 快速部署,无需 Hugo/Hexo 建站 这对于日常碎片化笔记管理来说,是一个非常轻量又灵活的解决方案。

Coco-AI × Amazon S3:秒搜你的云端文件

随着企业和个人数据量的激增,如何高效管理与搜索云端资料,成为提升工作效率的关键。 **Coco-AI** 新增的 **S3 对象存储连接器**,可以将 **Amazon S3** 存储桶直接接入智能检索系统,实现秒级搜索、即时访问,让云端文件像本地文档一样触手可及。 本篇将详细介绍如何通过 **Docker 快速部署 Coco Server**,并配置 S3 连接器,完成与亚马逊云科技的无缝集成。 ### 一、快速部署 Coco Server Coco Server 是连接器功能的运行核心,部署好它后才能接入 S3。 生产环境建议使用持久化存储方式,避免数据丢失。 在应用商店中下载 https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai --- ### 二、配置 AI 模型 创建用户后,我选择 **Ollama** 作为模型提供商: - 地址:`http://localhost:11434` - 模型:`deepseek-r1:7b` ![设置模型](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/35d9bf40d93482edcfd1cac26bd0f557.png) 在「模型提供商」界面可以看到默认开启的 **Coco AI**,它会直接调用我配置的 Ollama,也支持其他兼容 OpenAI API 的 LLM。 ![模型提供商](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/b84c85218a471729a646fc47bc899838.png) ![Coco AI 设置](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/b86711e540165b68ad9f77f5c9f7e4c7.png) --- ### 三、数据源概览 Coco-AI 默认内置官方文档和 Hacker News 数据源,近期新增三类连接器: ![数据源连接器](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/45419dc868e753402576504aedb4be6f.png) - **S3 连接器**(本篇重点) - 本地文件连接器 - RSS 连接器 ![8cab32aeab3b966b11d0370372982415](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/8cab32aeab3b966b11d0370372982415.png) --- ### 四、接入 Amazon S3 1. **选择 S3 对象存储连接器** 填写 **Endpoint**(例:东京区 `s3.ap-northeast-1.amazonaws.com`)、**Bucket 名称**、**亚马逊云科技凭证(Access Key ID / Secret Access Key)**,刷新间隔建议保持 **1 分钟** 默认值。 ![3cb586e73f22d92740ae9ca8589a5548](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/3cb586e73f22d92740ae9ca8589a5548.png) 2. **获取亚马逊云科技访问凭证** - 登录 **亚马逊云科技 IAM 控制台** - 创建访问密钥(Access Key ID / Secret Access Key) - 为用户分配最小化 S3 访问权限(推荐遵循最小权限原则) ![image-20250810113853491](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250810113853491.png) 这里选择访问密钥 - 创建访问密钥,然后保存 Access Key ID / Secret Access Key 就好。 ![ae3c5becf8fbf554e94a2624e422ecd1](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/ae3c5becf8fbf554e94a2624e422ecd1.png) 创建过程中会出现最佳实践提示,不影响后续配置,下载密钥即可使用。 其他的凭证方式虽然有 IAM Role 和 Role anywhere,但是我们这次不会用到。 ![41be05e14aefb28c33a9b6cf6b6c360a](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/41be05e14aefb28c33a9b6cf6b6c360a.png) 确保这个用户有访问 S3 的权限,如果是生产的环境的话,确保要采用最小权限原则来防止不必要的麻烦。如果你在存储桶上配置了对应桶策略也可以。 ![0092335804bdbbc32e1a86523b714ceb](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/0092335804bdbbc32e1a86523b714ceb.png) 3. **对象前缀(Prefix)配置** 这个是我在 S3 上的对象存储,放了一些 markdown 文件上去。 还是这张图,我使用的是东京区的存储桶 dify233,所以 endpoint 是 s3.ap-northeast-1.amazonaws.com。 ![3cb586e73f22d92740ae9ca8589a5548](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/3cb586e73f22d92740ae9ca8589a5548.png) 这里的对象前缀可以理解为目录,在 S3 设置之初会把所有文件夹的名称当作前缀加到文件名前面,所以也有 S3 是扁平化管理一说。 ![image-20250810115049644](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250810115049644.png) --- ### 五、集成效果 完成连接后,S3 中的 Markdown 文件可被 Coco-AI **实时索引与检索**,点击搜索结果即可跳转到 S3 公网访问链接,例如: ``` https://<bucket>.s3.<region>.amazonaws.com/<对象名> ``` 不仅支持标题关键词搜索,还可结合 LLM 实现**语义检索**,极大提升信息获取效率。 ![连接器列表](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/1d685c561ee0ea233fcf8f92846d5c99.png) 添加完成后可以看到我同时接入了 S3、本地文件和 RSS,我们这里主要开介绍关于 S3 的连接器。 ![Coco App 数据源](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/facdce6af59da887be3227b663e2eae9.png) 使用 Coco-AI 搜索时,能快速检索到 s3 中的 markdown 文件。 ![c00fba85122f676609f20966c8c2ac37](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/c00fba85122f676609f20966c8c2ac37.png) 点击搜索结果可直接跳转到对应链接。 ![994789ee413cc311f518d78e8d457e00](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/994789ee413cc311f518d78e8d457e00.png) 也支持把地址复制出来:https://dify233.s3.ap-northeast-1.amazonaws.com/对象名,其实就是S3的https 链接了。 ![image-20250810115839596](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250810115839596.png) ### 六、适用场景 - **企业内部知识库**:研发文档、政策文件、培训资料统一存放于 S3 - **个人云端资料管理**:博客、项目资料随时调用 - **跨团队协作**:多地访问,实时共享 通过 **Coco-AI S3 连接器**,只需几步,即可让 ** Amazon S3** 成为高效智能检索系统的云端引擎。 无论是个人开发者,还是大型企业团队,都能快速构建**跨云端、本地、第三方数据源的统一知识平台**。

打造智能语料库:通过Coco AI Server 实现 Notion 笔记

## CoCo Server 部署 RAG,使用 Notion 作为语料库(上) https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai 1. 启动 Easysearch,这里把 Easysearch 作为语料库,把 notion 的素材存在 Easysearch 2. 启动 ollama,使用 LLM 进行推理 3. 启动 Coco Server,端口在 9000 <!-- more --> ![image-20250217142649790](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217142649790.png) Coco App 连接 Sever,输入输入 ![image-20250217142816787](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217142816787.png) 登录自己 server,依旧使用 Github 登录 ![image-20250217142837884](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217142837884.png) Github 登录之后的重定向,我们目前需要抓取最后的, 后面用这个 token 换取访问 Coco Server AI 的 key: ``` coco://oauth_callback?code=cupibub55o1cfqbveps0q804ai6aj14in3u91xjhvuk8s7ixirjsq2j9mmyyeut91nmgjwz0b494ngpk&request_id=eb94762b-f054-4710-9c6cf20889d3&provider=coco-cloud ``` ![image-20250217142925920](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217142925920.png) 认证步骤如下: 第一步: http://localhost:9000/sso/login/github?provider=coco-cloud&product=coco&request_id=dd9825e1-ebd3-4c84-9e3f-7ccb0421c508 会返回一个 Token,记录下来,这个是只是临时的, 如 XXABC 第二步: curl -H'X-API-TOKEN: XXABC' "http://localhost:9000/auth/request_access_token?request_id=dd9825e1-ebd3-4c84-9e3f-7ccb0421c508" 返回的才是你要的 Token 在 postman 中换 token,得到 access_token 和过期时间: ![image-20250217143134946](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217143134946.png) ```python import requests def parse_oauth_callback(url): query_params = {param.split('=')[0]: param.split('=')[1] for param in url.split('?')[1].split('&')} code = query_params.get("code") request_id = query_params.get("request_id") return code, request_id def request_access_token(code, base_url, request_id): url = f"{base_url}/auth/request_access_token?request_id={request_id}" headers = {"X-API-TOKEN": code} response = requests.get(url, headers=headers) return response.json() # 示例输入 oauth_callback_url = """ coco://oauth_callback?code=cupibub55o1cfqbveps0q804ai6aj151wu4in3u91xjhvuk8s7ixirjsq2j9mmyyeut91nmgjwz0b494ngpk&request_id=eb94762b-f054-4710-9c6a-0cf2088729d3&provider=coco-cloud """ base_url = "http://localhost:9000" # 解析 code 和 request_id code, request_id = parse_oauth_callback(oauth_callback_url) # 发送请求 token_response = request_access_token(code, base_url, request_id) print(token_response) ``` 可以用 access_key 查看用户信息: ![image-20250217143244767](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217143244767.png) ```python import requests url = "http://localhost:9000/account/profile" payload = {} headers = { 'X-API-TOKEN': 'cupichb55o1cfqbveq90zwomyxs791ul3esbxxt480c8dzgvdtjtvmcnsld4a5v0wvx9l9ofcf1' } response = requests.request("GET", url, headers=headers, data=payload) print(response.text) ``` 注册 Notion connector: ```python import requests import json def update_connector(base_url, api_token, connector_name, data): url = f"{base_url}/connector/{connector_name}?replace=true" headers = { "X-API-TOKEN": api_token, "Content-Type": "application/json" } response = requests.put(url, headers=headers, data=json.dumps(data)) return response.json() base_url = "http://localhost:9000" api_token = "<token>" notion_data = { "name": "Notion Docs Connector", "description": "Fetch the docs metadata for notion.", "icon": "/assets/connector/notion/icon.png", "category": "website", "tags": ["docs", "notion", "web"], "url": "http://coco.rs/connectors/notion", "assets": { "icons": { "default": "/assets/connector/notion/icon.png", "web_page": "/assets/connector/notion/icon.png", "database": "/assets/connector/notion/database.png", "page": "/assets/connector/notion/page.png" } } } response_notion = update_connector(base_url, api_token, "notion", notion_data) print(response_notion) ``` 修改 Notion 配置文件,激活检索 Notion: ![image-20250217210840104](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217210840104.png) 在 Notion 这个网站申请 API key,https://www.notion.so/profile/integrations ![image-20250217212252851](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217212252851.png) 配置完成之后,设置权限和展示 apikey ![image-20250217212349650](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217212349650.png) 配置 Notion Connector,这里需要用到 Notion 的 API Key: ```python import requests import json def create_datasource(base_url, api_token, data): url = f"{base_url}/datasource/" headers = { "X-API-TOKEN": api_token, "Content-Type": "application/json" } response = requests.post(url, headers=headers, data=json.dumps(data)) return response.json() # 示例输入 base_url = "http://localhost:9000" api_token = "<api-key>" datasource_data = { "name": "My Notion", "type": "connector", "connector": { "id": "notion", "config": { "token": "<notion token>" } } } # 发送 POST 请求 response = create_datasource(base_url, api_token, datasource_data) print(response) ``` 需要在 Notion 中设置集成,这样 Coco Server 才会搜索到: ![image-20250217212508943](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217212508943.png) Coco server 日志中可以检索到 notion 了: ![image-20250217210810825](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217210810825.png) 终于可以在搜索栏检索到了。 ![image-20250217211620791](https://raw.githubusercontent.com/Xu-Hardy/picgo-imh/master/image-20250217211620791.png)

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

说在前面,这个功能需要在语雀后台申请 Personal Access Token。使用的需要超级会员的(不是邀请新用户给的专业会员),所以需要付费使用。 https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai ![image-20250417184514581](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417184514581.png) <!-- more --> 然后在语雀后台,也就是https://www.yuque.com/settings/tokens处可以看见申请token的地方,如果你没有超级会员,这个是没办法用的。 ![image-20250417184608457](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417184608457.png) 点击新建,创建 token 分发权限,我这边给了所以的权限,语雀和 Notion 不同,这里给了权限就够了,其他地方无需在给权限。(手动@Notion 还要在文档或者文件夹授权) ![image-20250417184731432](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417184731432.png) 点击查看详情可以看到 token,这里的 token 是可以反复查看的,由此语雀这一侧的设置完毕。 ![image-20250417184902299](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417184902299.png) 回到 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: ![image-20250417185219148](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417185219148.png) 点击数据源,选择 yuque connector ![**image-20250417185638555**](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417185638555.png) 配置的地方很简单,填入数据源名称和 Token 和刷新时间。 ![image-20250417185517578](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417185517578.png) 然后我们就可以看到刷新的数据了 ![image-20250417190023214](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417190023214.png)

在 Coco AI 中接入 WordPress RSS,实现文章秒级搜索

随着内容创作者不断积累文章,如何让自己的内容被快速检索、精准找到,成为提升网站体验的重要一环。 尤其是对于使用 **WordPress** 搭建博客或官网的朋友来说,文章虽多,但用户往往需要翻页或依赖站内搜索才能找到所需内容。而如果能把 WordPress 的文章源接入 **Coco AI**,不仅能实现**秒级检索**,还可以**结合 AI 进行智能问答、聚合分析**,让你的内容价值成倍提升。 今天我就来分享一下,如何用 **WordPress 自带的 RSS 功能**,把文章无缝接入到 Coco AI 中,实现一键搜索全站文章。 ### 1. 准备工作 在开始之前,你需要: * 已经安装好的 **WordPress 网站**(如果不会安装,可以参考我之前的文章) 👉 [WordPress 安装教程](https://mp.weixin.qq.com/s/y-XqALLOhMYjkUZNXFvU7Q) 也可以在懒猫微服中直接安装 https://appstore.lazycat.cloud/#/shop/detail/dev.beiyu.wordpress * 有一个可用的 Coco AI 服务端(本地部署或云端均可) https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai ### 2. 获取 WordPress RSS 链接 WordPress 默认的 RSS 地址格式非常简单: ``` http(s)://你的域名/feed ``` ![image-20250811071134710](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811071134710.png) 为了确保 RSS 链接正常工作,你可以使用 **Fluent Reader** 这样的本地 RSS 阅读器测试一下。 如果能正常读取文章列表,说明 RSS 输出正常: ![image-20250811071207027](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811071207027.png) ### 3. 设置 RSS 输出数量与摘要长度 为了让 Coco AI 一次获取更多的文章,你可以在 WordPress 后台调整 RSS 输出数量: * **文章数量**:一次输出多少篇文章(根据需求设置,建议 20\~50 篇) * **摘要长度**:决定 AI 抓取的内容字数,摘要越长,AI 的理解能力越强 ![image-20250811071341574](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811071341574.png) ## 4. 在 Coco AI 中添加 RSS 连接器 接下来进入 **Coco AI 管理后台**,新建一个 RSS 连接器: 1. 在“数据源”中选择 **RSS** 2. 填写刚刚获取的 **WordPress RSS 链接** 3. 设置刷新频率(例如每 5 分钟、15 分钟) ![image-20250811071648993](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811071648993.png) 配置完成后,你会在连接器列表中看到刚添加的 WordPress RSS 源: ![image-20250811073351407](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811073351407.png) ### 5. 刷新并查看文章 等待 Coco AI 进行第一次数据抓取,稍后就能在文章列表中看到你的 WordPress 文章: ![image-20250811073332601](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811073332601.png) 在 Coco AI 客户端的搜索栏中,直接输入关键词,就能实时搜索 WordPress 全站文章: ![image-20250811073456219](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811073456219.png) 点击搜索结果,Coco AI 会直接跳转到对应的 WordPress 文章主页: ![image-20250811073523650](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811073523650.png) --- ### 6. 使用场景与优势 通过这种方式接入 RSS,你可以: * **快速检索**:秒级找到 WordPress 上的历史文章 * **跨平台聚合**:和其他数据源一起接入 Coco AI,实现跨网站统一搜索 * **AI 智能问答**:基于你的网站内容,直接生成读者提问的答案 * **知识库构建**:将博客内容沉淀为长期可用的知识库 只需几个步骤,就能让 WordPress 与 Coco AI 打通,实现全站文章的**智能化搜索与访问**。 如果你的网站内容很多、更新频繁,这种方法能极大提升读者和你的检索效率,让你的文章真正“活”起来。

手把手教你使用 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` ![设置模型](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/35d9bf40d93482edcfd1cac26bd0f557.png) 在「模型提供商」界面可以看到默认开启的 **Coco AI**,它会直接调用我配置的 Ollama,也支持其他兼容 OpenAI API 的 LLM。 ![模型提供商](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/b84c85218a471729a646fc47bc899838.png) ![Coco AI 设置](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/b86711e540165b68ad9f77f5c9f7e4c7.png) --- ### 三、数据源概览 Coco AI 默认植入了官方文档和 Hacker News 数据源,这次新增了三类连接器: ![8cab32aeab3b966b11d0370372982415](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/8cab32aeab3b966b11d0370372982415.png) - S3 连接器 - 本地文件连接器 - RSS 连接器(本篇重点) ![数据源连接器](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/45419dc868e753402576504aedb4be6f.png) --- ### 四、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 分钟**(默认即可) ![image-20250813065426386](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250813065426386.png) 添加完成后可以看到我同时接入了 S3、本地文件和 RSS: ![连接器列表](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/1d685c561ee0ea233fcf8f92846d5c99.png) ### 六、在 Coco App 中查看数据源 登录 Coco App 后,可以看到刚才添加的 S3、本地文件和 RSS 数据源: ![Coco App 数据源](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/facdce6af59da887be3227b663e2eae9.png) --- ### 七、搜索效果 使用 Coco-AI 搜索时,能快速检索到 RSS 中的内容,效果比博客自带的好很多: ![image-20250813065952619](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250813065952619.png) ### 总结 通过 RSS 连接器,Coco-AI 可以实时抓取和索引博客内容,并与本地文件、S3 数据等统一搜索,非常适合做多源聚合知识库。 如果 RSS 输出有限,可以调整博客端的 RSS 配置,让它输出更多历史内容,发挥 Coco AI 检索的最大价值。

Coco-AI 接入自定义数据源

https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai 之前使用 Hugo Connector 接入和 hexo 和任意 Markdown,后来官方也支持了对于任意数据源的支持,主要是开放了这个接口: ![image-20250417194847718](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417194847718.png) 具体操作如下: <!-- more --> 设置 - conntor - 新增,让输入名称和描述等信息,新建出来 conntor ![image-20250417194910829](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417194910829.png) 然后我们就能在数据源上的页面上看到刚刚添加的了 Customize Connector 了 ![image-20250417195015291](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417195015291.png) 点开提示,给了一个 API ![image-20250417194847718](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417194847718.png) 然后我们去创建 token,如图 ![image-20250417195602722](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417195602722.png) 我这边使用 Postman 进行设置 ![](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417195729078.png) 如果你的请求没有带 token,就是这样的。 ![image-20250417195729078](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250417195729078.png) 转成代码的是这样的,当然也可以开发自己的 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 服务端文件系统检索

随着企业和个人数据量的激增,如何高效管理与搜索文件资料,已成为提升工作效率的关键。 **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` ![设置模型](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/35d9bf40d93482edcfd1cac26bd0f557.png) 在「模型提供商」界面可以看到默认启用的 **Coco AI**,它会直接调用已配置的 Ollama,也支持任何兼容 OpenAI API 协议的 LLM。 ![模型提供商](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/b84c85218a471729a646fc47bc899838.png) ![Coco AI 设置](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/b86711e540165b68ad9f77f5c9f7e4c7.png) --- ### 三、数据源概览 Coco-AI 默认内置了 **官方文档** 和 **Hacker News** 数据源,并在近期新增: ![数据源连接器](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/45419dc868e753402576504aedb4be6f.png) - **本地文件连接器**(本文重点) - RSS 连接器 - S3 连接器 ![连接器选择](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/8cab32aeab3b966b11d0370372982415.png) --- ### 四、配置本地文件连接器 本地连接器的配置非常简单,只需: 1. 选择文件路径 2. 设置需要索引的文件后缀 3. 等待系统从 **localFS** 中智能提取内容 ![本地文件设置](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/5415d175c5e1d5406d863adb1c8e681b.png) ### 使用 Docker 时的注意事项 如果通过 Docker 部署 Coco Server,需要将本地目录映射到容器内,因为连接器读取的是**容器内部路径**,而非主机路径。 当然,也可以像我这样直接在 **Orbstack** 等容器平台上传文件,省去目录映射的步骤。 ![文件上传示例](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811054426758.png) 添加完成后,可以在连接器列表中看到新建的服务端本地文件连接器: ![连接器列表](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/1d685c561ee0ea233fcf8f92846d5c99.png) ### 五、在 Coco App 中查看与检索 登录 **Coco App** 后,可以看到刚刚添加的 **本地文件** 数据源,并直接进行搜索。 ![Coco App 数据源](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/facdce6af59da887be3227b663e2eae9.png) 这是刚才添加的服务端文件的搜索结果: ![搜索结果](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811054929034.png) 此外,Coco-AI 还支持客户端本地文件搜索,但本文重点展示的是**服务端文件检索**功能: ![客户端本地文件](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250811055911880.png) ### 结尾 通过本地文件连接器,Coco-AI 不仅能帮助你把服务端的文档、日志、配置文件快速接入 AI 检索,还能结合多数据源进行统一搜索,大幅减少人工查找和信息碎片化的时间成本。 未来你还可以将 本地文件检索 与 RSS、API、数据库连接器组合使用,让企业级信息管理更智能、更实时、更高效。 如果你也想让服务器里的海量资料触手可及,不妨部署一个试试——也许你的检索方式,从今天就会不一样。

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

在之前的文章中,我们让 Hexo,hugo 博客 支持了 coco AI 检索,也就是说我们还得使用客户端来检索,那是不是把搜索放在博客上呢? https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai Coco-AI 在 0.3 的版本中 ![image-20250402213914361](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250402213914361.png) --- 先找一个 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 支持嵌入,让你的网站拥有 AI 搜索力

https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.coco-ai ## Coco-AI 支持嵌入,让你的网站支持 AI 搜索 在之前的文章中,我们让 Hexo,hugo 博客 支持了 coco AI 检索,也就是说我们还得使用客户端来检索,那是不是把搜索放在博客上呢? <!-- more --> Coco-AI 在 0.3 的版本中 ![image-20250402213914361](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250402213914361.png) --- 先找一个 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` 上

懒猫评分/评论

4.0

2 条评论

已经提交0.8版本的更新,不兼容以前的版本,需要备份数据。

这个版本 0.5.0, 攻略里面讲的 rss 和本地的 connector 都没有,可以升级吗。

应用信息

最新版本

0.8.0

更新日期

10/9/2025

预估安装占用

365.9 MB

不支持平台

--

提供者

忘机山人

兼容性

可在此设备上使用

更新到了0.8的版本。不兼容以前的数据,需要备份