基于 Git 的
Nuxt 项目内容管理系统。

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

---
color: neutral
label: 打开可视化编辑器
size: xl
target: _blank
to: https://nuxt.studio
variant: subtle
---

::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、插槽和嵌套组件。

代码高亮

结合 Shiki 集成支持 VS Code 主题，在网站上显示漂亮的代码块。

可视化编辑器

通过我们的可视化编辑器 Nuxt Studio，让团队成员轻松编辑 Nuxt Content 项目。

导航生成

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

文章组件

使用 Vue 组件自定义 HTML 排版标签，让内容风格统一。

部署无处不在

Nuxt Content 兼容所有托管服务，支持静态、服务端、无服务器和边缘部署。

内容管理所需的一切

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

Markdown 遇见 Vue 组件

我们创造了 MDC 语法，让你可以在 Markdown 文件中使用带有 props 和插槽的 Vue 组件。

用 frontmatter 语法指定 props

使用 # 来定义组件插槽

添加任意其他 HTML 属性

了解更多关于 MDC

珠穆朗玛峰

珠穆朗玛峰是世界上最高的山，海拔 8,848 米。

content/index.md

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

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

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

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

让任何人编辑您的网站

通过 Studio 编辑您的 Nuxt Content 网站——我们的 CMS 平台，提供类似 Notion 的 Markdown 编辑器和为 YAML 与 JSON 文件生成的表单。支持实时预览和在线协作。

拖拽式 Markdown 可视化编辑器

为 YML 和 JSON 文件生成表单

邀请编辑者通过 Google 登录并发布更改

探索 Studio

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

阅读文档打开 Studio

基于 Git 的 Nuxt 项目内容管理系统。