Pages Router: Markdown rendern

Um Markdown-Inhalte zu rendern, verwenden wir die Bibliothek remark. Zuerst installieren wir sie:

npm install remark remark-html

Dann öffnen wir lib/posts.js und fügen folgende Imports am Anfang der Datei hinzu:

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

Aktualisieren Sie die Funktion getPostData() in derselben Datei wie folgt, um remark zu verwenden:

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // Verwenden Sie gray-matter, um den Metadaten-Abschnitt des Posts zu parsen
  const matterResult = matter(fileContents);
 
  // Verwenden Sie remark, um Markdown in einen HTML-String umzuwandeln
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();
 
  // Kombinieren Sie die Daten mit der ID und contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

Wichtig: Wir haben das Schlüsselwort async zu getPostData hinzugefügt, weil wir await für remark benötigen. async/await ermöglicht es Ihnen, Daten asynchron abzurufen.

Das bedeutet, dass wir getStaticProps in pages/posts/[id].js aktualisieren müssen, um await beim Aufruf von getPostData zu verwenden:

export async function getStaticProps({ params }) {
  // Fügen Sie das Schlüsselwort "await" wie folgt hinzu:
  const postData = await getPostData(params.id);
 
  return {
    props: {
      postData,
    },
  };
}

Schließlich aktualisieren Sie die Post-Komponente in pages/posts/[id].js, um contentHtml mit dangerouslySetInnerHTML zu rendern:

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

Versuchen Sie, diese Seiten erneut aufzurufen:

Sie sollten nun den Blog-Inhalt sehen:

Wie man Seiten mit dynamischen Routen statisch generiert

Wir sind fast fertig! Lassen Sie uns als Nächstes jede Seite verfeinern.