تحسين صفحة المنشور
إضافة title لصفحة المنشور
في ملف pages/posts/[id].js، دعنا نضيف وسم title باستخدام بيانات المنشور. ستحتاج إلى إضافة استيراد لـ next/head في أعلى الملف ثم إضافة وسم title عن طريق تحديث مكون Post:
// أضف هذا الاستيراد
import Head from 'next/head';
export default function Post({ postData }) {
return (
<Layout>
{/* أضف وسم <Head> هذا */}
<Head>
<title>{postData.title}</title>
</Head>
{/* ابق على الكود الحالي هنا */}
</Layout>
);
}تنسيق التاريخ
لتنسيق التاريخ، سنستخدم مكتبة date-fns. أولاً، قم بتثبيتها:
npm install date-fnsبعد ذلك، أنشئ ملفًا باسم components/date.js وأضف مكون Date التالي:
import { parseISO, format } from 'date-fns';
export default function Date({ dateString }) {
const date = parseISO(dateString);
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
}ملاحظة: يمكنك رؤية خيارات تنسيق
format()المختلفة على موقع date-fns.
الآن، افتح ملف pages/posts/[id].js، أضف استيرادًا لمكون Date في أعلى الملف، واستخدمه بدلاً من {postData.date}:
// أضف هذا الاستيراد
import Date from '../../components/date';
export default function Post({ postData }) {
return (
<Layout>
{/* ابق على الكود الحالي هنا */}
{/* استبدل {postData.date} بهذا */}
<Date dateString={postData.date} />
{/* ابق على الكود الحالي هنا */}
</Layout>
);
}إذا قمت بالوصول إلى http://localhost:3000/posts/pre-rendering، يجب أن ترى الآن التاريخ مكتوبًا كـ "January 1, 2020".
إضافة CSS
أخيرًا، دعنا نضيف بعض CSS باستخدام ملف styles/utils.module.css الذي أضفناه سابقًا. افتح ملف pages/posts/[id].js، ثم أضف استيرادًا لملف CSS، واستبدل مكون Post بالكود التالي:
// أضف هذا الاستيراد في أعلى الملف
import utilStyles from '../../styles/utils.module.css';
export default function Post({ postData }) {
return (
<Layout>
<Head>
<title>{postData.title}</title>
</Head>
<article>
<h1 className={utilStyles.headingXl}>{postData.title}</h1>
<div className={utilStyles.lightText}>
<Date dateString={postData.date} />
</div>
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</article>
</Layout>
);
}إذا قمت بالوصول إلى http://localhost:3000/posts/pre-rendering، يجب أن تبدو الصفحة الآن أفضل قليلاً:
عمل رائع! سنقوم بتحسين صفحة الفهرس بعد ذلك وسنكون قد انتهينا!