Mkdocs教程
python 虚拟环境使用
mkdocs安装
mkdocs命令
mkdocs配置文件
mkdocs内嵌Open WebUI
本文档使用 MrDoc 发布
-
+
首页
mkdocs内嵌Open WebUI
--- # **教程:在 MkDocs 中内嵌 Open WebUI 弹窗助手** 本教程将实现: * 在 MkDocs 页面右下角显示一个 **“AI 助手”按钮** * 点击后弹出一个 **可折叠的 Open WebUI iframe 窗口** * 由 MkDocs 服务器加载自定义 JS/CSS * 能嵌入登录界面、保持 WebSocket 通信 示例最终效果如下: ``` 页面右下角 → “AI助手”按钮 → 弹出 360×560 的 Open WebUI 窗口 ``` --- # **1. 目录结构** 你的文件结构如下(保持一致即可): ```bash root@debian1-hp01:~# tree /root/mydoc /root/mydoc ├── docs │ ├── css │ │ └── openwebui.css │ ├── index.md │ └── js │ └── openwebui.js └── mkdocs.yml ``` 说明: * `docs/css/openwebui.css` —— 控制按钮与iframe样式 * `docs/js/openwebui.js` —— 控制按钮创建与iframe显示逻辑 * `mkdocs.yml` —— 配置 MkDocs 让其加载 CSS 与 JS --- # **2. 编写 openwebui.css** 路径:`docs/css/openwebui.css` ```css #openwebui-btn { position: fixed; bottom: 25px; right: 25px; padding: 12px 18px; background: #3f51b5; color: white; border: none; border-radius: 8px; cursor: pointer; z-index: 9999; } #openwebui-frame { position: fixed; bottom: 90px; right: 12px; width: 360px; height: 560px; border: 1px solid #ccc; border-radius: 8px; z-index: 9999; display: none; } ``` 作用: * 固定按钮位置 * 创建悬浮 iframe * 默认隐藏(点击按钮才展开) --- # **3. 编写 openwebui.js** 路径:`docs/js/openwebui.js` ```javascript document.addEventListener("DOMContentLoaded", function() { const btn = document.createElement("button"); btn.innerText = "AI 助手"; btn.id = "openwebui-btn"; document.body.appendChild(btn); const iframe = document.createElement("iframe"); iframe.src = "https://oi.careedu.de/"; // ← 修改为你的 Open WebUI 地址 iframe.id = "openwebui-frame"; document.body.appendChild(iframe); btn.addEventListener("click", function() { iframe.style.display = iframe.style.display === "none" ? "block" : "none"; }); }); ``` 说明: * 点击按钮,控制 iframe 的显示/隐藏 * iframe 内加载完整的 Open WebUI,包括登录界面、WebSocket --- # **4. 修改 mkdocs.yml** 确保 CSS 与 JS 被 MkDocs 加载。 编辑根目录 `/root/mydoc/mkdocs.yml`: ```yaml site_name: My Docs theme: name: material features: - navigation.tabs - navigation.sections - toc.integrate - content.code.copy extra_javascript: - js/openwebui.js extra_css: - css/openwebui.css nav: - Home: index.md ``` --- # **5. 启动 mkdocs 本地调试** ```bash mkdocs serve -a 0.0.0.0:8000 ``` 访问: ``` http://服务器IP:8000/ ``` 你会看见右下角出现 **AI助手** 按钮。 点击即可弹出 Open WebUI 页面。 --- # **6. 高度自适应与窗口拖动** docs/css/openwebui.css ```bash #openwebui-btn { position: fixed; bottom: 25px; right: 25px; padding: 12px 18px; background: #3f51b5; color: white; border: none; border-radius: 8px; cursor: pointer; z-index: 9999; } /* 外部容器(用于拖动) */ #openwebui-container { position: fixed; bottom: 90px; right: 12px; width: 360px; height: 560px; display: none; z-index: 9999; border-radius: 8px; border: 1px solid #ccc; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* 顶部标题栏,用于拖动 */ #openwebui-header { height: 32px; background: #3f51b5; color: white; font-size: 14px; padding: 6px 10px; cursor: move; user-select: none; border-radius: 8px 8px 0 0; display: flex; justify-content: space-between; align-items: center; } /* iframe 区域 */ #openwebui-frame { width: 100%; height: calc(100% - 32px); border: none; border-radius: 0 0 8px 8px; } ``` docs/js/openwebui.js ```bash document.addEventListener("DOMContentLoaded", function () { // ========= 自动高度自适应 ========= function getAutoHeight() { const screenH = window.innerHeight; const maxHeight = screenH - 80; // 顶部留 80px 不遮挡 return Math.min(560, maxHeight); } // ========= 创建按钮 ========= const btn = document.createElement("button"); btn.innerText = "AI 助手"; btn.id = "openwebui-btn"; document.body.appendChild(btn); // ========= 创建容器(用于拖动) ========= const container = document.createElement("div"); container.id = "openwebui-container"; container.style.height = getAutoHeight() + "px"; document.body.appendChild(container); // ========= 标题栏(可拖动) ========= const header = document.createElement("div"); header.id = "openwebui-header"; header.innerHTML = `<span>AI 助手</span>`; container.appendChild(header); // ========= iframe ========= const iframe = document.createElement("iframe"); iframe.id = "openwebui-frame"; iframe.src = "https://oi.careedu.de/"; // ← 修改为你的 Open WebUI 地址 container.appendChild(iframe); // ========= 按钮点击事件(显示/隐藏) ========= btn.addEventListener("click", () => { const isHidden = container.style.display === "none"; container.style.display = isHidden ? "block" : "none"; }); // ========= 监听窗口变化(自动高度) ========= window.addEventListener("resize", () => { container.style.height = getAutoHeight() + "px"; }); // ========= 拖动事件 ========= let isDragging = false; let offsetX = 0; let offsetY = 0; header.addEventListener("mousedown", function (e) { isDragging = true; offsetX = e.clientX - container.offsetLeft; offsetY = e.clientY - container.offsetTop; }); document.addEventListener("mousemove", function (e) { if (isDragging) { container.style.left = (e.clientX - offsetX) + "px"; container.style.top = (e.clientY - offsetY) + "px"; container.style.bottom = "auto"; // 拖动后取消 bottom 固定 container.style.right = "auto"; // 拖动后取消 right 固定 } }); document.addEventListener("mouseup", function () { isDragging = false; }); }); ```
koalalove
2025年12月10日 16:34
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
分享
链接
类型
密码
更新密码