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

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

代码高亮

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

可视化编辑器

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

导航生成

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

Prose 组件

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

全平台部署

Nuxt Content 支持所有主机提供商，包含静态、服务器、无服务器及边缘计算。

内容管理所需的一切

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

Markdown 遇见 Vue 组件

我们创造了 MDC 语法，让您能在 Markdown 文件中使用带有 props 和插槽的 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。

开始阅读文档

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