使用Nuxt Content：处理远程Markdown文件

本文讨论如何使用Nuxt Content开始创建一个最小的博客，并如何处理远程Markdown文件。

第一部分涵盖了如何使用Nuxt Content设置项目，第二部分涵盖了处理Markdown文件。如果您已经熟悉设置步骤，请随时跳过第一部分。

获取开始 #

什么是Nuxt？ #

Nuxt (opens new window)是一个用于构建高性能网站和全栈应用的开源框架，使用Vue.js (opens new window)。它提供性能和SEO优势，并为Vue应用添加全栈功能。

Nuxt是一个令人感兴趣的框架，部分原因是它强大的模块生态系统。流行的UI库、无头CMS工具和数据库可以轻松集成，只需一行代码。除了其他第三方模块外，Nuxt Image (opens new window)、Nuxt Content (opens new window)和Nuxt UI (opens new window)是Nuxt团队开发的一些官方模块。

什么是Nuxt Content？ #

Nuxt Content是一个基于文件的CMS，为Vue开发人员更轻松地处理内容。使用此模块，可以仅使用Markdown文件创建完全内容驱动的网站。它为Markdown中的代码片段提供语法突出显示，在内容中提供交互式Vue组件和不同实用工具，包括用于查询内容的类似MongoDB的API。

Nuxt团队还提供了Nuxt Content的专业版本Nuxt Studio，具有协作编辑、实时预览和用于处理媒体资产的UI等功能。

设置 #

要开始一个全新的Nuxt Content项目，可以在浏览器中使用nuxt.new (opens new window)进行，或者在本地运行以下命令：

npx nuxi@latest init -t content my-minimal-blog

要将模块集成到现有项目中，我们需要首先安装它，并将其添加到nuxt.config.js中的modules属性：

npm install @nuxt/content

export default defineNuxtConfig({
  modules: ["@nuxt/content"]
});

基础知识 #

我们可以在nuxt.config.js中配置多个内容源。默认情况下，所有内容文件都存储在content/文件夹中，并且可以是Markdown、YAML、JSON或CSV格式。

让我们开始创建一些内容，并确保我们设置了一个通用路由。

如果我们从头开始设置Nuxt Content项目，通用路由应该已经默认创建，初始状态如下：

<!-- pages/[...slug].vue -->
<template>
  <main>
    <ContentDoc />
  </main>
</template>

<ContentDoc>是一个内置组件，负责获取和呈现单个内容（比如博客文章）的所有功能。

接下来，让我们创建一些Markdown文件并添加一些内容：

content/Nuxt.md

---
title: Nuxt
description: 什么是Nuxt？
---

# 什么是Nuxt？

Nuxt是一个开源框架，使Web开发直观而强大。

[了解更多](https://nuxt.com)

content/Nuxt Content.md

---
title: Nuxt Content
description: 什么是Nuxt Content？
---

我们还可以在我们的Markdown中访问前置数据。

# {{ $doc.description }}

Nuxt Content使Vue开发人员更轻松处理内容。

[什么是Nuxt？](/nuxt)

Nuxt Content将自动处理我们的内容文件夹，并为每个内容生成基于文件的路由。位于content/Nuxt.md的文件将在/nuxt处可用，content/Nuxt Content.md在/nuxt-content处可用，依此类推。

这就是我们使用Nuxt Content构建的最小但完全功能的博客。

远程内容 #

本节将介绍如何配置Nuxt Content以处理远程内容，特别是来自GitHub存储库的Markdown文件。

Nuxt Content提供了一些有用的配置选项，用于获取、解析和呈现内容。我们可以配置Markdown内容以拥有目录和标题的锚链接。我们可以添加插件来自定义解析行为。我们可以为代码片段自定义语法突出显示。我们甚至可以设置不同的内容源。

可以使用nuxt.config.js文件中的content属性设置与内容相关的配置。

// nuxt.config.js
export default defineNuxtConfig({
    content: {
        // 自定义配置
    }
});

默认情况下，Nuxt Content配置为查找content/目录中的本地文件。但是，使用sources选项，我们可以告诉模块查找不同位置的文件，可以是其他本地文件或托管在远程服务器上的文件。虽然不推荐，但我们也可以覆盖本地文件的默认内容位置。

export default defineNuxtConfig({
    content: {
        sources: {
            blog: {
                driver: 'fs',
                prefix: '/blog',
                base: resolve(__dirname, 'articles')
            },
            github: {
                driver: 'github',
                prefix: '/notes',
                repo: "oneminch/notes",
                branch: "main",
                dir: "Glossary"
            },
        }
    }
});

在上面的代码片段中，我们为内容添加了两个新源：一个是本地源，一个是远程（GitHub）源。在我们的源对象中，driver选项指示添加的源的类型：

fs驱动程序代表文件系统，并指示我们的内容源是项目本地的。
github驱动程序允许我们将来自远程GitHub存储库的文件映射到我们的本地项目。

让我们看看上面的github配置是如何运作的。

Nuxt Content将解析位于GitHub存储库oneminch/notes (opens new window)下Glossary文件夹（dir属性给出）中的所有Markdown文件，并使所有文件在/notes路径下可用（由prefix属性指示）。

例如，在存储库中，我有标题为Hoisting.md和Server-Side Rendering.md的Markdown文件在Glossary文件夹中。根据我们的配置，这些文件的内容将分别在/notes/hoisting和/notes/server-side-rendering路径下可用，就像处理本地内容一样。

我们还可以在需要时在我们的代码中使用我们的前缀。路径获取数据。

使用 queryContent() 组合方式：

<script setup>
const { data: notes } = await useLazyAsyncData("my-notes", () =>
    queryContent("/notes").find()
);
</script>

使用 <ContentList> 组件：

<template>
    <ContentList path="/notes">
        <template #default="{ list }">
            <a v-for="note in list" :key="note._path" :href="note._path">
             {{ note.title }}
            </a>
        </template>
        <template #not-found>
            <p>未找到笔记。</p>
        </template>
    </ContentList>
</template>

需要注意的一点是，由于 Nuxt Content 基本上每次获取内容时都会向 GitHub 发送 API 调用，我们的请求可能会受到 GitHub 的速率限制。因此，通常建议根据 unstorage 配置选项 (opens new window) 向配置中添加 GitHub API 令牌。

export default defineNuxtConfig({
    content: {
        sources: {
            github: {
                /* ... */
                token: process.env.GH_TOKEN
            }
        }
    }
})