记录一下使用 Nuxt Content 重构 hexo 个人博客的过程。

前言

之前博客使用的是 hexo + hexo-theme-fluid 主题的配置， 非常简单方便，并且主题自带了博客的各种拓展（评论、访问统计、文章搜索等）。 但作为一个爱折腾的人，想要给博客添加更多个性化的内容，奈何在 hexo 主题的原有基础上二次开发实在太复杂，不如直接动手写一个新架构的博客。

为什么选择 Nuxt Content

Vue Yes! Nuxt Yes!

开源社区里有相当多的内容驱动框架和构建工具，比如 Docusaurus 、 VitePress 等， 在几番考量后最终我选择了 Nuxt Content ，原因集中在下面几点：

• SSR，很快！
• Markdown 内容驱动，很简单！
• Vue 组件支持，很方便！
• TypeScript 语法，很现代！

心动不如行动，不如来体验一下使用 Nuxt Content 构建自己的博客吧。

从零开始的博客构建之旅

初始化 Nuxt Content 项目

使用官网提供的命令快速初始化项目。 my-blog 改为博客项目的目录名称。

npx nuxi@latest init my-blog -t content

然后就可以启动开发模式查看效果啦。

cd my-blog
npm run dev

添加博客依赖

在构建博客的过程中，我们还需要额外的依赖。比如 CSS 样式框架、图标、夜间模式等依赖的支持。 在这里列出我在 Nuxt Content 博客中安装的第三方依赖。

读者可以根据自身需要选择性地安装第三方依赖，之后使用 NPM 等包管理工具安装依赖。

npm install --save-dev \
  @nuxtjs/tailwindcss \
  postcss \
  sass \
  @nuxtjs/color-mode \
  @fortawesome/vue-fontawesome \
  @fortawesome/free-solid-svg-icons \
  @fortawesome/free-regular-svg-icons \
  @fancyapps/ui \
  feed \
  sitemap \
  tocbot

之后在 Nuxt 的配置文件 nuxt.config.{ts,js} 中配置安装的 Nuxt 模块。

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/content', '@nuxtjs/color-mode', '@nuxtjs/tailwindcss'],
  css: ['@fortawesome/fontawesome-svg-core/styles.css'],
  content: {
    experimental: {
      search: {
        ignoredTags: ['script', 'style'],
      },
    },
    highlight: {
      theme: {
        default: 'github-light',
        light: 'github-light',
        dark: 'github-dark',
      },
      preload: ['javascript', 'typescript', 'json', 'html', 'vue-html', 'shell', 'yaml'],
    },
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  colorMode: {
    classSuffix: '',
  },
});

至此就完成搭建博客的前期准备啦。

编写博客样式

在真正开始撰写文章之前，我们还需要先修改博客的样式。 由于 Nuxt Content 没有提供主题支持，用户需要手动编写博客样式。 如果对个性化样式要求不高，也可以直接使用 Nuxt 提供的 UI 库 Nuxt UI 。

这里说明以下 Nuxt 使用个性化样式的方式，首先我们需要在 Nuxt 应用的资源文件夹中创建一个新的样式表文件 assets/css/[name].{css,scss,sass} 。 之后在文件中添加自定义的样式内容。

::-webkit-scrollbar {
  @apply w-1.5 h-1.5;
}

::-webkit-scrollbar-corner{
  @apply bg-transparent;
}

// 更多用户自定义的样式...

然后在 Nuxt 的配置文件中使用对应的样式文件。

export default defineNuxtConfig({
  css: [
    '~/css/main.scss',
    // 其他样式文件...
  ],
  // 其他配置...
});

编写页面布局

针对博客包含的不同页面，我们可能需要编写不同的布局文件。 每个布局文件就是一个 Vue 组件，配合 Nuxt 的 路由管理 实现多页面布局。

一个基础的博客网站可能包含以下几个页面：

• 主页 - 用于展示最近的文章或者其他主要内容。
• 归档 - 用于展示所有历史文章。
• 分类 - 用于展示不同分类下的文章。
• 友链 - 用于展示博客的友情链接。
• 关于 - 用于展示博客站长的信息和其他内容。
• ......

通常对页面的样式没有硬性要求，但一般需要保证同一博客站点下不同页面的风格一致。 我在之前的 hexo 博客中使用的 hexo-theme-fluid 博客主题， 觉得比较好看所以在新的博客中大部分复刻了这个主题的风格样式。

编写博客功能

一个博客网站一般可以包含以下的几个功能：

• 搜索 - 搜索博客中的文章内容。
• RSS - 生成 RSS 订阅文件。
• 评论 - 运行访客对每篇文章进行评论留言。
• 访问量统计 - 统计博客页面的访问量。
• ......

个人博客一般以内容为主，博客功能可以在丰富博客内容后进行填充。

撰写博客文章

大部分的文章内容均以 Markdown 格式编写，均可以从原来的 hexo 博客内容中复制过来， 需要注意的是，之前在 hexo 博客文章中的自定义标签需要在 Nuxt Content 编写新的 Vue 组件。

Nuxt Content 提供了 Markdown 语法支持和 front-matter 拓展支持。如本篇文章：

---
title: 用 Nuxt Content 重构 hexo 个人博客
date: 2024-03-29 13:53:12
index_img: /images/refactor-blog-with-nuxt-content/nuxt-content.png
category: 技术
top: 0
tags:
  - hexo
  - blog
  - Nuxt
  - Nuxt Content
---

记录一下使用 Nuxt Content 重构 hexo 个人博客的过程。

......