Pages Router: 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-fns

Erstellen 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!

Optimierung der Beitragsseite

Hinzufügen des title-Tags zur Beitragsseite

Formatierung des Datums

Hinzufügen von CSS

On this page

Hinzufügen des `title`-Tags zur Beitragsseite