📌 项目简介#

Mioku 是一个以初音未来为主题、基于 mioki 的 AI 优先 QQ 机器人框架。

• 仓库地址：https://github.com/mioku-lab/mioku
• 官网：https://mioku.pages.dev
• 开源协议：MIT
• 技术栈：TypeScript + Bun
• 底层协议：NapCat / OneBot v11

它不是传统意义上的「接大模型聊天机器人」，而是围绕 Agent / Skill 设计，让机器人可以自然地使用 QQ 功能、调用自己的插件完成各种任务。

✨ 核心特性#

官方还提供了配套项目：

• mioku-webui：可视化管理界面
• 多个官方插件：表情包、群管理、60s、MC 连接等

💖 为什么选择 Mioku？#

1. 真正 AI 优先
   不是简单对接大模型，而是围绕 Agent / Skill 设计，机器人可以主动完成任务。

2. 轻量高性能
   使用现代 TypeScript + Bun，官方称空载内存不超过 100MB。

3. 开发体验好
   插件以 npm 包形式管理，支持热插拔和配置热更新。

4. 一键启动友好
   npx mioku 即可创建项目，引导式配置，新手友好。

5. 自带 WebUI
   可视化管理插件、服务和配置，不用全程敲命令。

6. 初音主题加持
   对喜欢初音未来的用户，自带一份可爱滤镜～

目前项目还比较新，生态处于早期阶段。喜欢尝鲜和 AI Agent 玩法的朋友可以重点关注。

🛠️ 环境要求#

使用前请准备好以下环境：

• Bun（推荐一键安装：npm install -g bun）
• Git
• Chromium 内核浏览器（Chrome / Edge 等，用于截图服务）
• ffmpeg（部分插件需要）
• 一个可用的 NapCat 或其它 OneBot v11 实现端

🚀 快速开始#

1
npx mioku

1
cd <你的项目名>
2
bun run start

1
http://127.0.0.1:3339

1
# 安装插件示例
2
npx mioku install plugin 60s
3
npx mioku install plugin meme
4

5
# 安装服务示例
6
npx mioku install service ai
7

8
# 更新所有相关包
9
npx mioku update all
10

11
# 更新框架自身
12
npx mioku update self

✨ 可以找我做什么？#

如果你有以下需求或想法，欢迎随时联系我：

• 想开发软件 / 小工具
• 需要做各种自动化脚本
• 有好的 idea，但不知道怎么落地
• 单纯想找人一起头脑风暴

不管是正经项目，还是脑洞大开的小玩意，我都挺感兴趣的～

✨ 什么是 Netlify 反向代理？#

Netlify 的 Rewrites / Proxies 功能，本质上是把重定向状态码设为 200。

浏览器地址栏不会变，但请求会由 Netlify 的 CDN 在后端帮你转发到目标地址。
超级适合：

• 解决跨域（CORS）问题
• 隐藏真实 API 地址
• 把多个服务统一到一个域名下
• 网站迁移时平滑过渡

官方文档：Rewrites and proxies

🧁 方法一：使用 _redirects 文件（最简单）#

在网站的发布目录（通常是 public、dist、build 或根目录）下创建 _redirects 文件（注意：没有扩展名）。

1
# 把 /api/* 代理到 https://api.example.com/*
2
/api/*  https://api.example.com/:splat  200
3

4
# 强制代理（即使本地有同名文件也优先代理）
5
/api/*  https://api.example.com/:splat  200!
6

7
# 代理整个网站
8
/*  https://target-site.com/:splat  200

• :splat 会自动捕获后面的所有路径
• 末尾加 ! 表示强制生效（对应 force = true）

🍬 方法二：使用 netlify.toml（推荐，功能更强）#

在项目根目录创建或编辑 netlify.toml：

1
[[redirects]]
2
  from = "/api/*"
3
  to = "https://api.example.com/:splat"
4
  status = 200
5
  force = true
6

7
# 还可以添加自定义请求头哦～
8
[[redirects]]
9
  from = "/search"
10
  to = "https://api.mysearch.com"
11
  status = 200
12
  force = true
13
  headers = {X-From = "Netlify", X-Custom = "value"}

🍓 常见使用场景示例#

1
[[redirects]]
2
  from = "/api/*"
3
  to = "https://api.example.com/:splat"
4
  status = 200
5
  force = true

1
[[redirects]]
2
  from = "/other/*"
3
  to = "https://my-other-site.netlify.app/:splat"
4
  status = 200
5
  force = true

1
/*  https://old-site.com/:splat  200!

📌 小贴士与注意事项#

🌈 更复杂的需求怎么办？#

如果需要：

• 任意 URL 通用代理
• 自动重写 HTML 内容
• 添加密码保护
• 更灵活的逻辑处理

可以尝试使用 Netlify Edge Functions（基于 Deno）。
GitHub 上搜索 netlify proxy edge function 有很多现成模板可以参考～

✅ 快速验证方法#

部署完成后，打开浏览器开发者工具（F12）→ Network 面板：

1. 访问你的域名 + 代理路径
2. 看请求状态码是否为 200
3. 确认返回内容来自目标站点

如果一切正常，就成功啦！🎉

💌 写在最后#

Netlify 的反向代理功能真的很贴心，配置简单、全球 CDN 加速、免费额度也够用。
希望这篇小教程能帮到你～

有具体需求（比如代理某个 AI 接口、整个博客、或者复杂路由）随时告诉我，我可以帮你写出更精确的配置～

祝部署顺利，代码无 Bug！✨

🌱 起因#

某天打开 Google Search Console，看了一眼站点的收录情况，数据有点惨：

• 已索引页面：只有 1 个（首页）
• 未编入索引：23 个

未索引的原因分三类：

最扎眼的是「Duplicate without user-selected canonical」——全站居然没有任何 <link rel="canonical"> 标签！

没有 canonical，Google 无法区分：

• https://blyciallo.com/
• 不带斜杠的版本
• 分页页、搜索参数变体

于是它只收录一个代表页（首页），其余全部被当成重复内容。

🛠️ 修复一：补上 canonical#

在布局组件的 <head> 里加一行：

1
<link rel="canonical" href={Astro.url} />

配合 Astro 的 trailingSlash: "always"，输出的就是带斜杠的完整 URL，与 sitemap 保持一致。

这是一个纯声明式的修复，不影响页面显示，只影响搜索引擎对 URL 的判断。

修复后，无斜杠版本虽然在 Vercel 上同样返回 200，但页面内的 canonical 指向带斜杠版本，Google 会自动剔除重复 URL。

🛡️ 修复二：robots.txt 屏蔽参数页#

/archive/?tag=xxx 这类带查询参数的过滤页会被反复抓取，但永远不会被收录，纯浪费抓取配额。

在 robots.txt 里加上：

1
Disallow: /*?tag=

简单有效！

📝 修复三：消除雷同的 meta description#

Bing 后台提示「太多页面使用相同的 meta description」。

原因是之前用的兜底逻辑：

1
description || siteConfig.description || pageTitle

所有没写 description 的页面（归档、搜索、标签、分类页）全部退回到同一个站点描述。

修复方案：

1. 文章页：没有手写 description 时，兜底用正文第一段作为摘要（项目里本来就有 remark-excerpt 插件在生成 excerpt，只是没人用）
2. 归档 / 搜索 / 标签 / 分类页：各自补充独立的 description（走 i18n，六种语言都加了翻译）

🚀 修复四：接入 IndexNow#

IndexNow 是一个开放协议，Bing、Yandex、Naver、Seznam 都支持。

网站根目录放一个 <key>.txt 文件作为“地盘证明”，发布内容后主动向搜索引擎提交 URL，通常几小时到一两天内就会被抓取，不需要等爬虫慢慢来。

我做了三件事：

1. 生成一个 UUID 作为 key，写入 public/<key>.txt（注意：文件内容不能有多余的换行符，Bing 校验非常严格）
2. 写了一个构建后脚本 scripts/indexnow.ts：读 sitemap 里的 URL，逐个端点提交
3. 接入 pnpm build 最后一步，以后每次部署自动提交

🌈 现状与总结#

• Google 侧：canonical、meta description、robots.txt 均已修复；sitemap-0.xml 已成功处理（39 个 URL）。剩下的交给时间（新站收录慢是正常的）
• Bing 侧：网站地图 ✅（39 个 URL）、IndexNow ✅（353 条提交记录），Yandex / Naver / Seznam 也已收到提交
• 后续：发新文章，部署时自动提交 IndexNow，无需手动操作

流程图示例#

流程图非常适合表示流程或算法步骤。

时序图示例#

时序图显示对象之间随时间的交互。

ER 图示例#

ER 图（实体关系图）非常适合表示数据库结构。

类图示例#

类图显示系统的静态结构，包括类、属性、方法及其关系。

状态图示例#

状态图显示对象在其生命周期中经历的状态序列。

XY 图示例#

XY 图表非常适合展示趋势和对比数据。

饼图示例#

饼图适合直观展示各部分在整体中的占比。

甘特图示例#

甘特图可以按时间轴展示项目阶段、任务依赖和当前进度。

思维导图示例#

思维导图适合梳理主题层级和知识结构。

时间线示例#

时间线用于按年份或阶段呈现项目的重要事件。

用户旅程图示例#

用户旅程图能够描述用户在不同阶段的行为和体验评分。

Git 图示例#

Git 图可以清晰展示分支、提交和合并历史。

看板示例#

看板适合展示任务在不同工作阶段之间的分布。

Sankey 图示例#

Sankey 图通过连线宽度展示流量在不同节点之间的流向。

总结#

Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了流程图、时序图、ER 图、类图、状态图、XY 图、饼图、甘特图、思维导图、时间线、用户旅程图、Git 图、看板和 Sankey 图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。

要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。图表会在构建时自动渲染为 SVG，无需客户端 JavaScript 加载。

可以前往 Merman Playground 尝试更多语法，再将图表代码粘贴到文章中。