---
canonical_url: "https://nuxt-content.zhcndoc.com"
---
<u-page-hero orientation="horizontal">
<code-group>

```mdc [content/index.md]
---
title: 山岳网站
description: 一个关于世界上最具标志性山脉的网站。
---

::my-vue-hero-component{orientation="horizontal"}
#title
欢迎来到山岳网站。
#description
这是关于山岳网站的描述。
::

这是包含**加粗**和_斜体_文本的段落。
```

```vue [pages/index.vue]
<script setup lang="ts">
const { data } = await useAsyncData('home', () => {
  return queryCollection('content').path('/').first()
})

useSeoMeta({
  title: data.value?.title,
  description: data.value?.description
})
</script>

<template>
  <ContentRenderer :value="data" />
</template>
```

</code-group>

<template v-slot:headline="">
<u-button to="https://nuxt.studio" variant="outline" size="sm" trailing-icon="i-lucide-arrow-right" className="mb-3,rounded-full">

Nuxt Studio 已发布

</u-button>
</template>

<template v-slot:title="">

基于 <span className="text-primary">

git

</span>

 的 Nuxt CMS。

</template>

<template v-slot:description="">

Nuxt Content 是 Nuxt 的一个模块，为您的应用提供了一种简便的内容管理方式。它允许开发者使用 Markdown、YAML 或 JSON 文件撰写内容，然后在应用中查询并展示。

</template>

<template v-slot:links="">
<u-button to="https://nuxt-content.zhcndoc.com/docs/getting-started/installation" label="开始使用" trailingIcon="i-lucide-arrow-right" size="lg">



</u-button>

<u-input-copy value="npx nuxt module add content">



</u-input-copy>
</template>
</u-page-hero>

<u-container className="pb-12,xl:pb-24">
<u-page-grid>
<u-page-feature icon="i-lucide-files">
<template unwrap="p" v-slot:title="">

基于文件的 CMS

</template>

<template unwrap="p" v-slot:description="">

使用 Markdown、YAML、CSV 或 JSON 编写内容，并在组件中查询。

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-filter">
<template unwrap="p" v-slot:title="">

查询构建器

</template>

<template unwrap="p" v-slot:description="">

使用类似 MongoDB 的 API 查询内容，在正确时间提取所需数据。

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-database">
<template unwrap="p" v-slot:title="">

SQLite 支持

</template>

<template unwrap="p" v-slot:description="">

为内容添加自定义字段，适用于各种类型的项目。

</template>
</u-page-feature>

<u-page-feature icon="i-simple-icons-markdown">
<template unwrap="p" v-slot:title="">

Markdown 与 Vue 结合

</template>

<template unwrap="p" v-slot:description="">

在 Markdown 文件中使用 Vue 组件，支持 props、slots 及嵌套组件。

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-list-minus">
<template unwrap="p" v-slot:title="">

代码高亮

</template>

<template unwrap="p" v-slot:description="">

通过 Shiki 集成，支持 VS Code 主题，在网站上展示美观的代码块。

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-mouse-pointer-click">
<template unwrap="p" v-slot:title="">

可视化编辑器

</template>

<template unwrap="p" v-slot:description="">

让您的团队使用 Nuxt Studio — 我们的可视化编辑器，编辑 Nuxt Content 项目。

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-panel-left">
<template unwrap="p" v-slot:title="">

导航生成

</template>

<template unwrap="p" v-slot:description="">

从内容文件生成结构化对象，在几分钟内展示导航菜单。

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-heading-1">
<template unwrap="p" v-slot:title="">

Prose 组件

</template>

<template unwrap="p" v-slot:description="">

使用 Vue 组件自定义 HTML 排版标签，为内容提供一致的样式。

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-globe">
<template unwrap="p" v-slot:title="">

全平台部署

</template>

<template unwrap="p" v-slot:description="">

Nuxt Content 兼容所有主机提供商，支持静态、服务器、无服务器和边缘部署。

</template>
</u-page-feature>
</u-page-grid>
</u-container>

<u-page-section>
<template v-slot:title="">

内容管理所需的一切

</template>

<template v-slot:description="">

结合基于文件的简洁性与 Vue 组件的强大功能。构建内容丰富的网站，从文档页面到复杂应用。

<div className="hidden,md:block">
<u-color-mode-image className="size-full,absolute,top-0,inset-0" dark="/home/features-dark.svg" light="/home/features-light.svg">



</u-color-mode-image>
</div>
</template>
</u-page-section>

<u-page-section orientation="horizontal" :reverse="true">
<tabs>
<tabs-item icon="i-lucide-eye" label="预览">
<browser-frame>
<example-landing-hero image="/mountains/everest.jpg">
<template v-slot:title="">

珠穆朗玛峰。

</template>

<template v-slot:description="">

珠穆朗玛峰是世界最高的山峰，海拔 8848 米。

</template>
</example-landing-hero>
</browser-frame>
</tabs-item>

<tabs-item icon="i-simple-icons-markdown" label="content/index.md">

```mdc [content/index.md]
---
title: 山岳网站
description: 一个关于世界上最具标志性山脉的网站。
---

::landing-hero
---
image: /mountains/everest.jpg
---
#title
珠穆朗玛峰。

#description
珠穆朗玛峰是世界最高的山峰，海拔 8848 米。
::
```

</tabs-item>

<tabs-item icon="i-simple-icons-vuedotjs" label="components/LandingHero.vue">

```vue [components/LandingHero.vue]
<script setup lang="ts">
  defineProps<{
    image: string 
  }>()
  </script>
  
  <template>
    <section class="flex flex-col sm:flex-row sm:items-center gap-4 py-8 sm:gap-12 sm:py-12">
      <div>
        <h1 class="text-4xl font-semibold">
          <slot name="title" />
        </h1>
        <div class="text-base text-gray-600 dark:text-gray-300">
          <slot name="description" />
        </div>
      </div>
      <img :src="image" class="w-1/2 rounded-lg">
    </section>
  </template>
```

</tabs-item>
</tabs>

<template v-slot:title="">

Markdown 遇见 <span className="text-(--ui-primary)">

Vue

</span>

 组件

</template>

<template v-slot:description="">

我们创造了 MDC 语法，让您能在 Markdown 文件内使用带 props 和 slots 的 Vue 组件。

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-list">
<template unwrap="p" v-slot:title="">

使用 frontmatter 语法指定 props

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-hash">
<template unwrap="p" v-slot:title="">

使用 `#` 调用组件插槽

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-code-xml">
<template unwrap="p" v-slot:title="">

添加其他 HTML 属性

</template>
</u-page-feature>
</template>

<template v-slot:links="">
<u-button to="https://nuxt-content.zhcndoc.com/docs/files/markdown#mdc-syntax" label="了解更多 MDC" variant="subtle" color="neutral" trailingIcon="i-lucide-arrow-right">



</u-button>
</template>
</u-page-section>

<u-page-section orientation="horizontal">
<tabs>
<tabs-item icon="i-simple-icons-vuedotjs" label="pages/blog.vue">

```vue [pages/blog.vue]
<script setup lang="ts">
const { data: posts } = await useAsyncData('blog', () => {
  return queryCollection('blog').all()
})
</script>

<template>
  <div>
    <h1>博客</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <NuxtLink :to="post.path">{{ post.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>
```

</tabs-item>

<tabs-item icon="i-simple-icons-typescript" label="content.config.ts">

```ts [content.config.ts]
import { defineContentConfig, defineCollection } from '@nuxt/content'
import { z } from 'zod'

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      source: 'blog/*.md',
      type: 'page',
      // 为文档集合定义自定义 schema
      schema: z.object({
        tags: z.array(z.string()),
        image: z.string(),
        date: z.Date()
      })
    })
  }
})
```

</tabs-item>
</tabs>

<template v-slot:title="">

支持 <span className="text-(--ui-secondary)">

类型安全

</span>

 的查询

</template>

<template v-slot:description="">

通过集合定义内容结构，使用 schema 验证和完善的类型安全进行查询。

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-layout-grid">
<template unwrap="p" v-slot:title="">

为相似内容文件创建集合

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-circle-check">
<template unwrap="p" v-slot:title="">

为集合 frontmatter 定义 schema

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-text-cursor">
<template unwrap="p" v-slot:title="">

在 Vue 文件中获得自动补全支持

</template>
</u-page-feature>
</template>

<template v-slot:links="">
<u-button to="https://nuxt-content.zhcndoc.com/docs/collections/define" label="了解更多内容集合" variant="subtle" color="neutral" trailingIcon="i-lucide-arrow-right">



</u-button>
</template>
</u-page-section>

<u-page-section orientation="horizontal" :reverse="true">
<video :autoplay="true" :controls="true" :loop="true" src="https://res.cloudinary.com/nuxt/video/upload/v1767647099/studio/studio-demo_eiofld.mp4">



</video>

<template unwrap="p" v-slot:title="">

让<span className="text-(--ui-primary)">

任何人编辑

</span>

您的网站

</template>

<template v-slot:description="">
<u-button to="https://nuxt.studio" variant="outline" color="primary" target="_blank">

试用 Nuxt Studio

</u-button>

使用我们的免费开源可视化界面**Studio 模块**，直接在线生产环境编辑您的 Nuxt Content 网站内容。

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-mouse-pointer-click">
<template unwrap="p" v-slot:title="">

在生产网站直接实时预览内容

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-file-text">
<template unwrap="p" v-slot:title="">

支持 Markdown、YML 和 JSON 文件的可视化编辑器

</template>
</u-page-feature>

<u-page-feature icon="i-simple-icons-git">
<template unwrap="p" v-slot:title="">

直接在您的 Git 代码托管服务发布更改

</template>
</u-page-feature>
</template>
</u-page-section>

<u-page-section>
<div className="hidden,md:block">
<u-color-mode-image className="size-full,absolute,bottom-0,inset-0,z-[-1]" dark="/home/cta-dark.svg" light="/home/cta-light.svg">



</u-color-mode-image>
</div>

<template v-slot:title="">

为您的 Nuxt 项目添加基于 git 的 CMS。

</template>

<template v-slot:links="">
<u-button to="https://nuxt-content.zhcndoc.com/docs/getting-started/installation" label="开始阅读文档" trailing-icon="i-lucide-arrow-right">



</u-button>
</template>
</u-page-section>

## Resources for Agents

- [API catalog: every service document this site publishes](https://nuxt-content.zhcndoc.com/.well-known/api-catalog)
- [Sitemap (XML)](https://nuxt-content.zhcndoc.com/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://nuxt-content.zhcndoc.com/sitemap.md)
- [MCP server card: MCP endpoint at https://nuxt-content.zhcndoc.com/mcp](https://nuxt-content.zhcndoc.com/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://nuxt-content.zhcndoc.com/mcp)
- [llms.txt: index of the documentation for LLMs](https://nuxt-content.zhcndoc.com/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://nuxt-content.zhcndoc.com/llms-full.txt)
- [OpenAPI document: every route this site serves to agents](https://nuxt-content.zhcndoc.com/openapi.json)


## Sitemap

See the full [sitemap](https://nuxt-content.zhcndoc.com/sitemap.md) for all pages.