简单文档

功能与路线图

Estel Docs 当前已经实现的功能、边界与后续可扩展方向。

项目定位

Estel Docs 是一个中文文档与博客系统,核心目标是:

  • 用 Markdown 管理文档和博客。
  • 用 Nuxt Content 组织内容集合。
  • 用 Nuxt UI 与自定义组件提升阅读体验。
  • 用现代工程化手段完成构建、部署和维护。
  • 在个人站、项目站和团队知识库之间保持可扩展性。

已实现功能总览

模块已实现能力
文档系统docs 集合、侧边栏、目录、编辑链接、问题反馈、上一篇/下一篇。
博客系统blog 集合、文章列表、日期排序、分页、分类标签、封面图。
MarkdownMDC、GFM、Mermaid、数学公式、代码高亮、自定义内容组件。
搜索全站搜索覆盖 docs 与 blog。
主题浅色/深色/系统、字体、字号、主题色、自定义色、localStorage 持久化。
SEO页面 meta、OG 图片、Twitter Card、站点名配置。
LLMnuxt-llms 生成面向 LLM 的入口,当前主要覆盖 docs 集合。
分享复制链接、查看 Markdown、ChatGPT/Claude 打开、微信分享签名。
部署Nuxt build/generate、Docker 多阶段构建、Coolify 部署触发。
安全CSP、HSTS、Referrer-Policy、Permissions-Policy、移除 X-Powered-By。
工程化ESLint、typecheck、Go tests、Renovate、GitHub Actions。

现有功能详解

1. 内容集合

content.config.ts 定义了两个集合:

  • docs:文档页集合,来源为 docs/**
  • blog:博客页集合,来源为 blog/**

文档和博客都保留 rawbody,因此可以支持原始 Markdown 展示。博客额外要求 imgdate 字段,用于列表封面和时间排序。

2. 文档阅读

文档页位于 /docs/**,支持:

  • 自动查询对应路径的文档内容。
  • 从导航树推导页面 headline。
  • 自动生成页面目录。
  • 页面底部显示编辑与问题反馈入口。
  • 上一篇/下一篇 surround navigation。
  • 自定义页面链接按钮。
  • 自定义 OG 图片组件。

3. 博客阅读

博客页位于 /blog/**,支持:

  • 列表页按日期倒序展示。
  • 每页 12 篇文章,最多 15 页。
  • 从路径提取分类标签。
  • 缺省封面图兜底。
  • 详情页展示发布时间、目录、页面操作与上下篇。

4. 原始 Markdown

/raw/** 会根据路径自动判断 docs 或 blog 集合,展示 rawbody 并支持复制全文。

该能力适合:

  • 将文档发送给 AI 阅读。
  • 复制原文做二次编辑。
  • 对比渲染内容与源 Markdown。

5. 页面操作

页面头部操作区支持:

  • 复制当前链接。
  • 查看 Markdown。
  • 在 ChatGPT 中打开当前 Markdown 链接。
  • 在 Claude 中打开当前 Markdown 链接。
  • 按需挂载微信分享组件。

这些操作都围绕当前页面 URL 与 /raw/**.md URL 生成。

6. 微信分享

微信分享由两部分组成:

  1. 前端 wxShare.vue:加载微信 JSSDK、请求签名、调用分享 API。
  2. Go 服务 wechat-sign-server/:缓存 token/ticket,校验域名,生成签名。

生产部署时,需要将站点同源的 /api/wechat/ 反向代理到 Go 服务。

7. 主题系统

useTheme.ts 是主题系统的单例 composable,负责:

  • 状态管理。
  • localStorage 持久化。
  • 将字体、字号、主题色写入 DOM/CSS 变量。
  • 提供重置设置方法。

ThemeSettings.vue 提供可视化设置面板。

8. 安全与部署

nuxt.config.ts 中统一配置安全响应头,并定义预渲染策略。Dockerfile 将依赖安装、构建和运行拆分为三个阶段,CI 会先执行质量检查,再构建镜像并在 main 分支触发部署。

当前边界

以下内容尚未实现,不要误认为是当前功能:

  • 真实用户认证后端。
  • 评论系统。
  • RSS/Atom Feed。
  • Sitemap 与 robots.txt。
  • PWA / 离线阅读。
  • 多语言 i18n。
  • 前端单元测试与 E2E 测试。
  • 生产监控、错误追踪与性能看板。
  • 在线 Markdown 编辑器。
  • 文档版本控制。

路线图

P0:基础补齐

这些功能成本较低,且能明显提升站点完整度。

  • Sitemap:从 docs/blog 内容集合生成 sitemap。
  • robots.txt:明确允许搜索引擎抓取公开内容。
  • RSS/Atom:为博客提供订阅。
  • 内容链接检查:CI 中检查 Markdown 内链、外链、图片引用。
  • frontmatter 检查:对 docs/blog 必填字段给出更明确的错误。
  • 阅读时长:按文章字数估算阅读时间。
  • 面包屑导航:提升文档层级导航体验。

P1:质量与体验

  • Vitest 单元测试:覆盖 composables、utils 与关键组件逻辑。
  • Nuxt Test Utils:覆盖页面渲染、内容查询、路由行为。
  • Playwright E2E:覆盖搜索、主题设置、博客分页、raw 页面。
  • 标签/分类页:为博客生成分类索引与标签筛选。
  • 代码主题接入:将设置面板中的代码主题真正联动到代码块渲染。
  • 图注格式接入:让图片 title/alt 的展示规则可配置。
  • 复制代码/标题锚点体验优化:增强技术文档阅读效率。

P2:运营与增长

  • 隐私友好统计:接入 Umami、Plausible 或自托管分析。
  • 评论系统:评估 Giscus、Utterances 或自建评论接口。
  • PWA 离线阅读:缓存核心文档与静态资源。
  • Lighthouse CI:监控性能、SEO、可访问性。
  • 错误追踪:接入 Sentry 或等价方案。
  • 部署健康检查:Docker HEALTHCHECK 与平台探针。
  • 镜像与依赖安全扫描:Trivy、pnpm audit、CodeQL/SAST。

P3:产品化能力

  • 认证系统:为现有登录/注册 UI 接入真实后端。
  • 在线编辑器:支持 Markdown 编辑、预览、草稿与发布。
  • 内容版本:多版本文档、修订历史、回滚。
  • 多语言内容:支持中英双语或多语言站点。
  • 高级搜索:预构建索引、服务端搜索、语义搜索或问答式搜索。
  • 导出能力:PDF、EPUB、单页离线包。
  • 团队协作:权限、审核、评论、变更记录。

优先级建议

推荐按以下顺序推进:

  1. Sitemap、robots.txt、RSS:补齐公开内容站点基础设施。
  2. 内容校验与前端测试:提高长期维护稳定性。
  3. 博客分类/标签、阅读时长、面包屑:增强内容发现与阅读体验。
  4. PWA、分析、评论:开始运营化。
  5. 认证、在线编辑、多语言、版本控制:进入产品化阶段。

实施注意事项

  • 新功能应先确认是文档站能力、博客能力、运营能力还是产品化能力,避免一次性耦合过多模块。
  • 涉及 SEO 的功能应同时考虑静态生成、SSR 与 Docker 部署。
  • 涉及微信分享的功能应同时验证公众号后台配置、域名白名单、CSP 与反向代理。
  • 涉及主题的功能应确认设置状态、CSS 变量和实际组件渲染三者都已接通。
  • 涉及 AI/LLM 的功能应区分“打开外部 AI 页面”和“接入模型 API”,当前项目只实现了前者以及 nuxt-llms 内容入口。