موجه الصفحات: عرض محتوى Markdown

لعرض محتوى Markdown، سنستخدم مكتبة remark. أولاً، لنثبتها:

npm install remark remark-html

ثم، افتح ملف lib/posts.js وأضف الاستيرادات التالية في أعلى الملف:

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

وقم بتحديث دالة getPostData() في نفس الملف لاستخدام remark كما يلي:

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // استخدام gray-matter لتحليل قسم البيانات الوصفية للمنشور
  const matterResult = matter(fileContents);
 
  // استخدام remark لتحويل Markdown إلى سلسلة HTML
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();
 
  // دمج البيانات مع المعرف وcontentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

هام: أضفنا الكلمة المفتاحية async إلى getPostData لأننا بحاجة إلى استخدام await مع remark. تسمح async/await لك بجلب البيانات بشكل غير متزامن.

هذا يعني أننا بحاجة لتحديث getStaticProps في ملف pages/posts/[id].js لاستخدام await عند استدعاء getPostData:

export async function getStaticProps({ params }) {
  // أضف كلمة "await" هكذا:
  const postData = await getPostData(params.id);
 
  return {
    props: {
      postData,
    },
  };
}

أخيراً، قم بتحديث مكون Post في ملف pages/posts/[id].js لعرض contentHtml باستخدام dangerouslySetInnerHTML:

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

جرب زيارة هذه الصفحات مرة أخرى:

يجب أن ترى الآن محتوى المدونة:

كيفية إنشاء صفحات بشكل ثابت مع مسارات ديناميكية

نحن على وشك الانتهاء! دعونا نلمع كل صفحة بعد ذلك.