评论系统 - Twikoo 集成与双域名部署 ​

集成概览 ​

• 已内置组件：docs/.vitepress/theme/components/Twikoo.vue
• 挂载位置：通过主题插槽 doc-after 注入（docs/.vitepress/theme/index.ts）
• 显示规则：
  • 隐藏：首页 /、目录索引页（源文件为 */index.md）、AllArticles.md
  • 显示：普通文档页
• 主题同步：深/浅色已适配

配置方式 ​

使用自托管 Server（推荐），在 Twikoo.vue 组件中根据当前域名自动选择：

// 根据当前域名动态设置 envId
let envId = 'https://chiplayout.top/twikoo/'; // 默认
if (window.location.hostname === 'chiplayout.net') {
  envId = 'https://chiplayout.net/twikoo/';
} else if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
  envId = 'https://chiplayout.top/twikoo/'; // 本地开发使用主域名
}

双域名自动选择 ​

已在 docs/.vitepress/theme/components/Twikoo.vue 实现根据 location.hostname 自动映射：

• chiplayout.top → https://chiplayout.top/twikoo/
• chiplayout.net → https://chiplayout.net/twikoo/
• localhost / 127.0.0.1 → https://chiplayout.top/twikoo/（本地开发）

注意：envId 必须指向 Twikoo 后端服务地址，且末尾需要加 /。可在浏览器控制台执行： fetch('https://chiplayout.top/twikoo/version').then(r=>r.text()).then(console.log) 来快速验证。

如需两域名共用同一评论库，请让两域名都代理到同一 Twikoo 实例，或在该服务上放行两域名的跨域/来源校验。

组件工作方式 ​

Twikoo.vue 核心逻辑：

• 在 onMounted 时懒加载 twikoo 包
• 根据当前域名动态设置 envId 进行初始化
• 使用 envId 而非 serverURL（适用于自托管部署）
• 基于页面源文件路径精准判断隐藏/显示

本地验证步骤 ​

1. 启动：pnpm docs:dev
2. 打开任意普通文档页（非首页/索引页/AllArticles）
3. 在控制台确认：
   • 访问 https://chiplayout.top/twikoo/version 返回 JSON/文本版本号
   • 访问 https://chiplayout.net/twikoo/version 返回 JSON/文本版本号
4. 刷新页面，底部应出现评论框

常见问题 ​

• 看不到评论框：通常因为 envId 指向了站点主页而非 Twikoo 服务；或页面属于被排除的索引类页面。
• 控制台报 envId is required：表示 envId 未正确设置；请检查域名映射逻辑。
• 跨域问题：为自托管服务配置允许来源（双域名）与 HTTPS 证书。
• 双域名评论不互通：每个域名使用独立的 Twikoo 实例，如需共享评论数据，请配置后端服务支持多域名。