In diesem Tutorial wird erl?utert, wie Sie eine Klassifizierungsseite mit strukturierten Inhalten von Gatsby und Sanity.io erstellen. Sie lernen, wie Sie APIs mit Gatsbys Knoten erstellen, Felder in Inhaltstypen in Gatsbys GraphQL -API. Insbesondere erstellen wir Kategorienseiten für den Blog -Launcher von Sanity.

Es sollte beachtet werden, dass der hier eingeführte Inhalt nichts mit geistiger Gesundheit selbst zu tun hat. Sie k?nnen dies unabh?ngig von der Inhaltsquelle tun, die Sie verwenden. Wir verwenden Sanity.io nur für Demonstrationszwecke.

Starten Sie einen Blog

Wenn Sie dieses Tutorial mit Ihrem eigenen Gatsby -Projekt lernen m?chten, überspringen Sie den Abschnitt, in dem Sie eine neue Seitenvorlage in Gatsby erstellen. Andernfalls besuchen Sie Sanity.io/create und starten Sie den Gatsby -Blog -Launcher. Es wird den Code aus dem Senty Studio und Gatsby Front-End in Ihr GitHub-Konto einfügen und eine Bereitstellung für beide auf Netlify einrichten. Alle Konfigurationen, einschlie?lich Beispielinhalte, sind bereit, damit Sie lernen k?nnen, wie Sie eine Klassifizierungsseite direkt erstellen.

Stellen Sie nach Beginn des Projekts sicher, dass das neue Github -Repository lokal klonen und die Abh?ngigkeiten installieren:

 Git-Klon [E-Mail geschützt]: Benutzername/Ihre Repository-name.git
CD Your Repository-Namen
npm i

Wenn Sie sowohl das Sanity Studio (CMS) als auch das Front-End von Gatsby lokal ausführen m?chten, k?nnen Sie den Befehl npm run dev aus dem Terminal im Projekt Root-Verzeichnis ausführen. Sie k?nnen auch zum web gehen und Gatsby mit demselben Befehl ausführen.

Sie sollten auch die Senty CLI installieren und sich vom Terminal in Ihrem Konto anmelden: npm i -g @sanity/cli && sanity login . Auf diese Weise k?nnen Sie Tools und nützliche Befehle zur Interaktion mit Ihrem Vernunftprojekt erhalten. Sie k?nnen das Flag --help -Flag hinzufügen, um weitere Informationen zu ihren Funktionen und Befehlen zu erhalten.

Wir werden eine Anpassung an die Datei gatsby-node.js vornehmen. Um die Ergebnisse der ?nderungen anzuzeigen, starten Sie den Entwicklungsserver von Gatsby neu. Dies geschieht in den meisten Systemen durch Drücken von Strg C im Terminal und durch erneutes Ausführen npm run dev .

Mit Inhaltsmodellen vertraut

Schauen Sie sich den Ordner /studio/schemas/documents an. Hier sind die Schema -Dateien für unsere Hauptinhaltstypen: Autoren, Kategorien, Site -Einstellungen und Beitr?ge. Jede Datei exportiert ein JavaScript -Objekt, das Felder und Eigenschaften für diese Inhaltstypen definiert. In post.js ist die Felddefinition der Kategorie:

 {
  Name: 'Kategorien',
  Typ: 'Array',
  Titel: 'Kategorien',
  von: [
    {
      Typ: 'Referenz',
      Zu: [{
        Typ: 'Kategorie'
      }]
    }
  ]
},

Dadurch wird ein Array -Feld mit Referenzobjekten zum Kategorie -Dokument erstellt. Im Studio des Blogs wird es so aussehen:

Slug zum Kategorie -Typ hinzufügen

Gehen Sie zu /studio/schemas/documents/category.js . Die Kategorie verfügt über ein einfaches Inhaltsmodell, das aus Titeln und Beschreibungen besteht. Jetzt erstellen wir eine dedizierte Seite für die Kategorie, und es ist auch bequem, das Slug -Feld zu haben. Wir k?nnen es in der Architektur wie folgt definieren:

 // Studio/Schemas/Dokumente/category.js
Standard ausführen {
  Name: 'Kategorie',
  Typ: 'Dokument',
  Titel: 'Kategorie',
  Felder: [
    {
      Name: 'Titel',
      Typ: 'String',
      Titel: 'Titel'
    },
    {
      Name: 'Slug',
      Typ: 'Slug',
      Titel: 'Slug',
      Optionen: {
        // Fügen Sie eine Schaltfl?che hinzu, um Slugs basierend auf dem Titelfeld zu generieren
        Quelle: 'Titel'
      }
    },
    {
      Name: 'Beschreibung',
      Typ: 'Text',
      Titel: 'Beschreibung'
    }
  ]
}

Nachdem wir das Inhaltsmodell ge?ndert haben, müssen wir die GraphQL -Schema -Definition aktualisieren. Tun Sie dies durch npm run graphql-deploy (oder sanity graphql deploy ) im Studio-Ordner. Sie erhalten eine Warnung vor den wichtigsten ?nderungen, aber da wir gerade ein Feld hinzugefügt haben, k?nnen Sie weitermachen, ohne sich Sorgen zu machen. Wenn Sie m?chten, dass das Feld in einem Studio auf Netlify verfügbar ist, überprüfen Sie die ?nderungen in Git (mit git add . && git commit -m"add slug field" ) und drücken Sie es in Ihr Github -Repository ( git push origin master ).

Jetzt sollten wir die Kategorien durchsuchen und Slugs für sie erzeugen. Denken Sie daran, auf die Schaltfl?che Ver?ffentlichung zu klicken, um Gatsby zu erm?glichen, auf diese ?nderungen zuzugreifen! Wenn Sie Gatsbys Entwicklungsserver ausführen, müssen Sie ihn auch neu starten.

Eine kurze Beschreibung, wie das Quell -Plugin für die Vernunft funktioniert

Beim Starten von Gatsby in der Entwicklung oder beim Erstellen einer Website erh?lt das Quell-Plug-In zuerst die GraphQL-Schema-Definition von der von Sanity bereitgestellten GraphQL-API. Das Quell -Plugin verwendet es, um Gatsby mitzuteilen, welche Felder verfügbar sein sollten, um zu verhindern, dass das Inhalt einiger Felder verschwindet. Anschlie?end greift es auf den Exportendpunkt des Projekts zu, der alle zug?nglichen Dokumente in den In-Memory-Datenspeicher von Gatsby gestreamt.

Mit anderen Worten, die gesamte Website ist mit zwei Anfragen erstellt. Durch das Ausführen des Entwicklungsservers wird auch ein H?rer eingerichtet, der in Echtzeit alle ?nderungen von geistiger Gesundheit zu Gatsby vorantreibt, ohne zus?tzliche API -Abfragen durchzuführen. Wenn wir das Quell -Plugin mit dem Token mit Read -Entwurfsgenehmigung zur Verfügung stellen, werden wir die ?nderungen sofort sehen. Dies kann auch durch die Vorschau von Gatsby erlebt werden.

Fügen Sie Kategorie Seitenvorlagen in Gatsby hinzu

Nachdem wir die GraphQL -Schema -Definition und einige Inhalte haben, k?nnen wir in Gatsby mit dem Erstellen von Kategorie -Seitenvorlagen erstellen. Wir müssen zwei Dinge tun:

• Sagen Sie Gatsby, er solle eine Seite für den Kategorieknoten erstellen (dies ist der Begriff "Dokument" für Gatsby).
• Bietet Gatsby eine Vorlagendatei, um HTML -enthaltene Seitendaten zu generieren.

?ffnen Sie zuerst die Datei /web/gatsby-node.js . Es gibt bereits Code, mit dem Blog -Postseiten erstellt werden k?nnen. Wir werden diesen Code haupts?chlich verwenden, aber für Kategorien. Gehen wir Schritt für Schritt gehen:

Zwischen der Funktion createBlogPostPages und der Zeile, die mit exports.createPages beginnt, k?nnen wir den folgenden Code hinzufügen. Ich habe hier Kommentare hinzugefügt, um zu erkl?ren, was los ist:

 // web/gatsby-node.js

// ...

Async Function CreateCategoryPages (GraphQL, Aktionen) {
  // Gatsby -Methode erhalten, um eine neue Seite const {createPage} = Aktionen zu erstellen
  // Gatsbys GraphAPI abfragen, um alle Kategorien aus Sanity zu erhalten // Sie k?nnen diese API unter http: // localhost: 8000/___ GraphQl abfragen
  const result = warte graphQl (`{
    AllsanityCategory {
      Knoten {
        Slug {
          Aktuell
        }
        Ausweis
      }
    }
  }
  `)
  // Wenn in der Abfrage ein Fehler vorliegt, stornieren Sie den Build und teilen Sie uns mit, ob (Ergebnis.Erors) result.eRors

  // Lass uns den Fall anmutig handhaben, in dem AllsanityCatgogy null const categoryNodes = (result.data.AllsanityCategory || {}). Knoten || []

  Kategorynoden
    // durch die Kategorieknoten durchlaufen, aber nichts zurückgibt.foreach ((Knoten) => {
      // dekonstruieren die ID- und Slug -Felder jeder Kategorie const {id, slug = {}} = node
      // Wenn es keine Schnecke gibt, tun wir nichts, wenn (! Slug) zurückkommt

      // URL mit dem aktuellen Schnecken erstellen
      const path = `/kategorien/$ {slug.current}`

      // Erstellen Sie eine Seite mit URL -Pfad und Vorlagendatei und übergeben Sie die ID, mit der wir die richtige Kategorie in der Vorlagendatei abfragen k?nnen
      CreatePage ({{
        Weg,
        Komponente: Request.resolve ('./ Src/templates/category.js'),
        Kontext: {id}
      })
    })
}

Schlie?lich muss diese Funktion am Ende der Datei sein:

 // /web/gatsby-node.js

// ...

exports.createPages = async ({GraphQl, Aktionen}) => {
  Warten Sie CreateBlogPostpages (GraphQL, Aktionen)
  Warten Sie CreateCategoryPages (GraphQL, Aktionen) // 
}

Nachdem wir den Mechanismus haben, um Kategorie -Seitenknoten zu erstellen, müssen wir eine Vorlage hinzufügen, um anzuzeigen, wie sie im Browser tats?chlich aussieht. Wir werden einige konsistente Stile erhalten, die auf vorhandenen Blog -Post -Vorlagen basieren, aber sie dabei ziemlich einfach halten.

 // /web/src/templates/category.js
Import reagieren aus 'reagieren'
Importieren {GraphQL, Link} aus 'Gatsby' '
Container aus '../components/container' importieren '
Importieren Sie GraphQlerrorList aus '../Components/Graphql-Eror-list' '
SEO aus '../components/seo' importieren '
Layout von '../containers/layout' importieren '
Import {getBlogurl} aus '../lib/helpers' '


Export const query = graphql`
  Abfrage categoryTemplateQuery ($ id: string!) {
    Kategorie: SanityCategory (ID: {EQ: $ ID}) {
      Titel
      Beschreibung
      Beitr?ge {
        _Ausweis
        Titel
        ver?ffentlicht
        Slug {
          Aktuell
        }
      }
    }
  }
`

const categoryPostTemplate = props => {
  const {data = {}, fehler} = props
  const {title, Beschreibung, Beitr?ge} = data.category || {}

  Zurückkehren (
    <layout>
      <container>
        {Fehler &&<graphqlerrorlist errors="{errors}"></graphqlerrorlist> }
        {! data.category &&<p> Keine Kategoriendaten</p> }
        <seo title="{Titel}" description="{description}"></seo>
        <h1>Kategorie: {Titel}</h1>
        <p>{Beschreibung}</p>
        {Beitr?ge && (
          
            <h2>Beitr?ge</h2>
            <ul>
              {posts.map (post => (
                <li key="{post._id}">
                  <link to="{getBlogUrl(post.publishedAt," post.slug.current>{post.title}
                </li>
              ))}
            </ul>
          >
        )}
      </container>
    </layout>
  )
}

StandardkategoriepostTemplate exportieren

Dieser Code generiert eine einfache Kategorie -Seite mit einer Liste verknüpfter Beitr?ge - genau wie wir es wollen!

Erstellen Sie eine Kategorie -Seite!

Wir haben gerade einen neuen Seitentyp mit einer benutzerdefinierten Seitenvorlage in Gatsby erstellt. Wir stellen eine Knoten -API von Gatsby mit dem Namen createResolver ein und fügen dem Kategorieknoten ein neues posts hinzu.

Dies sollte Ihnen geben, was Sie ben?tigen, um andere Arten von Klassifizierungsseiten zu erstellen! Haben Sie mehrere Autoren in Ihrem Blog? Sie k?nnen dieselbe Logik verwenden, um Autorseiten zu erstellen. Interessant an GraphQL -Filtern ist, dass Sie es verwenden k?nnen, um über explizite Beziehungen hinauszugehen, die mit Referenzen erstellt wurden. Es kann auch verwendet werden, um andere Felder mit regul?ren Ausdrücken oder String -Vergleiche abzustimmen. Es ist sehr flexibel!

Das obige ist der detaillierte Inhalt vonWie man Taxonomie Seiten mit Gatsby und Sanity.io macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!