Optimierung der Beitragsseite
Hinzufügen des title-Tags zur Beitragsseite
In pages/posts/[id].js fügen wir den title-Tag mit den Beitragsdaten hinzu. Dazu müssen Sie oben in der Datei next/head importieren und den title-Tag durch Aktualisierung der Post-Komponente hinzufügen:
// Fügen Sie diesen Import hinzu
import Head from 'next/head';
export default function Post({ postData }) {
return (
<Layout>
{/* Fügen Sie diesen <Head>-Tag hinzu */}
<Head>
<title>{postData.title}</title>
</Head>
{/* Behalten Sie den bestehenden Code hier bei */}
</Layout>
);
}Formatierung des Datums
Um das Datum zu formatieren, verwenden wir die Bibliothek date-fns. Installieren Sie sie zunächst:
npm install date-fnsErstellen Sie dann eine Datei namens components/date.js und fügen Sie die folgende Date-Komponente hinzu:
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>;
}Hinweis: Die verschiedenen
format()-String-Optionen finden Sie auf der date-fns-Website.
Öffnen Sie nun pages/posts/[id].js, fügen Sie oben in der Datei einen Import für die Date-Komponente hinzu und verwenden Sie sie anstelle von {postData.date}:
// Fügen Sie diesen Import hinzu
import Date from '../../components/date';
export default function Post({ postData }) {
return (
<Layout>
{/* Behalten Sie den bestehenden Code hier bei */}
{/* Ersetzen Sie {postData.date} hiermit */}
<Date dateString={postData.date} />
{/* Behalten Sie den bestehenden Code hier bei */}
</Layout>
);
}Wenn Sie nun http://localhost:3000/posts/pre-rendering aufrufen, sollte das Datum als "January 1, 2020" angezeigt werden.
Hinzufügen von CSS
Abschließend fügen wir etwas CSS mit der zuvor erstellten Datei styles/utils.module.css hinzu. Öffnen Sie pages/posts/[id].js, fügen Sie einen Import für die CSS-Datei hinzu und ersetzen Sie die Post-Komponente durch folgenden Code:
// Fügen Sie diesen Import oben in der Datei hinzu
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>
);
}Wenn Sie nun http://localhost:3000/posts/pre-rendering aufrufen, sollte die Seite etwas besser aussehen:
Gute Arbeit! Als Nächstes optimieren wir die Indexseite, dann sind wir fertig!