Web前端开发技术

Appearance

给静态站点加评论：serverless 初体验 ​

vitepress基础里看过：build 之后 dist/ 里只有 html/css/js，没有任何"运行中"的东西——那评论存到哪？第 1 周 WordPress 的评论存在 MySQL 里，由常驻的 PHP 写进去；VitePress 站点没有数据库也没有后端，评论框从何谈起？

答案是：自己不设后台，就借别人的后台。gitee/github 的 issue / discussion 就是现成的"数据库 + 写入 API"：评论组件在浏览器里调用平台 API 把评论写进去，展示时再调 API 拉回来。你的站点依旧纯静态，动态部分托管给了平台——这就是 serverless（无自管服务器，平台替你运行）与前后端分离（静态前端 + API 后端）的最小样本。

元信息 ​

  • 目标：以 gitee/github 为后台给 VitePress 站点接入评论，体感 serverless 与前后端分离的架构形态
  • 关键概念：serverless、前后端分离、评论插件、giscus、公开 API
  • 关联阶段：cp1
  • 常见误区：以为静态站点不能有动态功能（浏览器里的 JS 可以调用任何 API）；以为 serverless 是"没有服务器"（是"服务器不归你管"——平台替你运行，你只跟 API 打交道）

第 1 步：准备后台（github 主路） ​

  • 在 github 建一个公开仓库——它就是你的"评论数据库"，评论将存放在它的 Discussions 里
  • 仓库 Settings 开启 Discussions；安装 giscus app，它获得"代替评论者读写 Discussions"的授权
  • 打开 giscus.app，填入仓库名，选映射方式（pathname）与分类（建议 Announcements），页面会生成 repo-id、category-id 等接入参数

国内访问 github 不稳时可用 gitee 替代：gitee 仓库的 issue 同样能当后台，接入组件用社区移植版（如 giteement）；步骤同构——建公开仓库、生成 OAuth 应用、拿参数。

第 2 步：接入 VitePress ​

社区插件 vitepress-plugin-comment-with-giscus 把评论组件挂到每个页面的底部插槽：

bash
npm i -D vitepress-plugin-comment-with-giscus
javascript
// .vitepress/theme/index.mts（示意：在默认主题的 doc-after 插槽挂载 giscus，参数来自 giscus.app；
// 导入名、挂载细节以插件 README 为准，适合与 AI 结对完成）
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import giscusTalk from 'vitepress-plugin-comment-with-giscus'

export default {
  ...DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      'doc-after': () => h(giscusTalk, {
        repo: '你的用户名/仓库名', repoId: 'xxx', category: 'Announcements', categoryId: 'xxx',
        mapping: 'pathname', lang: 'zh-CN',
      }),
    })
  },
}

第 3 步：验证与观察 ​

  • docs:dev 打开任意文章页，底部出现评论框；用 github 账号登录，发一条评论
  • 到 github 仓库的 Discussions 里看：这条评论就在那里——页面只是把它"展示"出来
  • 换个浏览器（或手机）再打开同一页：评论仍能加载，因为每次都是浏览器实时向 github API 拉取

验收标准 ​

  • [ ] 站点文章页可评论，评论出现在 github Discussions（或 gitee issue）里
  • [ ] 能画清三方的请求关系：浏览器 → 你的静态站点（拿页面）；浏览器 → 平台 API（读写评论）；你的站点与平台之间没有任何调用

思考 ​

  • 评论数据到底存在哪里？谁拥有它？（对照第 1 周：WordPress 的评论在你自己的 MySQL 里）
  • 这个架构里，"前端"和"后端"各是谁？分离体现在哪？（呼应实训：表单及前后端交互）
  • 若平台停服或限流，你的站点会怎样？——serverless 的代价