当前位置：首页 > article >正文

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

article 2026/2/8 18:56:27

在之前的实践中，我们已经成功地把 Hexo、Hugo 等静态博客和 Coco-AI 检索系统打通了：只要完成向量化索引，就可以通过客户端问答界面实现基于内容的智能检索。

这一层已经很好用了，但总觉得少了点什么——

比如用户还得专门打开一个“AI 客户端”，有点割裂。那能不能像搜索框一样，直接把问答体验嵌进网页里，做到随时可问，实时返回，就像 ChatGPT 驻扎在你自己的网站里？

答案是可以的。从 Coco-AI v0.3 开始，我们终于可以像调用前端组件一样，将搜索框直接嵌入到网页中，而且配置极简，几乎零门槛。

🧱 零配置启动：Coco 搜索框长这样

实际上，哪怕你完全不改配置，直接使用默认参数，就能跑出一个干净、简洁的 AI 搜索框：

它默认采用悬浮式设计，右下角一个小 logo，点击之后弹出一个输入框，你可以直接输入问题，系统自动返回答案。

对于很多不熟前端的朋友来说，这个“即插即用”的特性真的太香了。

🚀 一步到位：HTML 页面嵌入组件

当然，如果你有自己的网页结构，也可以通过标准的 ES Module 写法，把组件嵌入到指定位置。

下面是一个最小 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>

✅ 总结一句话：
只要在页面里加一个 div，然后调用 searchbox()，AI 搜索就能跑起来。

🧪 实测效果：Live Server 本地运行

为了确认效果，我用 VS Code 的 Live Server 插件本地打开这个 HTML 文件，页面加载后就能看到组件成功加载，完全不需要编译打包或插件支持：

搜索框组件会自动初始化，可以立即输入问题，体验自然语言问答。

🌀 从 Hexo 编译失败，到想到油猴

本来我打算把这个搜索框组件嵌到 Hexo 博客中，想法很简单：直接在页面模板里引入这个模块。

结果 Hexo 的构建流程不太配合：

没法直接在页面里用 import；
改动主题文件构建后会被覆盖；
找不到原始 HTML，很多逻辑是动态拼装的；

这让我意识到：有时候，静态博客并不是一个容易动手脚的地方。

于是我换了个思路：干脆用油猴脚本直接“外挂”到页面里。

🐵 为什么选 Tampermonkey？

✅ 优点：

无需改动原站源码；
能在任意网页上注入组件，连别人家的站也行；
适合自己内测、小范围使用。

⚠️ 缺点：

需要用户安装 Tampermonkey 插件；
某些网站的 CSP 策略可能会阻止模块加载。

🧩 油猴脚本完整代码

这是我用的实际代码，只做了最基本的挂载和模块加载操作：

// ==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';// 创建搜索框容器const searchboxDiv = document.createElement('div');searchboxDiv.id = 'searchbox';document.body.appendChild(searchboxDiv);// 插入模块化脚本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);
})();

📸 最终效果：Coco 搜索框上线！

下面这个截图就是油猴脚本挂载组件后的样子，运行脚本后，你会在网页右下角看到一个熟悉的 Coco logo，点击它，就能唤出对话框：

你可以输入问题，比如“这篇博客在哪提到 RAG？”系统会自动返回你想要的内容。对于博客站长来说，这种方式几乎等同于给读者配了个“专属智能客服”。

🎯 总结一下，推荐给谁？

不管你是：

做个人博客的开发者；
运营公司知识库或文档站；
想给现有网页加点 AI “魔法”；

Coco-AI 的嵌入式搜索组件，都是一个轻量又实用的方案。

你可以选择两种方式：

嵌入方式	适用场景	优点	限制
HTML 原生嵌入	可控部署的网站、博客模板	不依赖任何插件、原生体验	需要动源码、构建系统支持模块化
Tampermonkey 插件	自测网页、不可修改站点	快速部署、无需改网页	需要浏览器插件、不适合普通用户

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

在之前的实践中，我们已经成功地把 Hexo、Hugo 等静态博客和 Coco-AI 检索系统打通了：只要完成向量化索引，就可以通过客户端问答界面实现基于内容的智能检索。这一层已经很好用了，但总觉得少了点什么—— 比如用户还得专门打开一…...

编程日记 2026/2/5 17:25:43

批处理脚本的主要解析规则

批处理脚本的主要解析规则批处理脚本(Batch files)有一套独特的解析规则，这些规则在很多情况下不太直观，但了解它们对于编写可靠的脚本至关重要。以下是最重要的一些规则： 1. 变量扩展规则标准变量扩展 (%变量%) 解析时扩展&#xff1a…...

编程日记 2025/6/17 13:31:09

TRDI 公司的RiverPro 和 RioPro ADCP 用户指南

TRDI 公司 RiverPro 和 RioPro ADCP 用户指南简介第一章 - 概述第二章 - 安装第三章 - 采集数据第四章 - 维护第五章 - 测试RIVERPRO/RIOPRO第六章 - 故障排除第七章 - 将系统返回TRDI进行维修第八章 - 规格第九章 - 命令第十章 - 输出数据格式附录A-合规通知首次完整翻译《Ri…...

编程日记 2026/2/5 17:25:34

Linux 基础入门操作前言 linux操作指令介绍

1 linux 目录介绍 Linux 文件系统采用层次化的目录结构，所有目录都从根目录 / 开始 1.1 核心目录 / (根目录) 整个文件系统的起点、包含所有其他目录和文件 /bin (基本命令二进制文件) 存放系统最基本的shell命令：如 ls, cp, mv, rm, cat 等&#…...

编程日记 2025/4/9 4:28:22

【总结】SQL注入防护手段

1、对提交的数据进行数据类型判断，比如id值必须是数字：is_numeric（$id） 2、对提交的数据进行正则匹配，禁止出现注入语句，比如union、or、and等 3、对提交数据进行特殊符号转义，比如单引号、双引…...

编程日记 2025/4/8 21:09:58

OpenCV 图形API（11）对图像进行掩码操作的函数mask()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 描述对矩阵应用掩码。该函数mask设置来自给定矩阵的值，如果掩码矩阵中对应的像素值设为true，否则将矩阵的值设为0。支持的源矩阵…...

编程日记 2026/2/5 17:25:57

使用C#写的一个Kafka的使用工具

由于offset不支持通过界面推送数据，所以我写了一个kafka的连接工具，能够直接从界面推送数据，方便使用。由于使用的是C#写的，所以比offset要流畅的多。 1、数据源连接 2、获取集群的topic 3、点击获取数据能够获取最新的100条数…...

编程日记 2026/2/5 17:25:35

【通知】STM32MP157驱动开发课程全新升级！零基础入门嵌入式Linux驱动，掌握底层开发核心技能！

在嵌入式Linux系统开发中，驱动程序开发是一项关键技术，它作为硬件与软件之间的桥梁，实现了操作系统对硬件设备的控制。相较于嵌入式Linux应用开发，驱动开发由于涉及底层硬件且抽象程度较高，往往让初学者感到难度较大。…...

编程日记 2026/2/5 17:25:35

MCP协议java开发的servers，已开源

访问地址: mcp-server-java 已实现的filesystem提高性能和效率，比Python的操作更顺畅。java实现，让部署更容易。...

编程日记 2025/4/9 0:29:46

飞浆PaddlePaddle 猫狗数据大战

猫狗数据大战 1 数据集的准备以及处理操作1.1 数据集1.2 文件解压操作（python） 1.3 数据的分类1.4 创建训练集和测试集 2 网络构建CNN版本--DeepID 人脸识别网络结构DeepID 与 CNN 网络结构的差异 3 深度学习模型训练和推理的核心设置4 制图5 训练6 预测…...

编程日记 2026/2/5 17:25:36

嵌入式硬件篇---JSON通信以及解析

文章目录前言一、JSON特点语法简单数据格式灵活轻量化跨语言使用二、JSON数据结构对象数组三、JSON在单片机之间通信的应用数据封装与传输四、JSON示例代码五、JSON在上位机与单片机之间通信的应用数据交互六、JSON示例代码七、JSON解析与生成解析生成八、Python中的数据解析1…...

编程日记 2025/12/6 8:09:32

https://ybt.ssoier.cn/problem_show.php?pid1205 #include<bits/stdc.h> #define endl \n #define pii pair<int,int>using namespace std; using ll long long;void move(int n,char a,char b,char c) // n 个盘子，通过 b，从 a 移动到 …...

编程日记 2025/12/20 8:04:14

使用高德api实现天气查询

创建应用获取 Key 天气查询-基础 API 文档-开发指南-Web服务 API | 高德地图API 代码编写 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wid…...

编程日记 2026/2/5 17:25:40

蓝桥云客-修建灌木

1.修剪灌木 - 蓝桥云课修剪灌木问题描述爱丽丝要完成一项修剪灌木的工作。有 N 棵灌木整齐的从左到右排成一排。爱丽丝在每天傍晚会修剪一棵灌木，让灌木的高度变为0厘米。爱丽丝修剪灌木的顺序是从最左侧的灌木开始，每天向右修剪一棵灌木。当修剪…...

编程日记 2026/2/7 14:38:32

OpenCV 图形API（7）用于将笛卡尔坐标（x, y）转换为极坐标（magnitude, angle）函数cartToPolar()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述计算二维向量的大小和角度。 cartToPolar 函数计算每个二维向量 (x(I), y(I)) 的大小、角度，或同时计算两者： magnitude…...

编程日记 2026/2/3 19:48:50

Could not find artifact com.microsoft.sqlserver:sqljdbc4:jar:4.0 in central

具体错误 [ERROR] Failed to execute goal on project datalink-resource: Could not resolve dependencies for project com.leon.datalink:datalink-resource:jar:1.0.0: Could not find artifact com.microsoft.sqlserver:sqljdbc4:jar:4.0 in central (https://repo.maven…...

编程日记 2026/2/5 17:25:49