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

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

    基于文件的 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 属性

珠穆朗玛峰。

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

类型安全 查询

使用集合定义内容结构,并通过 schema 验证实现完全的类型安全查询。

    为相似内容文件创建集合
    为集合 frontmatter 定义 schema
    在 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>

任何人编辑 您的网站

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

    拖拽式 Markdown 可视化编辑器
    为 YML 和 JSON 文件生成表单
    邀请编辑者通过 Google 登录并发布更改

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