Nuxt.js 如何使用 @nuxt/content 模块？

推荐答案

npm install @nuxt/content

在 nuxt.config.js 中配置：

export default {
  modules: [
    '@nuxt/content'
  ],
  content: {
    // 配置选项
  }
}

在页面中使用：

export default {
  async asyncData({ $content }) {
    const articles = await $content('articles').fetch()
    return { articles }
  }
}

本题详细解读

1. 安装 @nuxt/content 模块

首先，你需要通过 npm 或 yarn 安装 @nuxt/content 模块：

npm install @nuxt/content

或者

yarn add @nuxt/content

2. 配置 nuxt.config.js

安装完成后，你需要在 nuxt.config.js 文件中添加 @nuxt/content 模块，并可以根据需要进行配置：

export default {
  modules: [
    '@nuxt/content'
  ],
  content: {
    // 配置选项
  }
}

3. 使用 @nuxt/content 模块

在页面或组件中，你可以通过 $content 方法来访问和操作内容。例如，获取所有文章：

export default {
  async asyncData({ $content }) {
    const articles = await $content('articles').fetch()
    return { articles }
  }
}

4. 内容目录结构

默认情况下，@nuxt/content 会从 content/ 目录中读取内容文件。你可以在这个目录下创建 Markdown、JSON、YAML 等格式的文件。

例如，content/articles/hello-world.md 文件可以通过以下方式访问：

const article = await $content('articles', 'hello-world').fetch()

5. 高级用法

你还可以使用 @nuxt/content 提供的其他功能，如全文搜索、内容过滤、排序等：

const articles = await $content('articles')
  .search('Nuxt.js')
  .sortBy('createdAt', 'asc')
  .fetch()

通过这些步骤，你可以在 Nuxt.js 项目中轻松使用 @nuxt/content 模块来管理和展示内容。