核心概念
Nuxt
使用 Nuxt 组件构建交互式和可复用的元素
TockDocs 是一个 Nuxt 应用
TockDocs 以 Nuxt 层 的形式分发。当您搭建项目时，您会获得一个普通的 Nuxt 应用，它扩展了该层并可以使用标准 Nuxt 生态系统。
一个起步应用通常包括：
my-docs/
├── content/
├── nuxt.config.ts
├── package.json
└── public/
在此基础上，您可以添加任何标准的 Nuxt 目录，如 app/、server/、plugins/ 或 modules/。
Nuxt 模块
您可以像在任何其他 Nuxt 项目中一样安装和配置 Nuxt 模块。
示例：添加 Vercel Analytics。
安装模块
Terminal
npm install @vercel/analytics
在 nuxt.config.ts 中启用
nuxt.config.ts
export default defineNuxtConfig({
extends: ['tockdocs'],
modules: ['@vercel/analytics/nuxt/module'],
})
文档中的自定义 Vue 组件
大多数文档 UI 可以用 Markdown + MDC 完成，但您也可以创建自己的 Vue 组件并在内容中使用它们。
示例组件：
app/components/content/BrowserFrame.vue
<script setup lang="ts">
defineProps<{
title?: string
}>()
</script>
<template>
<div class="w-fit overflow-hidden rounded-xl border border-muted bg-accented px-2 pb-2 shadow-md">
<div class="flex items-center justify-between border-b border-accented bg-accented px-2 py-2">
<div class="flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-red-500" />
<span class="h-3 w-3 rounded-full bg-yellow-500" />
<span class="h-3 w-3 rounded-full bg-green-500" />
</div>
<div class="text-muted">
{{ title }}
</div>
</div>
<slot mdc-unwrap="p" />
</div>
</template>
::browser-frame{title="阿尔卑斯山"}
::
阿尔卑斯山
Vue 页面
除了 Markdown 页面，您还可以创建常规的 Vue 页面。
app/pages/hello.vue
<template>
<div>
<h1>你好</h1>
</div>
</template>
您还可以使用 definePageMeta 来更改布局或隐藏默认外壳：
app/pages/hello.vue
<script setup lang="ts">
definePageMeta({
layout: 'default',
header: false,
footer: false,
})
</script>
自定义布局
TockDocs 内置提供：
default— 用于首页和自定义 Vue 页面docs— 用于文档页面
您可以在 app/layouts/ 中添加自己的布局：
app/layouts/custom.vue
<template>
<main class="custom-layout">
<slot />
</main>
</template>
层架构的优势
因为 TockDocs 是一个层而非封闭模板，您可以：
- 在 Markdown 中编写文档
- 在需要时覆盖内置组件
- 添加自己的页面和 API
- 安装更多 Nuxt 模块
- 在同一项目中混合营销页面、应用页面和文档