如何为无头WordPress解析古腾堡内容

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 执行 API 请求。它会获取网站上的所有文章，并以数组形式返回。

const page = async () => {
const posts = await getWpPosts();
console.log(posts);
return (
<div>
<h1>Hello World</h1>
</div>
);
};
export default page;

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

[
{
"_links" : {
"about" : [...],
"author" : [...],
"collection" : [...],
"curies" : [...],
"predecessor-version" : [...],
"replies" : [...],
"self" : [...],
"version-history" : [...],
"wp:attachment" : [...],
"wp:term" : [...]
},
"author" : 1,
"categories" : [...],
"comment_status" : "open",
"content" : {
"protected" : false,
"rendered" : "n<p>Fire, a primal force, captivates with its <strong>flickering flames</strong>, evoking both awe and caution. Its <quote>dance</quote> 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.</p>nnnn<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="250" height="148" src="https://img.example.com/wp-content/uploads/2024/02/burningbuilding.jpg" alt="" class="wp-image-14"/></figure>nnnn<p>In 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.</p>nnnn<figure class="wp-block-image size-large"><img decoding="async" src="https://img.example.com/premium-photo/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380" alt=""/></figure>nnnn<p>You can check out other articles on our blog:</p>nnnn<ul>n<li><a href="https://yoursite.com/?p=6">Lorem Ipsum: Beginnings</a></li>nnnn<li><a href="https://yoursite.com/?p=9">Lorem Ipsum: Act 2</a></li>nnnn<li><a href="https://yoursite.com/?p=11">Lorem Ipsum: Act 3</a></li>n</ul>n"
},
"date" : "2024-02-27T12:08:30",
"date_gmt" : "2024-02-27T12:08:30",
"excerpt" : {
"protected" : false,
"rendered" : "<p>Fire, 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. In ancient times, fire was a beacon of light and warmth, […]</p>n"
},
"featured_media" : 0,
"format" : "standard",
"guid" : {
"rendered" : "https://yoursite.com/?p=13"
},
"id" : 13,
"link" : "https://yoursite.com/?p=13",
"meta" : {
"footnotes" : ""
},
"modified" : "2024-02-29T16:45:36",
"modified_gmt" : "2024-02-29T16:45:36",
"ping_status" : "open",
"slug" : "fire-fire",
"status" : "publish",
"sticky" : false,
"tags" : [],
"template" : "",
"title" : {
"rendered" : "Fire"
},
"type" : "post"
},
},
...
]

代表古腾堡单个文章数据的 JSON 对象包含多个字段，其中内容和摘录字段将作为解析为 HTML 字符串的古腾堡区块返回。

const page = async () => {
const posts = await getWpPosts();
return (
<>
<h1> Headless Blog </h1>
<div>
{posts.map((post) => (
<Link href={'/blog/' + post.id} key={post.id}>
<h2>
{post.title.rendered} <span>-></span>
</h2>
<div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
</Link>
))}
</div>
</>
);
};
export default page;

在这个更新的组件中，我们对获取的文章数组进行映射，生成一个文章摘录列表。每个摘录都封装在一个 Link 组件中，用于导航，显示文章标题和内容片段。

dangerouslySetInnerHTML 属性用于解析和呈现 excerpt.rendered 字段中包含的 HTML 内容。

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 字段：

[
{
...
"content": {
"rendered" : "n<p>Fire, a primal force, captivates with its <strong>flickering flames</strong>, evoking both awe and caution. Its <quote>dance</quote> 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.</p>nnnn<figure> class="wp-block-image size-full"><img loading="lazy" decoding="async" width="250" height="148" src="https://img.example.com/wp-content/uploads/2024/02/burningbuilding.jpg" alt="" class="wp-image-14"/></figure>nnnn<p>In 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.</p>nnnn<figure> class="wp-block-image size-large"><img decoding="async" src="https://img.example.com/premium-photo/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380" alt=""/></figure>nnnn<p>You can check out other articles on our blog:</p>nnnn<ul>n<li><a> href="https://yoursite.com/?p=6">Lorem Ipsum: Beginnings</a></li>nnnn<li><a> href="https://yoursite.com/?p=9">Lorem Ipsum: Act 2</a></li>nnnn<li><a> href="https://yoursite.com/?p=11">Lorem Ipsum: Act 3</a></li>n</ul>n"
},
...
}
]

该字段包含文章的原始 HTML 代码。它可以直接使用 dangerouslySetInnerHTML 属性渲染，如下所示：<div dangerouslySetInnerHTML={{ __html: <raw_html_string> }} />。

npm install html-react-parser --save

import parse, { domToReact } from "html-react-parser";
/*
* We use a regular expression (pattern) to match the specific URL you want to replace.
* The (d+) part captures the numeric ID after ?p=.
* Then, we use the replacement string 'data-internal-link="true" href="https://www.wbolt.com/blog/$1"',
* where $1 is a placeholder for the captured ID.
*/
export function fixInternalLinks(html_string) {
const pattern = /href="https://yoursite.com/?p=(d+)"/g;
const replacement = 'data-internal-link="true" href="https://www.wbolt.com/blog/$1"';
return html_string.replace(pattern, replacement);
}
export function parseHtml(html) {
// Replace 2+ sequences of 'n' with a single '<br />' tag
const _content = html.replace(/n{2,}/g, '<br />');
const content = fixInternalLinks(_content);
const options = {
replace: ({ name, attribs, children }) => {
// Convert internal links to Next.js Link components.
const isInternalLink =
name === "a" && attribs["data-internal-link"] === "true";
if (isInternalLink) {
return (
<Link href={attribs.href} {...attribs}>
{domToReact(children, options)}
</Link>
);
} else if (name === "img") {
attribs["width"] = "250";
attribs["height"] = "150";
return (
<img {...attribs}/>
);
}
},
};
return parse(content, options);
}

fixInternalLinks()  函数使用正则表达式从 HTML 字符串中查找 WordPress 网站中的文章链接。在原始 HTML 中，您可以看到文章包含一个 List 标签，其中包含指向网站上其他文章的链接，将这些链接替换为指向静态网站中路由的内部链接。

parseHTML()  函数会发现多个多余的换行符 n ，并将其替换为 <br /> 标记。它还能找到内部链接，并将锚标记转换为 Link 标记。然后，该函数使用标签属性调整图片大小。

export default async function Post({ params }) {
const post = await getPost(params.id);
const content = parseHtml(post.content.rendered);
return (
<>
<h1>
{post.title.rendered}
</h1>
<div>{content}</div>
</>
);
}

从 Gutenberg 数据中解析原始 HTML 后，代码会返回代表页面格式化用户界面的 JSX。