基于 git 的 Nuxt CMS。

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

---
title: 山岳网站
description: 一个关于世界上最具标志性山脉的网站。
---

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

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

<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>

基于文件的 CMS

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

查询构建器

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

SQLite 支持

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

Markdown 与 Vue 结合

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

代码高亮

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

可视化编辑器

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

导航生成

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

Prose 组件

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

全平台部署

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

内容管理所需的一切

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

Markdown 遇见 Vue 组件

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

使用 frontmatter 语法指定 props

使用 # 调用组件插槽

添加其他 HTML 属性

了解更多 MDC

珠穆朗玛峰。

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

content/index.md

---
title: 山岳网站
description: 一个关于世界上最具标志性山脉的网站。
---

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

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

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>

支持类型安全的查询

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

为相似内容文件创建集合

为集合 frontmatter 定义 schema

在 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>

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()
      })
    })
  }
})

让任何人编辑您的网站

试用 Nuxt Studio

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

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

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

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

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

开始阅读文档