Mars -Thema: Ein tiefem Blick auf das kopflose WordPress -Thema der Frontity

Dieser Artikel wurde vor dem Akquisition von Frontität und seinem Team durch Automattic gestartet. Die Gründer von Frontity planen, den Rahmen in ein Community-gesteuertes Projekt umzuwandeln, wodurch der Stabilität, der fehlfreie Betrieb und die umfassende Dokumentation sichergestellt werden. Wie bei anderen Open-Source-Projekten bleibt die Frontheit kostenlos und bietet Möglichkeiten für Community-Beiträge und Verbesserungen. Weitere Details finden Sie in ihren FAQ.

In meinem vorherigen Artikel wurde detailliert das Erstellen einer kopflosen WordPress -Site mit Frontalität und kurz untersucht. Dieser Artikel befasst sich mit dem @frontity/mars-theme Paket (Mars-Thema) und bietet eine Schritt-für-Schritt-Anpassung zur Anpassung. Das Mars-Thema dient als hervorragender Ausgangspunkt, da das Standardthema der Frontity ähnlich wie WordPress's Twenty-One ist.

Wir werden die Kernkomponenten des Mars -Themas, einschließlich der "Bausteine", untersuchen und die verschiedenen im Paket enthaltenen Komponenten untersuchen. Wir werden Funktionen, Betrieb und Styling mit praktischen Beispielen behandeln.

Beginnen wir!

Inhaltsverzeichnis

• Einführung: Verstehen der Bausteine ​​der Frontity
• Abschnitt 1: Erforschung der Mars -Themenstruktur
• Abschnitt 2: Verwendung der Listenkomponente
• Abschnitt 3: Links, Menüs und vorgestellten Bilder
• Abschnitt 4: Styling eines Frontitätsprojekts
• Abschnitt 5: Anpassen des Mars -Themas an der Grenzen
• Abschnitt 6: Ressourcen und Bestätigungen
• Schlussfolgerung: Endgültige Gedanken und Überlegungen

Die grundlegenden Komponenten der Frontity

Lassen Sie uns die Struktur der Frontity Project-Datei aus dem vorherigen Artikel erneut besuchen und die Kernkomponenten von Frontity: frontity.settings.js , package.json und den Ordner packages/mars-theme Ordner hervorheben. Die Datei package.json enthält wichtige Projektinformationen, einschließlich Name, Beschreibung, Autor und Abhängigkeiten. Zu den wichtigsten Paketen gehören:

• frontity : Das Hauptpaket mit Methoden zur Entwicklung von Apps und der CLI.
• @frontity/core : Griff Bündelung, Rendern, Verschmelzen, Transporenten und Servieren. Direktzugriff ist in der Regel nicht für die App -Entwicklung erforderlich. Eine vollständige Liste befindet sich in der Frontity -Dokumentation.
• @frontity/wp-source : Verbindet sich mit der WordPress-REST-API und holt Daten für das Mars-Thema ab.
• @frontity/tiny-router : Verwalten Sie window.history und Routing.
• @frontity/html2react : Konvertiert HTML in Reagieren und verwenden Prozessoren, um HTML -Abschnitte durch React -Komponenten zu ersetzen.

Die Kern- oder @frontity/package von Frontity (auch als "Baustein" bezeichnet) enthält nützliche React -Komponentenbibliotheken in @frontity/components , Exportieren von Komponenten wie Link , Auto Prefetch Image , Props , Iframe , Switch und anderen Funktionen und Objekten. Detaillierte Beschreibungen und Syntaxinformationen finden Sie in der Paketreferenz -API.

Die Frontity-Dokumentation erläutert den Projektstartprozess: Alle Pakete @frontity/file-settings @frontity/core in frontity.settings.js definiert sind. In diesem Speicher können Sie den Zugriff auf den Zustand und die Aktionen verschiedener Pakete während der Entwicklung unter Verwendung @frontity/connect , dem State Manager von Frontity, dem State Manager von Frontity.

Als nächstes werden wir untersuchen, wie diese Bausteine ​​innerhalb des Mars -Themas verwendet werden, um ein funktionales Frontitätsprojekt mit einem kopflosen WordPress -Endpunkt zu erstellen.

Abschnitt 1: Verständnis der Mars -Themenstruktur

Lassen Sie uns vor der Anpassung uns mit der Dateistruktur des Mars-Themas ( @frontity/mars-theme ) vertraut machen:

 <code>packages/mars-theme/ |__ src/ |__ index.js |__ components/ |__ list/ |__ index.js |__ list-item.js |__ list.js |__ pagination.js |__ featured-media.js |__ header.js |__ index.js |__ link.js |__ loading.js |__ menu-icon.js |__ menu-model.js |__ menu.js |__ nav.js |__ page-error.js |__ post.js |__ title.js</code>

Die Schlüsselkomponenten des Mars -Themas sind: /src/index.js , src/list/index.js und src/components/index.js . Die Frontity -Dokumentation enthält detaillierte Erklärungen, wie diese Komponenten definiert und miteinander verbunden sind. Konzentrieren wir uns auf die drei wichtigsten: Root, Thema und Liste.

THEMEN -Wurzelkomponente ( /src/index.js )

Die Datei src/index.js (das Thema des Themas) ist entscheidend. Es dient als Einstiegspunkt und zielt auf a ab<div> Auf dem Standort markieren Sie die Wurzeln aller installierten Pakete. Ein Frontitätsthema exportiert eine <code>root und andere notwendige Pakete in den DOM. Die Frontitätsdokumentation zeigt dies anhand von Slot- und Füllungsmustern. Ein Beispiel aus dem Mars -Themenpaket zeigt, wie es die Stammkomponente initialisiert:

 // mars-theem/src/components/index.js
// ... (Code für Kürze weggelassen) ...

Die Stammkomponenten exportiert Pakete mit roots , fills , state , actions und libraries . Weitere Details zur Stammkomponente finden Sie in der Frontitätsdokumentation.

Themenkomponente ( /src/components/index.js )

Die Frontity-Themenkomponente ist die vom Theme exportierte Hauptkomponente auf Root-Ebene. Es ist mit der @frontity/connect -Funktion eingewickelt und bietet Zugriff auf state , actions und libraries -Requisiten. Auf diese Weise kann die Themenkomponente den Status lesen, Aktionen verwenden und Code aus anderen Paketen verwenden.

 // mars-theem/src/components/index.js
// ... (Code für Kürze weggelassen) ...

In diesem Beispiel verwendet aus dem Mars -Thema /src/components/index.js state.source.get() , um Daten zum Rendern von Komponenten wie List und Post abzurufen.

Abschnitt 2: Arbeiten mit der Listenkomponente

Der vorherige Abschnitt umfasste Komponenten auf Themenebene. Untersuchen wir nun eine bestimmte Komponente: Liste.

Die Listenkomponente wird von src/components/list/index.js unter Verwendung von @loadable/components zur Codespaltung exportiert. Die Komponente lädt nur, wenn ein Benutzer eine Liste anzeigt. Es wird beim Betrachten eines einzelnen Beitrags nicht gerendert.

Anzeigen von Postlisten

Die src/components/list/list.js -Komponente rendern Listen von Beiträgen mit state.source.get(link) und dem Feld items .

 // src/components/list/list.js
// ... (Code für Kürze weggelassen) ...

Die connect -Funktion bietet Zugriff auf den globalen Staat. list-item.js und pagination.js werden ebenfalls importiert.

Eine Liste von Beiträgen pagieren

Die Pagination ( src/components/list/pagination.js ) ermöglicht es Benutzern, zwischen Seiten der Beiträge zu navigieren.

 // src/components/list/pagination.js
// ... (Code für Kürze weggelassen) ...

Die connect -Funktion gewährt den Zugriff auf den globalen Zustand und die globalen Aktionen.

Einzelne Beiträge anzeigen

Die Post zeigt einzelne Beiträge und Seiten an. Die Struktur ist ähnlich, mit Ausnahme von Beiträgen umfassen Metadaten (Autor, Datum, Kategorien usw.).

 // src/components/post.js
// ... (Code für Kürze weggelassen) ...

Das bedingte Rendering stellt sicher, dass Metadaten nur für Beiträge angezeigt werden, und die aufgeführten Bilder werden basierend auf den Themeneinstellungen angezeigt.

Abschnitt 3: Links, Menüs und vorgestellten Bilder

Die Listenkomponente ist entscheidend für das Anzeigen von Beiträgen. Lassen Sie uns andere wesentliche Komponenten untersuchen.

Die Linkkomponente ( src/components/link.js )

Die MarsLink -Komponente ( src/components/link.js ) ist eine Wrapper um die @frontity/components/link -Komponente.

 // src/components/link.js
// ... (Code für Kürze weggelassen) ...

Es enthält einen Handler, der das mobile Menü schließt, wenn ein Link geklickt wird.

Frontity -Menü ( src/components/nav.js )

Die Nav -Komponente ( src/components/nav.js ) iteriert über Menüelemente, die in frontity.settings.js oder den Frontitätszustand definiert sind, die URLs übereinstimmen und Komponenten im Header anzeigen.

 // src/components/nav.js
// ... (Code für Kürze weggelassen) ...

Die connect bietet Zugriff auf den Zustand. Zusätzliche Menükomponenten ( menu.js und menu-modal.js ) werden für mobile Ansichten bereitgestellt.

Ausgewählte Bildkomponente ( /src/components/featured-media.js )

Die vorgestellten Medien sind im theme.state.featured der Stammkomponente definiert. Der vollständige Code ist in /src/components/featured-media.js .

Abschnitt 4: Styling eines Frontitätsprojekts

Das Styling in der Frontheit unterscheidet sich von WordPress. Die Frontalität bietet wiederverwendbare Komponenten, die mit gestalteten Komponenten und Emotionen, einer CSS-in-JS-Bibliothek, gebaut werden.

Verwenden von gestylerischen Komponenten

Mit gestaltete Komponenten werden die styled Funktion von Emotion erstellt. Zum Beispiel:

 // Button -Styled -Komponente erstellen
importieren {styled} von "Frontity";

const button = styled.div`
  Hintergrund: Lichtblau;
  Breite: 100%;
  Text-Align: Mitte;
  Farbe: weiß;
`;

Verwenden einer CSS -Requisite

Die css -Requisite ermöglicht das Inline -Styling mit Vorlagenliteralen.

 / * Verwenden Sie als CSS -Prop *// *
Import {CSS} von "Frontität";

const pinkbutton = () => (
  <div css="{css`background:" pink>
    Mein rosa Knopf
  </div>
);

Verwenden der<global></global> Komponente

Der<global></global> Komponente wendet ortsweite Stile an.

 // ... (Code für Kürze weggelassen) ...

Abschnitt 5: Anpassen des Mars -Themas an der Grenzen

In diesem Abschnitt wird das Anpassen des Mars -Themas demonstriert. (Detaillierte Beispiele und Code -Ausschnitte, die für die Kürze weggelassen wurden; finden Sie in der ursprünglichen Antwort für vollständige Code -Beispiele.) Zu den wichtigsten Anpassungen gehören:

• Umbenennen des Themaspakets.
• Refactoring Navigation mit dynamischem Menü abrufen (mit dem WP-REST-API V2-Menüs-Plugin).
• Ändern der Dateistruktur für eine bessere Organisation.
• Hinzufügen einer benutzerdefinierten Fußzeilekomponente.
• Anpassen des Themas -Headers.
• Hinzufügen<global></global> Stilkomponenten.
• Implementierung der Flüssigkeitsypografie.
• Hinzufügen von Webfonts.
• Stylingseiten und Beiträge (einschließlich Gutenberg -Blockstile).

Abschnitt 6: Ressourcen und Bestätigungen

(Liste der Ressourcen und Credits, die für die Kürze weggelassen wurden; finden Sie in der ursprünglichen Antwort für die vollständige Liste.)

Schlussfolgerung: Endgültige Gedanken und Überlegungen

Diese Erkundung von Frontalität und sein Mars-Thema unterstreicht seine Anfängerfreundlichkeit, die geringfügige Wartung und seine Kompatibilität mit experimentellen Blockthemen. Die aktuellen Hosting -Kosten und -bereiche zur Verbesserung der Dokumentation werden jedoch festgestellt. Eine weitere Erforschung der Entwicklung der Kopflosen auf dem Standort unter Verwendung von Gatsby und Frontalität sowie der Entwicklung von WordPress -Blockthemen ist geplant.

Das obige ist der detaillierte Inhalt vonMars -Thema: Ein tiefem Blick auf das kopflose WordPress -Thema der Frontity. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!