Erstellen einer Gatsby -Site mit WordPress -Daten

Dieses Tutorial baut auf einem früheren Artikel auf und bietet einen detaillierten Vorstand von Gatsby und WordPress. Die Geschwindigkeits- und Sicherheitsleistungen von Gatsby appellieren an WordPress -Benutzer und bieten eine Möglichkeit, diese Vorteile zu nutzen und gleichzeitig die Erfahrung des bekannten WordPress -Inhaltsmanagements beizubehalten.

Dieser Leitfaden konzentriert sich auf die praktische Implementierung, das Zeichnen verschiedener Ressourcen und die Bewältigung potenzieller Herausforderungen. Beachten Sie, dass WPGRAPHQL und GATSBY CLI aktiv entwickelt wurden, was bedeutet, dass die Versionskompatibilität von entscheidender Bedeutung ist. Dieses Projekt verwendet WPGraphql 0.8.3, gatsby-source-wpgraphql 2.5.1 und Gatsby CLI 2.12.21. Beziehen Sie sich immer auf die offizielle Dokumentation für die neuesten Updates.

Es gibt mehrere ausgezeichnete Gatsby-Starter, darunter Alexandra Spalatos gatsby-wordpress-theme-blog und Zac Gordon und Muhammad Muhsins twenty-nineteen-gatsby-theme .

Voraussetzungen

Um mitzumachen, brauchen Sie:

• Basic React und JavaScript -Wissen. Zahlreiche Online -Ressourcen bieten Einführungsführer an.
• Ein Verständnis für Gatsbys dynamische Mechanismen der Seitenerstellung. Umfassende Tutorials sind leicht verfügbar.
• Eine funktionierende WordPress -Installation. Es gibt viele Guides, um beim Setup zu helfen.

Nutzung bestehender Ressourcen

Dieses Projekt profitierte von früheren Gatsby -Erfahrung und wiederverwendbaren Komponenten (Typografie, Layouts usw.). Zu den wichtigsten Ressourcen gehörten:

• Henrik Wirths umfassender Gatsby WordPress Starter Guide.
• Jason Lenstorfs Jamstack -Migrations -Tutorial.
• Muhammad Muhsins Leitfaden zum Portieren des zwanzig neunzehn Themas.

Dieses Tutorial spiegelt die Struktur von Henrik Wirth wider und lässt erweiterte Funktionen wie Bildhandhabung und flexible ACF -Inhalte aus.

Projektphasen:

1. WordPress und Gatsby Setup
2. Inhaltsmigration
3. Implementierung der Navigation
4. Blog -Post -Display
5. Styling und Einsatz

Phase 1: WordPress und Gatsby einrichten

Beginnen Sie mit der Einrichtung einer WordPress -Site (vorhanden oder neu, sogar eine lokale Installation). Dieses Projekt verwendet das zwanzig zwanzig Thema.

Installieren Sie essentielle Plugins

Installieren Sie WPGRAPHQL (für die GraphQL -API) und WPGraphiql (optional, jedoch hilfreich für Testen von Abfragen). Diese Plugins sind möglicherweise nicht im WordPress -Plugin -Verzeichnis erhältlich. Laden Sie sie direkt von Github herunter und installieren Sie sie manuell. WPGRAPHIQL bietet eine bequeme Testoberfläche im WordPress -Dashboard.

Gatsby Site Initialisierung

Erstellen Sie eine lokale Gatsby -Site mit dem Standardstarter:

 Gatsby New WordPress-Gatsby https://github.com/gatsbyjs/gatsbystarter-default

Starten Sie den Entwicklungsserver ( gatsby develop ) und greifen Sie auf die Starter -Seite unter localhost:8000 zu.

Installieren und konfigurieren Sie das gatsby-source-graphql Plugin:

 Garn addieren Gatsby-Source-Graphql # oder NPM Install-Save Gatsby-Source-Graphql

Konfigurieren Sie gatsby-config.js :

 module.exports = {
  Plugins: [
    {
      Entschlossenheit: "Gatsby-Source-Graphql",
      Optionen: {
        Typname: "Wpgraphql",
        Feldname: "WpContent",
        URL: "https://tinjurewp.com/wp-gatsby/graphql", // oder Umgebungsvariablen verwenden
      },
    },
  ],
};

Erwägen Sie, das dotenv -Modul für Umgebungsvariablen zur Verwaltung sensibler Daten zu verwenden.

Nach dem Neustart des Servers ist die WPGRAPHQL -API über Gatsby unter https://localhost:8000/__graphql/ zugegriffen.

Phase 2: WordPress -Inhalt migrieren

Gatsby erstellt während des Erstellungsprozesses Seiten, indem er Daten mit GraphQL abfragt. Dies beinhaltet die Verwendung von Gatsbys APIs onCreateNode und createPages .

Inhaltsvorbereitung

Fügen Sie Ihrer WordPress -Site Beiträge und Seiten hinzu. Entfernen Sie index.js und page-2.js aus dem Ordner Gatsby pages um Konflikte zu vermeiden.

Vorlageerstellung

Erstellen Sie Vorlagen für Beiträge ( /src/templates/post/index.js ) und Seiten ( /src/templates/page/index.js ):

 // src/templates/post/index.js (Beispiel)
Import reagieren aus "reagieren";
Layout aus "../../components/layout" importieren;
SEO aus "../../components/seo" importieren;

const post = ({pageContext}) => {
  const post = pageContext.post;
  zurückkehren (
    <layout>
      <seo title="{post.title}"></seo>
      <h1 id="post-title">{post.title}</h1>
      <div dangerouslysetinnerhtml="{{" __html: post.content></div>
    </layout>
  );
};

Standardpost exportieren;

createPages API -Implementierung

Verwenden Sie Gatsbys createPages -API, um Seiten aus WordPress -Daten zu generieren. Dies beinhaltet GraphQL -Abfragen und Datenzuordnung. (Siehe den vollständigen Code im verknüpften GitHub -Repository).

Phase 3: Implementierung der Navigation

Das Navigationsmanagement von WordPress ermöglicht das Erstellen von Menüs. Dieser Abschnitt konzentriert sich darauf, das primäre Menü mit Gatsby zu portieren.

Menüerstellung in WordPress

Erstellen Sie ein Menü mit dem Namen "Primary" in WordPress und fügen Sie Links zu Ihrer Homepage, Musterseite und anderen relevanten Inhalten hinzu.

GraphQL -Abfrage

Abfragenmenüelemente mit GraphiQL:

 Fragen Sie MyQuery ab {
  Menuitems (wo: {Ort: primär}) {
    Knoten {
      Etikett
      URL
      Titel
      Ziel
    }
  }
}

Komponentenerstellung

Erstellen Sie Komponenten für Menüelemente ( MenuItem.js ) und das Menü selbst ( Menu.js ), wobei die URL -Konvertierung von Absolute zu relativen Pfaden bearbeitet wird. (Siehe den vollständigen Code im verknüpften GitHub -Repository).

Integration des Menüs

Fügen Sie die Menu Ihrer Layout hinzu. Implementieren Sie eine UniversalLink -Komponente, um sowohl interne als auch externe Links zu verarbeiten.

Phase 4: Anzeigen von Blog -Posts

Diese Phase konzentriert sich auf das Erstellen von Blog -Post -Vorlagen und -Komponenten für die Pagination.

Globale Variablen

Erstellen Sie eine globals.js -Datei, um Einstellungen wie blogURI zu verwalten.

Blog -Vorlage

Erstellen Sie eine Blog -Vorlage ( /src/templates/post/blog.js ), um Beiträge anzuzeigen, wobei die Komponenten PostEntry und Pagination verwendet werden.

Post -Eintragskomponente

Erstellen Sie eine PostEntry , um einzelne Beiträge anzuzeigen, einschließlich vorgestellter Bilder und Auszüge.

Bildkomponente

Erstellen Sie eine Image , die mit den fertigen Bildern, einschließlich Fallback -Bildern, behandelt werden kann.

Paginationskomponente

Erstellen Sie eine Pagination zum Navigieren durch paginierte Pfosten.

Refactoring createPages und createPosts

Refactor createPages.js und createPosts.js Verwenden von GraphQL -Fragmenten, um die Codeorganisation und die Wartbarkeit zu verbessern. (Siehe den vollständigen Code im verknüpften GitHub -Repository).

Phase 5: Styling und Einsatz

Dieser Abschnitt behandelt Styling- und Bereitstellungsstrategien.

Styling

Verwenden Sie SASS oder andere bevorzugte Methoden zum Styling. Erwägen Sie, WordPress-Blockstile mit @wordpress/block-library zu integrieren.

Einsatz

Verwenden Sie Netlify oder andere Plattformen für die kontinuierliche Bereitstellung. Erwägen Sie, das Plugin von JamStack Deployments für automatische Bereitstellungen zu verwenden, die durch WordPress -Änderungen ausgelöst werden.

Dieser umfassende Leitfaden bietet eine solide Grundlage für die Integration von Gatsby und WordPress. Denken Sie daran, das verknüpfte Github -Repository für die vollständigen Code -Beispiele und weitere Details zu konsultieren. Der Prozess beinhaltet mehrere Schritte und erfordert ein gutes Verständnis von Gatsby und WordPress. Das Ergebnis ist jedoch eine schnelle, sichere und wartbare Website.

Das obige ist der detaillierte Inhalt vonErstellen einer Gatsby -Site mit WordPress -Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!