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.
\n\n\n\n\n\n\n\n
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.
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, […]
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()函数使用传递的 ID 从 REST API 获取帖子的古腾堡数据。
前面的部分显示了从帖子的 REST API 返回的已解析古腾堡数据示例。目前，我们只关心该content.rendered 领域：
[
{
...
"content": {
"rendered" : "\n
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, 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.
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="/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="/blog/$1"';
return html_string.replace(pattern, replacement);
}
export function parseHtml(html) {
// Replace 2+ sequences of '\n' with a single ' ' tag
const _content = html.replace(/\n{2,}/g, ' ');
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 (
{domToReact(children, options)}
);
} else if (name === "img") {
attribs["width"] = "250";
attribs["height"] = "150";
return (
);
}
},
};
return parse(content, options);
}
该fixInternalLinks() 函数使用正则表达式从 HTML 字符串中查找 WordPress 网站中帖子的链接。在原始 HTML 中，可以看到该帖子包含一个List标签，其中包含指向网站上其他帖子的链接，并将这些链接替换为指向静态网站中的路径的内部链接。
![图片[2]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/image-781.webp)
