Der Dokumentenkopf ist vielleicht nicht der glamouröseste Teil einer Website, aber was darin enthalten ist, ist wohl genauso wichtig für den Erfolg Ihrer Website wie ihre Benutzeroberfläche. Hier teilen Sie Suchmaschinen schließlich etwas über Ihre Website mit und integrieren sie mit Drittanbieteranwendungen wie Facebook und Twitter, ganz zu schweigen von den Assets, die von Analysetools bis hin zu Stylesheets reichen und dort geladen und initialisiert werden.
Eine React-Anwendung lebt im DOM-Knoten, an den sie angehängt wurde. In diesem Sinne ist es nicht offensichtlich, wie der Inhalt des Dokumentenkopfes mit Ihren Routen synchronisiert werden kann. Eine Möglichkeit wäre die Verwendung der Lebenszyklusmethode componentDidMount, wie folgt:
componentDidMount() {
document.title = "Whatever you want it to be";
}Sie möchten jedoch nicht nur den Titel des Dokuments ändern, sondern auch ein Array von Meta- und anderen Tags ändern. Es wird nicht lange dauern, bis Sie zu dem Schluss kommen, dass die Verwaltung des Inhalts des Dokumentenkopfes auf diese Weise ziemlich schnell mühsam und fehleranfällig wird, ganz zu schweigen davon, dass der daraus resultierende Code alles andere als semantisch ist. Es muss offensichtlich einen besseren Weg geben, den Dokumentenkopf mit Ihrer React-Anwendung auf dem neuesten Stand zu halten. Und wie Sie angesichts des Themas dieses Tutorials vermuten könnten, gibt es eine einfache und benutzerfreundliche Komponente namens React Helmet, die von der National Football League entwickelt und gepflegt wird (!).
In diesem Tutorial werden wir eine Reihe gängiger Anwendungsfälle für React Helmet untersuchen, die vom Setzen des Dokumenttitels bis zum Hinzufügen einer CSS-Klasse zum Dokumentkörper reichen. Moment, der Dokumentkörper? Sollte sich dieses Tutorial nicht damit befassen, wie man mit dem Dokumentenkopf arbeitet? Nun, ich habe gute Nachrichten für Sie: React Helmet ermöglicht es Ihnen auch, mit den Attributen der Tags <html> und <body> zu arbeiten; und es versteht sich von selbst, dass wir uns auch damit befassen müssen!
Eine wichtige Einschränkung dieses Tutorials ist, dass ich Sie bitten werde, Gatsby zu installieren – ein statischer Site-Generator, der auf React aufbaut – anstelle von Create React App. Das liegt daran, dass Gatsby serverseitiges Rendering (SSR) Out-of-the-box unterstützt, und wenn wir die volle Leistung von React Helmet wirklich nutzen wollen, müssen wir SSR verwenden!
Warum, könnten Sie sich fragen, ist SSR wichtig genug, um die Einführung eines ganzen Frameworks in ein Tutorial zu rechtfertigen, das sich mit der Verwaltung des Dokumentenkopfes einer React-Anwendung beschäftigt? Die Antwort liegt in der Tatsache, dass Suchmaschinen und Crawler von sozialen Medien schlecht darin sind, Inhalte zu crawlen, die durch asynchrones JavaScript generiert werden. Das bedeutet, dass es in Abwesenheit von SSR keine Rolle spielt, ob der Inhalt des Dokumentenkopfes mit der React-Anwendung synchron ist, da Google ihn nicht kennen wird. Glücklicherweise, wie Sie feststellen werden, ist der Einstieg in Gatsby nicht komplizierter als der Einstieg in Create React App. Ich bin zuversichtlich zu sagen, dass, wenn Sie Gatsby zum ersten Mal begegnen, es nicht Ihre letzte sein wird!
Erste Schritte mit Gatsby und React Helmet
Wie es bei Tutorials wie diesem oft der Fall ist, werden wir zunächst die Abhängigkeiten installieren, mit denen wir arbeiten werden.
Beginnen wir mit der Installation der Gatsby-Befehlszeilenschnittstelle
npm i -g gatsby-cliWährend die Starter-Bibliothek von Gatsby eine Fülle von Projekten enthält, die viele eingebaute Funktionen bieten, werden wir uns auf die grundlegendsten dieser Starterprojekte beschränken, nämlich das Gatsby Hello World Projekt.
Führen Sie Folgendes in Ihrem Terminal aus
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-worldmy-hello-world-starter ist der Name Ihres Projekts. Wenn Sie ihn in etwas anderes ändern möchten, tun Sie das mit allen Mitteln!
Nachdem Sie das Starterprojekt installiert haben, navigieren Sie in sein Stammverzeichnis, indem Sie cd [Name Ihres Projekts]/ im Terminal ausführen. Dort angekommen, führen Sie gatsby develop aus. Ihre Website läuft jetzt unter https://:8000. Wenn Sie src/pages/index.js öffnen und bearbeiten, werden Sie feststellen, dass Ihre Website sofort aktualisiert wird: Gatsby kümmert sich um alle unsere Hot-Reloading-Bedürfnisse, ohne dass wir überhaupt an eine Webpack-Konfigurationsdatei denken – geschweige denn sie berühren – müssen. Genau wie Create React App! Während ich allen JavaScript-Entwicklern empfehle, zu lernen, wie man ein Projekt mit Webpack einrichtet und konfiguriert, um ein detailliertes Verständnis davon zu bekommen, wie etwas funktioniert, ist es schön, all diesen Webpack-Boilerplate-Code abstrahiert zu haben, damit wir unsere Energie darauf konzentrieren können, React Helmet und Gatsby zu lernen!
Als Nächstes werden wir React Helmet installieren
npm i --save react-helmetDanach müssen wir Gatsby Plugin React Helmet installieren, um das serverseitige Rendern von mit React Helmet hinzugefügten Daten zu ermöglichen
npm i --save gatsby-plugin-react-helmetWenn Sie ein Plugin mit Gatsby verwenden möchten, müssen Sie es immer zum Plugins-Array in der Datei gatsby-config.js hinzufügen, die sich im Stammverzeichnis des Projektverzeichnisses befindet. Das Hello World Starterprojekt wird nicht mit Plugins geliefert, daher müssen wir dieses Array selbst erstellen, wie folgt:
module.exports = {
plugins: [`gatsby-plugin-react-helmet`]
}Prima! Alle unsere Abhängigkeiten sind nun vorhanden, das bedeutet, wir können uns dem Kern der Sache zuwenden.
Unser erster Ausflug mit React Helmet
Die erste Frage, die wir beantworten müssen, ist, wo React Helmet in der Anwendung leben soll. Da wir React Helmet auf allen unseren Seiten verwenden werden, ist es sinnvoll, es in einer Komponente zusammen mit den Header- und Footer-Komponenten der Seite zu verschachteln, da diese ebenfalls auf jeder Seite unserer Website verwendet werden. Diese Komponente wird den Inhalt auf allen unseren Seiten umschließen. Diese Art von Komponente wird in der React-Terminologie üblicherweise als "Layout"-Komponente bezeichnet.
Erstellen Sie im Verzeichnis src ein neues Verzeichnis namens components, in dem Sie eine Datei namens layout.js erstellen. Kopieren und fügen Sie anschließend den folgenden Code in diese Datei ein.
import React from "react"
import Helmet from "react-helmet"
export default ({ children }) => (
<>
<Helmet>
<title>Cool</title>
</Helmet>
<div>
<header>
<h1></h1>
<nav>
<ul>
</ul>
</nav>
</header>
{children}
<footer>{`${new Date().getFullYear()} No Rights Whatsoever Reserved`}</footer>
</div>
</>
)Lassen Sie uns diesen Code aufschlüsseln.
Zunächst einmal, wenn Sie neu in React sind, fragen Sie sich vielleicht, was es mit den leeren Tags auf sich hat, die die React Helmet-Komponente und die Header- und Footer-Elemente umschließen. Die Antwort ist, dass React Amok laufen und einen Fehler auslösen würde, wenn Sie versuchen, mehrere Elemente aus einer Komponente zurückzugeben. Lange Zeit gab es keine andere Wahl, als Elemente in einem Elternelement – üblicherweise ein div – zu verschachteln, was zu einem ausgesprochen unangenehmen Elementinspektor-Erlebnis führte, das mit unnützen Divs übersät war. Die leeren Tags, die eine Kurzform für die Deklaration der Fragment-Komponente darstellen, wurden als Lösung für dieses Problem in React eingeführt. Sie ermöglichen es uns, mehrere Elemente aus einer Komponente zurückzugeben, ohne unnötigen DOM-Ballast hinzuzufügen.
Das war ein ziemlicher Umweg, aber wenn Sie so sind wie ich, stört Sie eine gesunde Dosis Code-bezogener Trivia nicht. Auf jeden Fall, lassen Sie uns zum Abschnitt <Helmet> des Codes übergehen. Wie Sie wahrscheinlich aus einem flüchtigen Blick erkennen können, setzen wir hier den Titel des Dokuments, und zwar genau so, wie wir es in einem reinen HTML-Dokument tun würden; eine ziemliche Verbesserung gegenüber dem sperrigen Rezept, das ich in der Einleitung dieses Tutorials aufgeschrieben habe! Der Titel ist jedoch fest codiert, und wir möchten ihn dynamisch setzen können. Bevor wir uns ansehen, wie das geht, werden wir unsere schicke Layout-Komponente in Gebrauch nehmen.
Gehen Sie zu src/pages/ und öffnen Sie index.js. Ersetzen Sie den vorhandenen Code durch diesen
import React from "react"
import Layout from "../components/layout"
export default () =>
<Layout>
<div>I live in a layout component, and life is pretty good here!</div>
</Layout>Das importiert die Layout-Komponente in die Anwendung und liefert das Markup dafür.
Dinge dynamisch machen
Dinge in React fest zu codieren macht wenig Sinn, denn einer der Hauptverkaufsargumente von React ist, dass es einfach ist, wiederverwendbare Komponenten zu erstellen, die durch Übergabe von Props an sie angepasst werden. Wir möchten natürlich Props verwenden können, um den Titel des Dokuments festzulegen, aber wie genau soll der Titel aussehen? Normalerweise beginnt der Dokumenttitel mit dem Namen der Website, gefolgt von einem Trennzeichen und endet mit dem Namen der Seite, auf der Sie sich befinden, wie Website Name | Seitenname oder etwas Ähnliches. Sie haben wahrscheinlich Recht, wenn Sie denken, dass wir dafür Vorlagen-Literale verwenden könnten, und Sie haben vollkommen Recht!
Nehmen wir an, wir erstellen eine Website für ein Unternehmen namens Cars4All. Im folgenden Code sehen Sie, dass die Layout-Komponente jetzt eine Prop namens pageTitle akzeptiert und dass der Dokumenttitel, der nun mit einem Vorlagen-Literal gerendert wird, diese als Platzhalterwert verwendet. Das Festlegen des Dokumenttitels wird nicht schwieriger als das!
import React from "react"
import Helmet from "react-helmet"
export default ({ pageTitle, children }) => (
<>
<Helmet>
<title>{`Cars4All | ${pageTitle}`}</title>
</Helmet>
<div>
<header>
<h1>Cars4All</h1>
<nav>
<ul>
</ul>
</nav>
</header>
{children}
<footer>{`${new Date().getFullYear()} No Rights Whatsoever Reserved`}</footer>
</div>
</>
)Aktualisieren wir index.js entsprechend, indem wir pageTitle auf "Home" setzen
import React from "react"
import Layout from "../components/layout"
export default () =>
<Layout pageTitle="Home">
<div>I live in a layout component, and life is pretty good here!</div>
</Layout>Wenn Sie https://:8000 im Browser öffnen, sehen Sie, dass der Dokumenttitel jetzt Cars4All | Home ist. Sieg! Wie in der Einleitung erwähnt, möchten wir jedoch mehr im Dokumentenkopf tun, als nur den Titel festzulegen. Zum Beispiel wollen wir wahrscheinlich Charset, Beschreibung, Schlüsselwörter, Autor und Viewport-Meta-Tags einfügen.
Wie würden wir das tun? Die Antwort ist genau die gleiche, wie wir den Titel des Dokuments gesetzt haben
import React from "react"
import Helmet from "react-helmet"
export default ({ pageMeta, children }) => (
<>
<Helmet>
<title>{`Cars4All | ${pageMeta.title}`}</title>
{/* The charset, viewport and author meta tags will always have the same value, so we hard code them! */}
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Bob Trustly" />
{/* The rest we set dynamically with props */}
<meta name="description" content={pageMeta.description} />
{/* We pass an array of keywords, and then we use the Array.join method to convert them to a string where each keyword is separated by a comma */}
<meta name="keywords" content={pageMeta.keywords.join(',')} />
</Helmet>
<div>
<header>
<h1>Cars4All</h1>
<nav>
<ul>
</ul>
</nav>
</header>
{children}
<footer>{`${new Date().getFullYear()} No Rights Whatsoever Reserved`}</footer>
</div>
</>
)Wie Sie vielleicht bemerkt haben, akzeptiert die Layout-Komponente keine pageTitle-Prop mehr, sondern stattdessen eine pageMeta-Prop, die ein Objekt ist, das alle Metadaten einer Seite kapselt. Sie müssen die Seitendaten nicht alle auf diese Weise bündeln, aber ich bin sehr abgeneigt gegenüber Props-Ballast. Wenn Daten einen gemeinsamen Nenner haben, werde ich sie immer auf diese Weise kapseln. Ungeachtet dessen aktualisieren wir index.js mit den relevanten Daten
import React from "react"
import Layout from "../components/layout"
export default () =>
<Layout
pageMeta={{
title: "Home",
keywords: ["cars", "cheap", "deal"],
description: "Cars4All has a car for everybody! Our prices are the lowest, and the quality the best-est; we are all about having the cake and eating it, too!"
}}
>
<div>I live in a layout component, and life is pretty good here!</div>
</Layout>Wenn Sie https://:8000 erneut öffnen, die Entwicklertools starten und in den Dokumentenkopf eintauchen, sehen Sie, dass alle Meta-Tags, die wir hinzugefügt haben, vorhanden sind. Unabhängig davon, ob Sie weitere Meta-Tags, eine kanonische URL hinzufügen oder Ihre Website mit Facebook unter Verwendung des Open Graph Protocol integrieren möchten, ist dies der Weg. Eine Sache, die es wert ist, darauf hinzuweisen: Wenn Sie ein Skript zum Dokumentenkopf hinzufügen müssen (vielleicht weil Sie das SEO Ihrer Website verbessern möchten, indem Sie einige strukturierte Daten einfügen), müssen Sie das Skript als Zeichenkette in geschweiften Klammern rendern, wie folgt:
<script type="application/ld+json">{`
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"address": {
"@type": "PostalAddress",
"addressLocality": "Imbrium",
"addressRegion": "OH",
"postalCode":"11340",
"streetAddress": "987 Happy Avenue"
},
"description": "Cars4All has a car for everybody! Our prices are the lowest, and the quality the best-est; we are all about having the cake and eating it, too!",
"name": "Cars4All",
"telephone": "555",
"openingHours": "Mo,Tu,We,Th,Fr 09:00-17:00",
"geo": {
"@type": "GeoCoordinates",
"latitude": "40.75",
"longitude": "73.98"
},
"sameAs" : ["https://#/your-profile",
"http://www.twitter.com/your-profile",
"http://plus.google.com/your-profile"]
}
`}</script>Für eine vollständige Referenz dessen, was Sie in den Dokumentenkopf einfügen können, schauen Sie sich Josh Buecheas großartige Übersicht an.
Die Notfallklappe
Aus welchem Grund auch immer müssen Sie möglicherweise einen Wert überschreiben, den Sie bereits mit React Helmet gesetzt haben – was tun Sie dann? Die cleveren Leute hinter React Helmet haben sich diesen speziellen Anwendungsfall ausgedacht und uns eine Notfallklappe zur Verfügung gestellt: Werte, die in Komponenten gesetzt werden, die sich weiter unten im Komponentbaum befinden, haben immer Vorrang vor Werten, die in Komponenten gesetzt werden, die sich weiter oben im Komponentbaum befinden. Durch die Nutzung dieser Funktion können wir bestehende Werte überschreiben.
Nehmen wir an, wir haben eine fiktive Komponente, die so aussieht
import React from "react"
import Helmet from "react-helmet"
export default () => (
<>
<Helmet>
<title>The Titliest Title of Them All</title>
</Helmet>
<h2>I'm a component that serves no real purpose besides mucking about with the document title.</h2>
</>
)Und dann möchten wir diese Komponente in der Seite index.js einfügen, wie folgt:
import React from "react"
import Layout from "../components/layout"
import Fictitious from "../components/fictitious"
export default () =>
<Layout
pageMeta={{
title: "Home",
keywords: ["cars", "cheap", "deal"],
description: "Cars4All has a car for everybody! Our prices are the lowest, and the quality the best-est; we are all about having the cake and eating it, too!"
}}
>
<div>I live in a layout component, and life is pretty good here!</div>
<Fictitious />
</Layout>Da sich die Fictitious-Komponente im Untergrund unseres Komponentbaums befindet, kann sie den Dokumententitel kapern und ihn von "Home" in "The Titliest Title of Them All" ändern. Obwohl ich es für gut halte, dass diese Notfallklappe existiert, würde ich davon abraten, sie zu verwenden, es sei denn, es gibt wirklich keine andere Möglichkeit. Wenn andere Entwickler Ihren Code übernehmen und keine Kenntnis Ihrer Fictitious-Komponente und dessen, was sie tut, haben, werden sie wahrscheinlich vermuten, dass der Code verflucht ist, und wir wollen unsere Mitentwickler nicht erschrecken! Schließlich sind Kampfflugzeuge mit Schleudersitzen ausgestattet, aber das heißt nicht, dass Kampfpiloten sie benutzen sollten, nur weil sie es können.
Vordringen außerhalb des Dokumentenkopfes
Wie bereits erwähnt, können wir React Helmet auch verwenden, um HTML- und Body-Attribute zu ändern. Es ist zum Beispiel immer eine gute Idee, die Sprache Ihrer Website zu deklarieren, was Sie mit dem HTML-Attribut lang tun. Das wird mit React Helmet so gesetzt:
<Helmet>
/* Setting the language of your page does not get more difficult than this! */
<html lang="en" />
/* Other React Helmet-y stuff... */
</Helmet>Lassen Sie uns nun wirklich die Leistung von React Helmet nutzen, indem wir die pageMeta-Prop der Layout-Komponente eine benutzerdefinierte CSS-Klasse akzeptieren lassen, die dem Dokumentkörper hinzugefügt wird. Bisher war unsere Arbeit mit React Helmet auf eine Seite beschränkt. Wir können die Dinge also wirklich aufpeppen, indem wir eine weitere Seite für die Cars4All-Website erstellen und eine benutzerdefinierte CSS-Klasse mit der pageMeta-Prop der Layout-Komponente übergeben.
Zuerst müssen wir unsere Layout-Komponente ändern. Beachten Sie, dass, da unsere Cars4All-Website nun aus mehr als einer Seite besteht, wir es den Website-Besuchern ermöglichen müssen, zwischen diesen Seiten zu navigieren: Gatsbys Link-Komponente zur Rettung!
Die Verwendung der Link-Komponente ist nicht schwieriger als die Einstellung ihrer to-Prop auf den Namen der Datei, aus der die Seite besteht, zu der Sie verlinken möchten. Wenn wir also eine Seite für die von Cars4All verkauften Autos erstellen und die Seitendatei cars.js nennen, ist die Verlinkung dazu nicht schwieriger, als <Link to="/cars/">Our Cars</Link> einzugeben. Wenn Sie sich auf der Seite "Our Cars" befinden, sollte es möglich sein, zur Seite index.js zurückzukehren, die wir Home nennen. Das bedeutet, wir müssen auch <Link to="/">Home</Link> zu unserer Navigation hinzufügen.
Im Folgenden sehen Sie im neuen Code der Layout-Komponente, dass wir die Link-Komponente von Gatsby importieren und dass die zuvor leere ungeordnete Liste im Head-Element nun mit den Links für unsere Seiten gefüllt ist. Das Einzige, was in der Layout-Komponente noch zu tun ist, ist das Hinzufügen des folgenden Snippets:
<body className={pageMeta.customCssClass ? pageMeta.customCssClass : ''}/>... zum <Helmet>-Code, der eine CSS-Klasse zum Dokumentkörper hinzufügt, wenn eine mit der pageMeta-Prop übergeben wurde. Oh, und da wir eine CSS-Klasse übergeben werden, müssen wir natürlich eine erstellen. Gehen wir zurück zum Verzeichnis src und erstellen ein neues Verzeichnis namens css, in dem wir eine Datei namens main.css erstellen. Zu guter Letzt müssen wir sie in die Layout-Komponente importieren, denn sonst weiß unsere Website nicht, dass sie existiert. Fügen Sie dann das folgende CSS in die Datei ein:
.slick {
background-color: yellow;
color: limegreen;
font-family: "Comic Sans MS", cursive, sans-serif;
}Ersetzen Sie nun den Code in src/components/layout.js durch den neuen Layout-Code, den wir gerade besprochen haben
import React from "react"
import Helmet from "react-helmet"
import { Link } from "gatsby"
import "../css/main.css"
export default ({ pageMeta, children }) => (
<>
<Helmet>
{/* Setting the language of your page does not get more difficult than this! */}
<html lang="en" />
{/* Add the customCssClass from our pageMeta prop to the document body */}
<body className={pageMeta.customCssClass ? pageMeta.customCssClass : ''}/>
<title>{`Cars4All | ${pageMeta.title}`}</title>
{/* The charset, viewport and author meta tags will always have the same value, so we hard code them! */}
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Bob Trustly" />
{/* The rest we set dynamically with props */}
<meta name="description" content={pageMeta.description} />
{/* We pass an array of keywords, and then we use the Array.join method to convert them to a string where each keyword is separated by a comma */}
<meta name="keywords" content={pageMeta.keywords.join(',')} />
</Helmet>
<div>
<header>
<h1>Cars4All</h1>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/cars/">Our Cars</Link></li>
</ul>
</nav>
</header>
{children}
<footer>{`${new Date().getFullYear()} No Rights Whatsoever Reserved`}</footer>
</div>
</>
)Wir werden nur eine benutzerdefinierte CSS-Klasse zum Dokumentkörper auf der Seite cars.js hinzufügen. Daher ist es nicht notwendig, Änderungen an der Seite index.js vorzunehmen. Erstellen Sie im Verzeichnis src/pages/ eine Datei namens cars.js und fügen Sie den folgenden Code hinzu.
import React from "react"
import Layout from "../components/layout"
export default () =>
<Layout
pageMeta={{
title: "Our Cars",
keywords: ["toyota", "suv", "volvo"],
description: "We sell Toyotas, gas guzzlers and Volvos. If we don't have the car you would like, let us know and we will order it for you!!!",
customCssClass: "slick"
}}
>
<h2>Our Cars</h2>
<div>A car</div>
<div>Another car</div>
<div>Yet another car</div>
<div>Cars ad infinitum</div>
</Layout>Wenn Sie zu https://:8000 gehen, sehen Sie, dass Sie nun zwischen den Seiten navigieren können. Darüber hinaus werden Sie beim Aufrufen der Seite cars.js feststellen, dass etwas seltsam aussieht... Hmm, kein Wunder, dass ich mich einen Webentwickler nenne und keinen Webdesigner! Öffnen wir die Entwicklertools, schalten wir den Dokumentenkopf um und navigieren zurück zur Seite index.js. Der Inhalt wird beim Wechseln der Routen aktualisiert!
Das i-Tüpfelchen
Wenn Sie den Quellcode Ihrer Seiten inspizieren, fühlen Sie sich vielleicht ein wenig betrogen. Ich habe eine SSR-React-Website versprochen, aber keine unserer React Helmet-Schönheiten ist im Quellcode zu finden.
Was war der Sinn meiner Gatsby-Fesselung, könnten Sie fragen? Nun, Geduld, junger Padawan! Führen Sie gatsby build im Terminal im Stammverzeichnis der Website aus, gefolgt von gatsby serve.
Gatsby teilt Ihnen mit, dass die Website jetzt unter https://:9000 läuft. Gehen Sie dorthin und inspizieren Sie erneut den Quellcode Ihrer Seiten. Tada, es ist alles da! Sie haben jetzt eine Website, die alle Vorteile einer React SPA hat, ohne auf SEO oder die Integration mit Drittanwendungen und Ähnlichem zu verzichten. Gatsby ist erstaunlich, und es ist meine aufrichtige Hoffnung, dass Sie weiterhin erkunden werden, was Gatsby zu bieten hat.
In diesem Sinne, frohes Codieren!
Danke, das war sehr hilfreich.
Übrigens, in Ihrem letzten Codebeispiel scheint Markdown verwechselt worden zu sein und die öffnende Klammer Ihres Arrays zu einem Link-Öffnungstag gemacht zu haben:
<a href="">"toyota", "suv", "volvo"].Danke für den "Hinweis" (heads up)!