動態路由

渲染 Markdown

為了渲染 Markdown 內容,我們會使用 remark 函式庫。 首先,來安裝它:

npm install remark remark-html

然後,打開 lib/posts.js 並將以下內容放進內容最上方:

import { remark } from 'remark'; import html from 'remark-html';

再來在同一支檔案中如以下 remark 使用方式來 更新 getPostData() 函式:

export async function getPostData(id) { const fullPath = path.join(postsDirectory, `${id}.md`); const fileContents = fs.readFileSync(fullPath, 'utf8'); // Use gray-matter to parse the post metadata section const matterResult = matter(fileContents); // Use remark to convert markdown into HTML string const processedContent = await remark() .use(html) .process(matterResult.content); const contentHtml = processedContent.toString(); // Combine the data with the id and contentHtml return { id, contentHtml, ...matterResult.data, }; }

重要: 因為我們需要在 remark 部分使用 await,所以我們新增了關鍵字 asyncgetPostDataasync/await的作用是可以讓你已非同步的方式來請求資料。

那意謂著我們需要先更新 pages/posts/[id].js 檔案裡的 getStaticProps 函式以便在 getPostData 使用 await

export async function getStaticProps({ params }) { // Add the "await" keyword like this: const postData = await getPostData(params.id); return { props: { postData, }, }; }

最後,更新 pages/posts/[id].js 裡的 Post 組件使用 dangerouslySetInnerHTML 來渲染 contentHtml

export default function Post({ postData }) { return ( <Layout> {postData.title} <br /> {postData.id} <br /> {postData.date} <br /> <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} /> </Layout> ); }

一樣可以試試到以下網站看看結果:

你現在應該能看到部落格內容:

部落格內容示意圖

我們就快完成了!在下一階段,我們來優化每個頁面。

本篇文章由YONG-LIN-LIANG

YONG-LIN-LIANG

貢獻翻譯。瞭解如何參與貢獻