首页
/ 正文

nuxt content（手把手讲解）

更新时间: 2025-03-21 21:23:08

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在现代前端开发中，内容管理系统（CMS）与静态站点生成（SSG）的结合日益成为开发者关注的焦点。Nuxt Content 是 Nuxt 3 框架内置的内容模块，它以简单、灵活的方式将静态内容管理无缝集成到项目中。无论是构建博客、文档站点还是企业官网，开发者都能通过 Markdown 文件管理内容，并借助 Vue 的响应式特性实现动态交互。本文将从零开始，逐步讲解 Nuxt Content 的核心概念、配置方法和实际应用场景，帮助读者快速掌握这一工具的核心能力。

核心概念：内容即代码

Nuxt Content 的设计理念是“内容即代码”（Content as Code）。它允许开发者将内容存储为 Markdown 文件，并通过 Vue 组件和 Composition API 进行渲染，从而打破传统 CMS 的复杂配置流程。以下是几个关键概念：

1. 内容仓库（Content Repository）

所有 Markdown 文件都存放在项目根目录的 content/ 文件夹中，形成一个“内容仓库”。每个 Markdown 文件代表一个独立内容单元，例如文章、产品说明或案例研究。

比喻：可以想象这个仓库像一个图书馆，每个文件都是书架上的书籍，开发者通过 API 接口“检索”所需内容。

2. Frontmatter 元数据

在 Markdown 文件顶部，开发者可以添加 YAML 格式的 Frontmatter，定义文章标题、日期、分类等元数据。例如：

---
title: "我的第一篇博客"
date: 2023-10-01
tags: ["技术", "教程"]
---

这里是文章的详细内容...

这些元数据可以被程序直接读取，用于分类、排序或动态生成页面。

3. 动态内容查询

通过 useContent 或 useAsyncContent 组合式 API，开发者可以查询内容仓库中的文件。例如，获取所有文章并按日期排序：

const { data } = await useAsyncContent("articles", {
  sort: ["date:desc"],
});

快速上手：从安装到展示内容

步骤 1：安装 Nuxt 3 和配置 Content 模块

新建一个 Nuxt 3 项目后，在 nuxt.config.ts 中启用 Content 模块：

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

步骤 2：创建内容文件

在项目根目录下新建 content/blog/ 文件夹，并添加一个示例文章 hello-world.md：

---
title: "Hello Nuxt Content"
date: 2023-10-01
---

欢迎来到 Nuxt Content 的世界！在这里，你可以用 Markdown 编写内容，再通过 Vue 组件灵活展示。

步骤 3：展示内容的 Vue 组件

在页面组件中使用 useContent 获取内容并渲染：

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <div v-html="article._rawValue"></div>
  </div>
</template>

<script setup>
const { data: article } = await useAsyncContent("blog/hello-world");
</script>

这里通过 _rawValue 属性直接渲染 Markdown 转换后的 HTML。

进阶技巧：内容查询与动态路由

1. 动态路由与内容关联

通过 Nuxt 的 pages/ 目录结构，可以创建动态路由来展示不同文章。例如，在 pages/blog/_slug.vue 中：

<template>
  <div v-if="article">
    <h1>{{ article.title }}</h1>
    <p>发布于：{{ article.date }}</p>
    <div v-html="article._rawValue"></div>
  </div>
</template>

<script setup>
const { slug } = useRoute().params;
const { data: article } = await useAsyncContent(`blog/${slug}`);
</script>

这样访问 /blog/hello-world 将直接展示对应文章。

2. 复杂查询与过滤

假设需要展示分类为“技术”的文章，可以编写以下查询：

const { data } = await useAsyncContent("articles", {
  where: { tags: { $containsSome: ["技术"] } },
  sort: ["date:desc"],
});

这里利用了 where 过滤器和 $containsSome 运算符，实现动态筛选。

实际案例：搭建一个个人博客

案例需求

展示文章列表
按分类筛选文章
文章详情页
归档页面

实现步骤

1. 构建文章列表页

在 pages/blog/index.vue 中使用 useContent 获取所有文章：

<template>
  <div>
    <h2>最新文章</h2>
    <ul>
      <li v-for="article in articles" :key="article._id">
        <NuxtLink :to="`/blog/${article.slug.current}`">
          {{ article.title }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script setup>
const { data: articles } = await useAsyncContent("blog", {
  deep: true,
  sort: ["date:desc"],
});
</script>

通过 deep: true 参数递归查询子目录内容。

2. 添加分类筛选功能

在布局组件中添加筛选按钮，并通过 URL 参数传递分类：

<template>
  <div>
    <button @click="filterBy('技术')">技术</button>
    <button @click="filterBy('生活')">生活</button>
  </div>
</template>

<script setup>
const filterBy = (tag) => {
  navigateTo({
    path: "/blog",
    query: { tag },
  });
};
</script>

在文章列表页中读取查询参数并过滤：

const query = useRoute().query;
const filter = query.tag ? { tags: { $containsSome: [query.tag] } } : {};

const { data: articles } = await useAsyncContent("blog", {
  where: filter,
  sort: ["date:desc"],
});

3. 实现文章归档页面

归档页按年份和月份分组显示文章：

<template>
  <div>
    <div v-for="year in years" :key="year">
      <h3>{{ year }}</h3>
      <div v-for="month in months[year]" :key="month">
        <h4>{{ month }}</h4>
        <ul>
          <li v-for="article in articlesByMonth[year][month]" :key="article._id">
            {{ article.title }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
const { data } = await useAsyncContent("blog", {
  sort: ["date:desc"],
});
const articles = data.value || [];

const years = Array.from(new Set(articles.map((a) => a.date.slice(0, 4))));
const months = {};
const articlesByMonth = {};

// 这里省略具体分组逻辑，可通过日期字符串处理实现
</script>

性能优化与最佳实践

1. 缓存与预渲染

通过 prerender: true 在构建时预渲染内容页面，提升加载速度：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@nuxt/content"],
  content: {
    preload: true,
  },
});

2. 避免过度查询

使用 only 参数限制返回字段，减少传输数据量：

const { data } = await useAsyncContent("blog", {
  only: ["title", "date"],
});

3. 维护内容结构

建议在 content/ 目录下按功能划分子目录（如 blog/, docs/, pages/），并使用 .gitkeep 文件避免空文件夹被忽略。

常见问题与解决方案

Q1: 如何在 Markdown 中插入代码块？

使用三重反引号包裹代码，并指定语言：

```javascript
console.log("Hello Nuxt Content!");


### Q2: 内容更新后页面未重新构建？  
确保在 `nuxt.config.ts` 中配置了 `content: { autoImport: true }`，并检查文件名是否符合 `kebab-case` 命名规范。  

### Q3: 如何实现富文本编辑器支持？  
通过 `@nuxtjs/tinymce` 或 `vue-quill-editor` 等库集成编辑器，并将内容保存为 Markdown 格式。  

---

## 结论  
**Nuxt Content** 通过将静态内容管理与 Vue 开发流程深度整合，为开发者提供了一种高效、直观的内容构建方式。从基础的 Markdown 文件管理，到动态查询、路由绑定和性能优化，它降低了前端开发中内容系统的复杂度。无论是个人博客还是企业级文档站点，开发者都能通过其灵活的 API 快速实现需求。  

未来，随着 Nuxt 3 生态的持续发展，**Nuxt Content** 将在内容版本控制、多语言支持和动态内容更新等领域带来更多可能性。现在，不妨尝试用它搭建自己的项目，体验“内容即代码”带来的开发乐趣！

nuxt content（手把手讲解）

核心概念：内容即代码

1. 内容仓库（Content Repository）

2. Frontmatter 元数据

3. 动态内容查询

快速上手：从安装到展示内容

步骤 1：安装 Nuxt 3 和配置 Content 模块

步骤 2：创建内容文件

步骤 3：展示内容的 Vue 组件

进阶技巧：内容查询与动态路由

1. 动态路由与内容关联

2. 复杂查询与过滤

实际案例：搭建一个个人博客

案例需求

实现步骤

1. 构建文章列表页

2. 添加分类筛选功能

3. 实现文章归档页面

性能优化与最佳实践

1. 缓存与预渲染

2. 避免过度查询

3. 维护内容结构

常见问题与解决方案

Q1: 如何在 Markdown 中插入代码块？

最新发布

Cursor @ 符号（千字长文）

POP3 协议（一文讲透）

IMAP 协议（保姆级教程）

RDP 协议（建议收藏）

SFTP 协议（保姆级教程）

UDP 协议（长文解析）

SSL 协议（手把手讲解）

TLS 协议（超详细）

ARP 协议（保姆级教程）

RARP 协议（建议收藏）