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.
nnnnnnnn
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, […]
在这个更新的组件中，我们对获取的文章数组进行映射，生成一个文章摘录列表。每个摘录都封装在一个 Link 组件中，用于导航，显示文章标题和内容片段。
dangerouslySetInnerHTML 属性用于解析和呈现 excerpt.rendered 字段中包含的 HTML 内容。
接下来，在 app 目录下创建文件 blog/[id]/page.js。您可以使用文件夹来定义路由。因此，通过创建 blog 文件夹，就定义了 blog 路由。结合动态路由，就能为每篇文章生成路由。
每个文章都有一个 ID。您可以使用此 ID 在应用程序中生成其唯一路由，即 /blog/{post_id}。添加以下代码：
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
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.
nnnn class="wp-block-image size-full">nnnn
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 标签，其中包含指向网站上其他文章的链接，将这些链接替换为指向静态网站中路由的内部链接。
parseHTML() 函数会发现多个多余的换行符 n ，并将其替换为 标记。它还能找到内部链接，并将锚标记转换为 Link 标记。然后，该函数使用标签属性调整图片大小。
要为每个动态路由生成主用户界面，请添加以下代码：
export default async function Post({ params }) {
const post = await getPost(params.id);
const content = parseHtml(post.content.rendered);
return (
评论留言