您正在阅读 Nuxt 内容 V1 文档。阅读最新版本
入门
显示内容
您可以直接在模板中使用 `<nuxt-content>` 组件来显示您的 Markdown。
组件
页面主体
您可以直接在模板中使用 <nuxt-content> 组件来显示页面主体
<template>
<article>
<h1>{{ page.title }}</h1>
<nuxt-content :document="page" />
</article>
</template>
<script>
export default {
async asyncData ({ $content }) {
const page = await $content('home').fetch()
return {
page
}
}
}
</script>
道具
- document
- 类型:
object 必需
- 类型:
- tag
- 类型:
string
- 类型:
了解有关您可以在 markdown 文件中编写内容的更多信息，请参阅 编写内容 部分。
摘要
如果您正在使用 摘要 功能，您可以使用以下模型显示摘要内容
<template>
<article>
<h1>{{ page.title }}</h1>
<nuxt-content :document="{ body: page.excerpt }" />
</article>
</template>
<script>
export default {
async asyncData ({ $content }) {
const page = await $content('home').fetch()
return {
page
}
}
}
</script>
根元素
<nuxt-content> 组件默认情况下将添加一个 div 元素作为内容的根。您可以通过设置 tag 道具来更改此设置。以下示例将使用 article 作为根元素。
<nuxt-content :document="doc" tag="article">
样式
根据您用于设计应用程序的方式，您可能需要编写一些样式才能正确显示 markdown。
<nuxt-content> 组件将自动添加一个 .nuxt-content 类。您可以使用它来自定义您的样式
.nuxt-content h1 {
/* my custom h1 style */
}
您可以在主题文档中找到一个示例 main.css 文件。您还可以查看 TailwindCSS Typography 插件 来像我们在
@nuxt/content-theme-docs中一样为您的 markdown 内容设置样式。
实时编辑
在版本 >= v1.4.0 中可用
在开发中，您可以通过双击 <nuxt-content> 组件来编辑您的内容。一个文本区域将允许您编辑当前文件的內容，并将保存到文件系统。