简介

启用模式

现有项目

在 nuxt.config 中添加 documentDriven 选项

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  content: {
    documentDriven: true
  }
})

新项目

启用文档驱动模式开始一个新项目

npx nuxi init doc-driven-app -t doc-driven

您也可以使用对象来配置模式的行为，查看 配置部分。

通配符页面

文档驱动模式附带一个预配置的 通配符路由。

这个 注入的 Vue 页面 对于拥有最小的项目结构很有用

my-project/
  content/
    index.md
  nuxt.config.ts
  package.json
  tsconfig.json

它使用 useContentHead() 可组合函数 在页面元数据和 OpenGraph 标签之间建立直接绑定，无需配置即可提供有效的 SEO。

页面插槽

该页面附带 2 个插槽组件，您可以在项目级别替换它们。

为此，您只需要在项目的 components/ 目录中创建一个与之同名的组件。

• <DocumentDrivenNotFound />

当未找到当前 URL 的页面时，将显示此组件。

<template>
  <h1>Page not found</h1>
</template>

• <DocumentDrivenEmpty />

当当前页面没有内容但页面存在时，将显示此组件。

<template>
  <h1>This page is empty</h1>
</template>

布局绑定

由于页面数据事先可用，因此可以在页面前置内容中定义布局

---
layout: article
---

This page will use the article layout!

默认情况下，如果未指定，它将使用 default 布局。

如果要默认使用其他布局，请在 nuxt.config 中使用 layoutFallbacks 选项

export default defineNuxtConfig({
  content: {
    documentDriven: {
      layoutFallbacks: ['theme'],
    }
  }
})

此选项将在 globals 中搜索 theme 键，然后在该对象中搜索 layout 键。如果找到，则使用该 layout 键作为回退。

全局变量

查询是从 路由中间件 中进行的，并在页面渲染之前解决。

这使您能够访问 useContent() 可组合函数 **在应用程序中的任何位置** 使用以下变量

• 页面
• 环绕
• 导航
• 全局变量

<script setup lang="ts">
const { navigation, page, surround, globals } = useContent()

console.log(page.value)
</script>

扩展全局变量

此模式为您提供了一种方便的方式来在应用程序中全局访问文件数据。

在您的 nuxt.config 中使用 documentDriven.globals 键来指定查询

export default defineNuxtConfig({
  content: {
    documentDriven: {
      globals: {
        theme: {
          where: [
            {
              _id: 'content:_theme.yml'
            }
          ],
          without: ['_']
        }
      }
    }
  }
})

此配置将在 content/ 目录中搜索 _theme.yml 文件。

如果找到，则可以通过 useContent().globals 访问 theme 对象

const { theme } = useContent().globals

这些文件的所有更改将在开发过程中自动反映在应用程序中。

禁用或控制页面数据

使用页面中的特殊 documentDriven 元数据，您可以为特定路由禁用此功能或控制其行为。

禁用文档驱动

将 documentDriven 设置为 false 将禁用文档驱动。这意味着从 useContent() 公开引用的内容将为 undefined。

<script setup lang="ts">
definePageMeta({
  documentDriven: false
})
</script>

控制数据

要控制文档驱动数据，您可以将对象传递给 documentDriven 元数据键并启用/禁用其特定部分。

<script setup lang="ts">
definePageMeta({
  documentDriven: {
    page: true, // Keep page fetching enabled
    surround: false // Disable surround fetching
  }
})
</script>

配置内容

您可以将自定义路径/查询传递给 page 和 surround 选项来配置文档驱动内容。

<script setup lang="ts">
definePageMeta({
  documentDriven: {
    // Simple Path
    page: '/foo',
    // Rich Query
    surround: {
      _path: '/foo/bar'
    }
  }
})
</script>

<script setup lang="ts">
definePageMeta({
  documentDriven: {
    page: {
      _path: '/foo/bar'
    },
    // surround will use `{ _path: '/foo/bar' }`
  }
})
</script>