Getting Started
项目结构
了解 Docus v4 的项目结构。
全局结构
Docus 是一个 Nuxt 层,它在标准 Nuxt 应用基础上扩展了文档功能。这使你可以同时拥有完整 Nuxt 项目的灵活性。
当你使用 npx create-docus my-docs 创建一个新的 Docus 项目时,你会得到:
my-docs/
├── content/ # 你的 Markdown 内容
│ ├── index.md # 主页
│ └── docs/ # 文档页面
├── public/ # 静态资源
└── package.json # 依赖和脚本
你仍然可以使用传统 Nuxt 项目的任何功能或文件:
my-docs/
├── nuxt.config.ts # Nuxt 配置(添加额外模块、组件等)
├── app/ # 应用目录
├── app.config.ts # 应用配置
│ ├── components/ # 组件(添加你自己的组件)
│ ├── layouts/ # 布局(添加你自己的布局)
│ └── pages/ # 页面(添加你自己的页面)
└── server/ # 服务器端代码(添加你自己的后端代码)
content/ 目录
这是你用来编写 Markdown 页面的位置。Docus 会根据你的文件结构自动生成路由。
单语言结构:
content/
├── index.md # 主页 (/)
├── getting-started.md # 文档页面 (/getting-started)
└── guide/
├── introduction.md # 文档页面 (/guide/introduction)
└── configuration.md # 文档页面 (/guide/configuration)
你可以将文档文件放到
docs/ 子目录中,以便让它们可通过 /docs 路径访问。此外,如果需要,你还可以通过自定义 Vue 页面覆盖首页。详细信息请参阅 edition documentation。多语言结构(使用 i18n):
content/
├── en/
│ ├── index.md # 英文首页 (/en)
│ └── guide/
│ └── introduction.md # 文档页面 (/en/guide/introduction)
└── fr/
├── index.md # 法语首页 (/fr)
└── guide/
└── introduction.md # 文档页面 (/fr/guide/introduction)
public/ 目录
public/ 目录中的文件会直接部署到网站根目录,构建过程不会修改它们。这是你存放图片、图标和其他静态资源的地方。
package.json
该文件包含应用程序的全部依赖和脚本。Docus 应用的 package.json 非常简洁,示例如下:
package.json
{
"name": "my-docs",
"scripts": {
"build": "nuxt build --extends docus",
"dev": "nuxt dev --extends docus"
},
"dependencies": {
"docus": "latest",
"better-sqlite3": "^12.2.0",
"nuxt": "^4.0.0"
}
}
nuxt.config.ts
该文件不是启动 Docus 应用所必须的。
你可以在 Nuxt 配置文件中添加额外模块:
nuxt.config.ts
export default defineNuxtConfig({
extends: ['@vercel/analytics/nuxt/module']
})
app.config.ts
该文件不是启动 Docus 应用所必须的。
如果你要覆盖应用配置,则需要创建
nuxt.config.ts。在这里,你可以配置 Docus 以符合你的品牌,处理 SEO、设置站点语言,以及调整链接和社交信息。详情请参见 configuration documentation。
app.config.ts
export default defineAppConfig({
docus: {
locale: 'en', // 设置单语言站点的语言
},
seo: {
title: 'My Docs',
description: 'My awesome documentation',
},
// ... 其他配置
})
完整 Nuxt 项目能力
由于 Docus 是一个 Nuxt 层,你可以使用标准 Nuxt 项目的任何功能:
如果你想使用 Nuxt 文件覆盖应用,则需要创建
nuxt.config.ts。如果没有创建 Nuxt 配置,修改将无法生效。my-docs/
├── app/ # 应用目录(可选)
├── app.config.ts # 应用配置
│ ├── components/ # 自定义 Vue 组件
│ ├── layouts/ # 自定义布局
│ ├── pages/ # 自定义 Vue 页面(content 之外)
│ ├── composables/ # Vue 组合函数
│ └── middleware/ # 路由中间件
├── server/ # 服务器端代码
│ └── api/ # API 路由
├── plugins/ # Nuxt 插件
├── middleware/ # 全局中间件
└── modules/ # 自定义 Nuxt 模块