古腾堡作为WordPress的默认编辑器，为内容创作带来了革命性的变化。通过直观的拖放界面，用户可以轻松组合文本、图片、视频等多种元素，打造出富有表现力的网页内容。这种模块化的设计方法极大地提升了WordPress的灵活性和视觉表现力，使其成为现代网站建设的理想选择。本指南将深入探讨如何在Next.js静态网站中，借助WordPress REST API将古腾堡编辑器的内容解析为标准HTML格式，实现前后端分离的内容展示方案。

在开始之前，请确保您已准备好以下开发环境：
– 计算机上安装Node.js及npm（或yarn）包管理工具
– 掌握JavaScript和React基础知识
– 拥有一个已发布文章的WordPress网站
– 了解如何使用REST API获取Gutenberg内容

要实现与WordPress网站的程序化交互并获取Gutenberg区块内容结构，您需要利用WordPress REST API或WPGraphQL插件。这些工具能够提供JSON格式的WordPress内容数据。要启用JSON数据访问，请将WordPress固定链接设置从”朴素”模式调整为其他形式，以便通过结构化URL访问API。标准API访问路径如下：
https://yoursite.com/wp-json/wp/v2

通过向该路径发送API请求，您可以编程方式检索WordPress网站上的各类信息并执行操作。例如，发送GET请求到以下网址：
https://yoursite.com/wp-json/wp/v2/posts

即可获取包含标题、内容、作者等信息的文章列表JSON对象。这种数据交互方式为开发者提供了强大的内容管理能力。

当从使用Gutenberg编辑器的WordPress网站获取文章时，数据库会以HTML和JSON元数据混合的形式存储内容。每个Gutenberg区块都包含封装在HTML注释中的JSON元数据，用于定义区块的类名、样式等属性，以及展示相关的配置信息。例如：

“The journey of a thousand miles begins with one step.”Lao Tzu

上述代码展示了两个Gutenberg区块：引言和图库。每个区块都包含HTML注释中的JSON元数据，这些元数据精确控制着区块的视觉呈现方式。当您通过REST API或WPGraphQL获取这些区块时，WordPress会自动处理HTML和JSON元数据的组合，将其转换为可直接嵌入网页的完整HTML元素。这种转换后的HTML展示效果如下：

“The journey of a thousand miles begins with one step.”Lao Tzu

对于使用Next.js等JavaScript框架构建的解耦或无头应用程序开发者来说，这种方式提供了直接显示内容的高效方法——通过dangerouslySetInnerHTML属性将HTML直接注入页面进行渲染。当然，您可能还需要对链接等元素进行额外格式化，并处理多余的换行符（\n），本指南将在后续部分详细说明这些操作技巧。

接下来，我们将详细介绍如何将WordPress内容提取到Next.js项目中，并将Gutenberg区块解析为HTML。

首先，创建一个用于获取WordPress文章的函数。在项目中的src/page.js文件中，用以下代码替换现有内容：

“`javascript
const getWpPosts = async () => {
const res = await fetch(‘https://yoursite.com/wp-json/wp/v2/posts’);
const posts = await res.json();
return posts;
};
“`

这个异步函数通过发送请求到WordPress REST API，获取网站上的所有文章，并以数组形式返回数据。

接下来，在一个简单的Next.js页面组件中利用获取的文章，将文章记录到控制台并呈现基本问候语：

“`javascript
const page = async () => {
const posts = await getWpPosts();
console.log(posts);
return

Hello World

;
};

export default page;
“`

当您使用npm run dev运行项目时，它将显示”Hello World”信息，并将获取的文章记录到终端。

每个代表古腾堡单个文章数据的JSON对象包含多个字段，其中内容和摘录字段将作为解析为HTML字符串的Gutenberg区块返回。为了在Next.js中正确呈现这些HTML内容，我们使用了dangerouslySetInnerHTML属性：

“`javascript
const page = async () => {
const posts = await getWpPosts();
return (

{posts.map((post) => (

{post.title.rendered}

))}

);
};

export default page;
“`

在这个更新的组件中，我们对获取的文章数组进行映射，生成一个文章摘录列表。每个摘录都封装在一个Link组件中，用于导航，显示文章标题和内容片段。dangerouslySetInnerHTML属性用于解析和呈现excerpt.rendered字段中包含的HTML内容。

接下来，在app目录下创建文件blog/[id]/page.js。您可以使用文件夹来定义路由，因此通过创建blog文件夹，就定义了blog路由。结合动态路由，就能为每篇文章生成唯一路由，即/blog/{post_id}。添加以下代码：

“`javascript
import Link from ‘next/link’;

export async function generateStaticParams() {
const res = await fetch(‘https://yoursite.com/wp-json/wp/v2/posts’);
const posts = await res.json();
return posts.map((post) => {
return { params: { id: post.id.toString() } };
});
}

export async function getPost(id) {
const response = await fetch(`https://yoursite.com/wp-json/wp/v2/posts/${id}`);
const post = await response.json();
return post;
}
“`

generateStaticParams函数在构建时根据每个文章返回的相应ID静态生成路由，而getPost函数会从REST API获取带有所传ID的文章的Gutenberg数据。

前面的章节展示了从REST API返回的Gutenberg数据解析示例。目前，我们重点关注content.rendered字段，它包含文章的原始HTML代码：

“`javascript
[ {
… “content”: {
“rendered” : “\nFire, a primal force, captivates with its flickering flames, evoking both awe and caution. Its dance symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.\n\n\n\n class=\”wp-block-image size-full\”>\n\n\n\nIn ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire’s dual nature reminds us of our fragile relationship with the elements.\n\n\n\n class=\”wp-block-image size-large\”>\n\n\n\nYou can check out other articles on our blog:\n\n\n\n\n href=\”https://yoursite.com/?p=6\”>Lorem Ipsum: Beginnings\n\n\n\n href=\”https://yoursite.com/?p=9\”>Lorem Ipsum: Act 2\n\n\n\n href=\”https://yoursite.com/?p=11\”>Lorem Ipsum: Act 3\n\n” }, … } ]
“`

该字段包含文章的原始HTML代码，可以直接使用dangerouslySetInnerHTML属性渲染：

“`javascript
export default async function Post({ params }) {
const post = await getPost(params.id);
const content = parseHtml(post.content.rendered);
return (