Blog Example

Nextjs 自建博客

项目依赖

环境

Nodejs >18.17

堆栈

React 相关的依赖：

nextjs - 用 React 构建网站的框架。
tailwindcss - 一种可定制的 CSS 框架，帮助构建现代化界面。
NextUI - 提供现成组件和样式，用于构建美观的界面。
next-themes - 管理网站主题的工具。

MDX 相关的依赖：

next-mdx-remote - 在网站中加载和显示 MDX 文件的库。
reading-time - 计算文本阅读时间的工具。
gray-matter - 解析 Markdown 文件中的元数据信息的工具。
rehype-prism-plus - 在 MDX 中实现代码高亮显示的工具。
remark-gfm - 解析支持 GitHub Flavored Markdown 语法的工具。

初始化项目

使用create-next-app创建项目，根据官方要求，注意下 Nodejs 版本，要大于18.17

npx create-next-app@latest

执行命令过程中，根据个人便好选择初始化参数；一路回车默认即可（我选择了配置别名，其他的都是默认）

在项目初始化完成一下文件中的无用代码进行删除。

app/page.tsx
app/globals.css
tailwind.config.ts

配置 NextUI 和明暗主题

为了简化组件样式的开发，引入了 UI 组件库，我选择了Tailwindcss+NextUI+next-themes

注意：这俩都需要客户端渲染提供支持，需要文件头部添加use client。

tailwindcss在前面初始化时，默认配置里边已经装过了，这里只安装NextUI、next-themes；

NextUI和next-themes对tailwindcss支持良好，需要在tailwind.config.ts里边配置一下：

在config.content添加NextUI的模版路径
在config.plugins中执行NextUI插件
在config.darkMode中配置主题切换方式

以下是详细步骤：

安装依赖

npm i @nextui-org/react framer-motion next-themes
# framer-motion 是NextUI的动画依赖

Tailwind CSS 设置

// tailwind.config.ts
import { nextui } from "@nextui-org/react";
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}", // NextUI 配置
  ],
  darkMode: ["selector", '[data-theme="dark"]'], // 明暗主题配置：next-themes 默认修改的HTML属性data-theme来切换主题的
  theme: {
    extend: {},
  },
  plugins: [
    nextui(), // NextUI 配置
  ],
};
export default config;

注意：一定要配置'[data-theme="dark"]' ，因为 next-themes 是基于这个属性来切换明暗主题的；当然可以修改这个属性，只需要将 next-themes 中的 attribute 和这里的配置一样即可

配置Provider

需要使用NextUIProvider，ThemeProvider包裹，这里直接在root组件包裹，也就是让全部页面生效。

// Provider.tsx
"use client";

import { NextUIProvider } from "@nextui-org/react";
import { ThemeProvider } from "next-themes";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider enableSystem disableTransitionOnChange>
      <NextUIProvider>{children}</NextUIProvider>
    </ThemeProvider>
  );
}

最后在root 布局组件中使用

// /app/layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          <PageHeader />
          {children}
        </Providers>
      </body>
    </html>
  );
}

配置说明：

Next-theme
- attribute：默认data-theme，对应tailwindcss中的darkMode配置
- enableSystem ：开启系统首选项，也就是系统自己暗黑模型（如果操作系统开启了并且浏览器支持的话）
- defaultTheme ：默认system，如果没有开启enableSystem，默认为light
- disableTransitionOnChange ：关闭切换主题时的动画

注意：因为开启了enableSystem，所以在使用useTheme钩子，可以使用resolvedTheme来获取当前模式是dark还是light，因为resolvedTheme可以识别系统主题，嫌麻烦也可以直接关闭这一项。

配置 Markdown

主要用到next-mdx-remote，用来加载和显示 MDX 文件

MDX 有量大插件系统：

rehype 通过插件转换 HTML 的工具
remark 通过插件转换 markdown 的工具

最后都是服务于最终的显示效果和交互，这里用到代码高亮，解析元数据，阅读时间以及支持 GitHub 风格的 Markdown。

安装依赖

npm i next-mdx-remote rehype-prism-plus remark-gfm gray-matter reading-time

解析 Markdown 存放目录
通过 gray-matter 解析元数据
通过 reading-time 计算阅读时间
rehype-prism-plus
Remark-gfm - 添加 github 风格的 Markdown 支持 -> 只能使用 3.0.1
next-mdx-remote 用来将原始内容渲染成 html

现在已经基本完成，但是页面打开似乎排版不太对，添加排版支持

typography

参考

Markdown and MDX