在 Next.js 中使用 Markdown 渲染博客文章-JavaScript中文网-JavaScript教程资源分享门户

在 Next.js 中使用 Markdown 渲染博客文章

在开发静态博客网站时，我们经常需要使用 Markdown 将文章内容进行排版，以便更好地展示文章结构和呈现效果。Next.js 提供了支持 Markdown 渲染的能力，本文将为您指导如何在 Next.js 中使用 Markdown 渲染博客文章。

安装依赖

首先，我们需要安装必要的依赖：remark、remark-html、gray-matter 和 fs。

npm install remark remark-html gray-matter fs --save-dev

依赖解释

remark：一个 Markdown 解析器。
remark-html：用于将解析后的 Markdown 转换为 HTML。
gray-matter：用于解析 Markdown 文件元数据，如 Front Matter（通常是 YAML 或者 JSON 格式的数据）。
fs：Node.js 中的核心模块，用于从磁盘中读取文件。

创建 Markdown 文件

我们需要先创建一个 Markdown 文件，作为博客文章的内容。这里我们创建一个 blog.md 文件，内容如下：

// www.javascriptcn.com code example
---
title: "使用 Next.js 渲染 Markdown 博客文章"
date: "2022-02-22"
author: "Jack"
categories:
  - Web
  - 前端
tags:
  - Next.js
  - Markdown
---

# 使用 Next.js 渲染 Markdown 博客文章

在 Next.js 中使用 Markdown 渲染博客文章能够快速地创建静态网站。

## 安装必要的依赖

我们需要安装必要的依赖：`remark`、`remark-html`、`gray-matter` 和 `fs`。

## 创建 Markdown 文件

我们需要先创建一个 Markdown 文件，作为博客文章的内容。

## Markdown 转换

我们需要将 Markdown 文件转换为 HTML。

## 将转换后的 HTML 渲染到页面上

使用 `dangerouslySetInnerHTML` 方法将 HTML 渲染到页面上。

可以看到，在文章开头，我们使用了 Front Matter，指定了文章的标题、日期、作者、分类和标签等元数据信息。

解析 Markdown 文件

接下来，我们可以使用 gray-matter 解析 Markdown 文件的元数据信息，并将原始 Markdown 内容提取出来，以便进行转换和渲染。代码如下：

// www.javascriptcn.com code example
import matter from 'gray-matter';
import fs from 'fs';

export async function getStaticProps() {
  const markdownFile = fs.readFileSync('path/to/blog.md').toString();
  const parsedMarkdown = matter(markdownFile);

  return {
    props: {
      title: parsedMarkdown.data.title,
      date: parsedMarkdown.data.date,
      author: parsedMarkdown.data.author,
      categories: parsedMarkdown.data.categories,
      tags: parsedMarkdown.data.tags,
      content: parsedMarkdown.content,
    },
  };
}

这里我们使用了 getStaticProps 静态生成函数来处理 Markdown 文件，并提取了标题、日期、作者、分类和标签等信息。然后，我们返回一个包含这些信息及原始 Markdown 内容的 props 对象。

Markdown 转换

接下来，我们需要将 Markdown 内容转换为 HTML。这里我们使用 remark 和 remark-html 实现转换。代码如下：

// www.javascriptcn.com code example
import remark from 'remark';
import html from 'remark-html';

export async function getStaticProps() {
  // ...
  const processedContent = await remark().use(html).process(parsedMarkdown.content);
  const contentHtml = processedContent.toString();

  return {
    props: {
      // ...
      contentHtml,
    },
  };
}

这里我们使用 remark 创建了一个转换器，使用 remark-html 将 Markdown 内容转换为 HTML。最后，我们将转换后的 HTML 字符串存储在 contentHtml 变量中。

将转换后的 HTML 渲染到页面上

最后，我们使用 dangerouslySetInnerHTML 方法将 HTML 渲染到页面上。代码如下：

// www.javascriptcn.com code example
export default function Blog({ title, date, author, categories, tags, contentHtml }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>Date: {date}</p>
      <p>Author: {author}</p>

      <h2>Categories:</h2>
      <ul>
        {categories.map(category => (
          <li key={category}>{category}</li>
        ))}
      </ul>

      <h2>Tags:</h2>
      <ul>
        {tags.map(tag => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>

      <div dangerouslySetInnerHTML={{ __html: contentHtml }}></div>
    </div>
  );
}

在上面的代码中，我们使用 dangerouslySetInnerHTML 将转换后的 HTML 渲染到 div 中，并将标题、日期、作者、分类、标签信息也一并呈现出来。

至此，我们已经成功地在 Next.js 中使用 Markdown 渲染博客文章了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d699eda941bf7134c6336f

在 Next.js 中使用 Markdown 渲染博客文章