您正在阅读 Nuxt Content V1 文档。阅读最新版本

入门

编写内容

了解如何编写您的内容，支持 Markdown、YAML、CSV 和 JSON。

首先，在您的项目中创建一个 content/ 目录

content/
  articles/
    article-1.md
    article-2.md
  home.md

此模块将解析 .md、.yaml、.yml、.csv、.json、.json5、.xml 文件并生成以下属性

  • dir
  • path
  • slug
  • extension（例如：.md）
  • createdAt
  • updatedAt

createdAt 和 updatedAt 属性基于文件的实际创建和更新日期时间，但您可以通过定义自己的 createdAt 和 updatedAt 值来覆盖它们。这在您迁移过去的博客文章时尤其有用，因为 createdAt 可能在几个月或几年前。

Markdown

此模块将您的 .md 文件转换为 JSON AST 树结构，存储在 body 变量中。

请确保使用 <nuxt-content> 组件显示 Markdown 内容的 body，请参见 显示内容。

您可以查看 基本语法指南，以帮助您掌握 Markdown

前置物料

您可以将 YAML 前置物料块添加到您的 Markdown 文件中。前置物料必须是文件中的第一项，并且必须采用在三条虚线之间设置的有效 YAML 的形式。这是一个基本示例

---
title: Introduction
description: Learn how to use @nuxt/content.
---

这些变量将注入文档

{
  body: Object
  excerpt: Object
  title: "Introduction"
  description: "Learn how to use @nuxt/content."
  dir: "/"
  extension: ".md"
  path: "/index"
  slug: "index"
  toc: Array
  createdAt: DateTime
  updatedAt: DateTime
}

摘录

可以使用 <!--more--> 作为分隔符从内容中提取内容摘录或摘要。

---
title: Introduction
---

Learn how to use @nuxt/content.
<!--more-->
Full amount of content beyond the more divider.

Description 属性将包含摘录内容，除非在 Front Matter props 中定义。

请注意输入 <!--more--> 的确切内容；即，全部小写，并且没有空格。

示例变量将注入文档

{
  body: Object
  title: "Introduction"
  description: "Learn how to use @nuxt/content."
  dir: "/"
  excerpt: Object
  extension: ".md"
  path: "/index"
  slug: "index"
  toc: Array
  createdAt: DateTime
  updatedAt: DateTime
}

标题

此模块会自动为每个标题添加一个 id 和一个 link。

假设我们有以下 Markdown 文件

home.md
# Lorem ipsum
## dolor—sit—amet
### consectetur &amp; adipisicing
#### elit
##### elit

它将转换为其 JSON AST 结构，并且通过使用 nuxt-content 组件，它将呈现类似于以下内容的 HTML

<h1 id="lorem-ipsum-"><a href="#lorem-ipsum-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Lorem ipsum</h1>
<h2 id="dolorsitamet"><a href="#dolorsitamet" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>dolor—sit—amet</h2>
<h3 id="consectetur--adipisicing"><a href="#consectetur--adipisicing" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>consectetur &#x26; adipisicing</h3>
<h4 id="elit"><a href="#elit" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>elit</h4>
<h5 id="elit-1"><a href="#elit-1" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>elit</h5>

标题中的链接为空，因此隐藏，因此您可以自行设置它们的样式。例如，尝试将鼠标悬停在这些文档中的某个标题上。

链接

链接将转换为添加有效的 target 和 rel 属性，使用 remark-external-links。您可以查看 此处以了解如何配置此插件。

相对链接也会自动转换为 nuxt-link，以通过智能预取在页面组件之间提供导航，从而提高性能。

以下是如何使用外部、相对、Markdown 和 HTML 链接的示例

---
title: Home
---

## Links

<nuxt-link to="/articles">Nuxt Link to Blog</nuxt-link>

<a href="/articles">Html Link to Blog</a>

[Markdown Link to Blog](/articles)

<a href="https://v2.nuxt.com">External link html</a>

[External Link markdown](https://v2.nuxt.com)

脚注

此模块支持使用 remark-footnotes 的扩展 Markdown 语法用于脚注。您可以查看 此处以了解如何配置此插件。

以下是如何使用脚注的示例

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

您可以查看 扩展语法指南，以了解有关脚注的更多信息。

代码块

此模块会自动包装代码块并应用 PrismJS 类（请参见 语法突出显示）。

Markdown 中的代码块包装在 3 个反引号内。您可以选择定义代码块的语言以启用特定语法突出显示。

最初，Markdown 不支持文件名或突出显示代码块内的特定行。但是，此模块使用自己的自定义语法允许这样做

  • 在花括号内突出显示的行号
  • 方括号内的文件名
```js{1,3-5}[server.js]
const http = require('http')
const bodyParser = require('body-parser')

http.createServer((req, res) => {
  bodyParser.parse(req, (error, body) => {
    res.end(body)
  })
}).listen(3000)
```

使用 nuxt-content 组件呈现后，它应该看起来像这样（还没有文件名）

server.js
<div class="nuxt-content-highlight">
  <span class="filename">server.js</span>
  <pre class="language-js" data-line="1,3-5">
    <code>
      ...
    </code>
  </pre>
</div>

行号添加到 pre 标签的 data-line 属性中。

查看 此评论，了解如何呈现 Prism 行号。

文件名将转换为具有 filename 类的跨度。您可以自行设置样式。

查看 此文档的 main.css 文件，以了解有关设置文件名样式的示例。

语法突出显示

默认情况下，它支持使用 PrismJS 进行代码突出显示，并将选项中定义的主题注入您的 Nuxt.js 应用程序，请参见 配置。

HTML

您可以在 Markdown 中编写 HTML

home.md
---
title: Home
---

## HTML

<p><span class="note">A mix of <em>Markdown</em> and <em>HTML</em>.</span></p>

请注意，将 Markdown 放置在组件中时，它前面和后面必须有一行空行，否则整个块将被视为自定义 HTML。

这不起作用

<div class="note">
  *Markdown* and <em>HTML</em>.
</div>

但这是可以的

<div class="note">

  *Markdown* and <em>HTML</em>.

</div>

这也行:

<span class="note">*Markdown* and <em>HTML</em>.</span>

Vue 组件

您可以使用全局 Vue 组件，也可以在显示 Markdown 的页面中进行本地注册。

本地注册的组件和开发中的实时编辑存在一个问题，自 v1.5.0 以来，您可以通过设置 liveEdit: false 来禁用它（请参见 配置）。

由于 @nuxt/content 假定所有 Markdown 都由作者提供（而不是通过第三方用户提交），因此源代码将完全处理（包括标签），并有一些来自 rehype-raw 的注意事项

  1. 您需要通过连字符大小写命名来引用您的组件及其道具
Use <my-component :my-prop="myValue"> instead of <MyComponent :myProp="myValue">
  1. 您不能使用自闭合标签，即 这不起作用
<my-component/>

但 这是可以的

<my-component></my-component>

示例

假设我们有一个名为 ExampleMultiselect.vue 的 Vue 组件

home.md
Please choose a *framework*:

<example-multiselect :options="['Vue', 'React', 'Angular', 'Svelte']"></example-multiselect>

结果

请选择一个 框架
在 content v2 文档中不起作用！

您也可以在您的前置物料中定义组件的选项

home.md
---
multiselectOptions:
  - VuePress
  - Gridsome
  - Nuxt
---

<example-multiselect :options="multiselectOptions"></example-multiselect>
在 content v2 文档中不起作用！

这些组件将使用 <nuxt-content> 组件呈现，请参见 显示内容。

模板

您可以使用 template 标签在您的 Vue.js 组件中进行内容分发

<my-component>
  <template #named-slot>
    <p>Named slot content.</p>
  </template>
</my-component>

但是，您不能呈现 动态内容，也不能使用 插槽道具。即 这不起作用

<my-component>
  <template #named-slot="slotProps">
    <p>{{ slotProps.someProperty }}</p>
  </template>
</my-component>

全局组件

自 v1.4.0 和 Nuxt v2.13.0 以来，您现在可以将组件放在 components/global/ 目录中，这样您就不必在页面中导入它们。

components/
  global/
    Hello.vue
content/
  home.md

然后在 content/home.md 中，您可以使用 <hello></hello> 组件，而无需担心在页面中导入它。

目录

获取文档时，我们可以访问 toc 属性，它是一个包含所有标题的数组。每个标题都有一个 id，以便可以链接到它，一个深度，它代表它是什么类型的标题。只有 h2 和 h3 标题用于 toc。还有一个 text 属性，它是标题的文本。

{
  "toc": [{
    "id": "welcome",
    "depth": 2,
    "text": "Welcome!"
  }]
}

查看此页面右侧的示例。

查看 此代码片段，了解如何在您的应用程序中实现目录

示例

一个文件 content/home.md

---
title: Home
---

## Welcome!

将被转换为

{
  "dir": "/",
  "slug": "home",
  "path": "/home",
  "extension": ".md",
  "title": "Home",
  "toc": [
    {
      "id": "welcome",
      "depth": 2,
      "text": "Welcome!"
    }
  ],
  "body": {
    "type": "root",
    "children": [
      {
        "type": "element",
        "tag": "h2",
        "props": {
          "id": "welcome"
        },
        "children": [
          {
            "type": "element",
            "tag": "a",
            "props": {
              "ariaHidden": "true",
              "href": "#welcome",
              "tabIndex": -1
            },
            "children": [
              {
                "type": "element",
                "tag": "span",
                "props": {
                  "className": [
                    "icon",
                    "icon-link"
                  ]
                },
                "children": []
              }
            ]
          },
          {
            "type": "text",
            "value": "Welcome!"
          }
        ]
      }
    ]
  }
}

我们在内部添加一个 text 键，它包含将用于 搜索 或 扩展 的 Markdown 正文。

JSON / JSON5

定义的数据将注入文档。

不会生成正文。

数组

v0.10.0+

您现在可以在您的 .json 文件中使用数组。对象将被扁平化并插入集合中。您可以像以前一样 获取 您的内容。

由于 slug 默认情况下从路径获取，并且在这种情况下不存在，因此您必须在对象中定义它才能使此功能正常工作。

查看我们包含文章和作者的 示例。

示例

一个文件 content/home.json

{
  "title": "Home",
  "description": "Welcome!"
}

将被转换为

{
  "dir": "/",
  "slug": "home",
  "path": "/home",
  "extension": ".json",
  "title": "Home",
  "description": "Welcome!"
}

一个文件 content/authors.json

[
  {
    "name": "Sébastien Chopin",
    "slug": "atinux"
  },
  {
    "name": "Krutie Patel",
    "slug": "krutiepatel"
  },
  {
    "name": "Sergey Bedritsky",
    "slug": "sergeybedritsky"
  }
]

将被转换为

[
  {
    "name": "Sébastien Chopin",
    "slug": "atinux",
    "dir": "/authors",
    "path": "/authors/atinux",
    "extension": ".json"
  },
  {
    "name": "Krutie Patel",
    "slug": "krutiepatel",
    "dir": "/authors",
    "path": "/authors/krutiepatel",
    "extension": ".json"
  },
  {
    "name": "Sergey Bedritsky",
    "slug": "sergeybedritsky",
    "dir": "/authors",
    "path": "/authors/sergeybedritsky",
    "extension": ".json"
  }
]

CSV

行将分配给 body 变量。

示例

一个文件 content/home.csv

title, description
Home, Welcome!

将被转换为

{
  "dir": "/",
  "slug": "home",
  "path": "/home",
  "extension": ".csv",
  "body": [
    {
      "title": "Home",
      "description": "Welcome!"
    }
  ]
}

XML

将解析 XML

示例

一个文件 content/home.xml

<xml>
  <item prop="abc">
    <title>Title</title>
    <description>Hello World</description>
  </item>
</xml>

将被转换为

{
  "dir": "/",
  "slug": "home",
  "path": "/home",
  "extension": ".xml",
  "body": {
    "xml": {
      "item": [
        {
          "$": {
            "prop": "abc"
          },
          "title": [
            "Title"
          ],
          "description": [
            "Hello World"
          ]
      }
    ]
  }
}

YAML / YML

定义的数据将注入文档。

不会生成正文。

示例

一个文件 content/home.yaml

title: Home
description: Welcome!

将被转换为

{
  "dir": "/",
  "slug": "home",
  "path": "/home",
  "extension": ".yaml",
  "title": "Home",
  "description": "Welcome!"
}

安装

在您的 Nuxt 项目中仅需两步即可安装 @nuxt/content。

获取内容

了解如何在您的 Nuxt.js 项目中使用 $content 获取静态内容。