文档、博客与法律内容

Nuxt 模板中基于 Nuxt Content 的文档、博客与法律内容。

内容系统已通过 Nuxt Content v3 完整接入。模板为文档、博客和法律页面分别 定义中英文集合,并通过 Vue 页面与共用内容组件渲染。

内容集合

content.config.ts 定义六个 page collection:

集合来源
docs_en / docs_zhcontent/en/docs/**/*.md / content/zh/docs/**/*.md
blog_en / blog_zhcontent/en/blog/**/*.md / content/zh/blog/**/*.md
legal_en / legal_zhcontent/en/legal/**/*.md / content/zh/legal/**/*.md

它们共用同一 schema:

字段类型必填
titlestring
descriptiondateimageauthorstring
publishedboolean
tagsstring[]

仓库目前包含英文文档/博客,以及中英文法律内容。docs_zhblog_zh 已配置, 但还没有 Markdown 文件;补齐翻译后,才能把这两个栏目称为双语内容。

渲染入口

栏目页面
文档app/pages/docs/index.vuedocs/[...slug].vuelayouts/docs.vue
博客app/pages/blog/index.vueblog/[...slug].vue
法律app/pages/(marketing)/legal/[...slug].vue

useDocContent({ key }) 会计算带语言的路径,并查询对应的 docs_*blog_*legal_* 集合,再由 ContentRenderer 渲染。文档使用 docs layout,提供侧栏、 语言/主题切换与目录。app/components/docs 已在 nuxt.config.ts 全局注册, Markdown 可直接使用这些组件。

编写内容

---
title: 构建支付流程
description: 串联结账、webhook 与账户状态。
date: 2026-06-24
published: true
tags: [支付, Nuxt]
author: Your Team
---

# 构建支付流程

在这里编写 Markdown。

文件应放在对应语言和内容类别目录。文档采用 1.introduction/1.quick-start.md2.essentials/2.code-blocks.md 这样的数字 前缀;Nuxt Content 用它们控制源文件顺序,同时生成干净路径。

文档导航需要手工维护

可见的文档侧栏不会从文件、frontmatter、.navigation.yml 或 Fumadocs meta.json 自动生成,而是来自 app/config/docs-sidebar-config.ts

新增、移动或删除文档时,在同一改动中更新 useDocsSidebarLinks()。链接使用干净 的 /docs/... 路径;侧栏通过 NuxtLinkLocale 渲染,会保留 /zh

查询内容

使用带类型的集合名,按路径查询或拉取列表:

const page = await queryCollection("docs_en")
  .path("/en/docs/introduction/quick-start")
  .first()

const posts = await queryCollection("blog_en").all()

内置博客列表会查询所有已配置语言的集合、移除 index 页面、按固定 tag 列表筛选, 再在内存中分页。它目前不会限定为当前语言,也不会按日期排序。

共用 schema 虽接受 published,现有文档/博客/法律查询并未按它过滤。若要保存 草稿或定时发布,应增加显式的发布状态、日期与语言过滤;仅写 frontmatter 不会 隐藏页面。

文档组合式函数

  • useDocContent 选择语言集合并解析当前路径。
  • useCodeTreeState 保存代码树展开状态。
  • useFileIcon 通过 docs-common-config.ts 映射文件名/扩展名图标。
  • useBreadcrumb 基于 Nuxt Content navigation 构建面包屑。

验证

  • 新 Markdown 符合共用 frontmatter schema。
  • 页面可直接访问,手工侧栏链接在对应语言中可解析。
  • 文档目录与代码/内容组件正常渲染。
  • 博客 tag、图片、日期、作者与分页符合预期。
  • 加入过滤后,草稿/未发布页面不会出现。
  • pnpm build 没有集合或 Markdown 错误。

相关页面

On this page