baker example page template
1.0.0
Eine Demonstration, wie man Seiten mit dem Baker-Build-Tool erstellt und veröffentlicht.
Die Los Angeles Times verwendet Baker, um die unter latimes.com/projects veröffentlichten statischen Seiten zu erstellen. Das Times-System basiert auf einer privaten Version eines Repositorys, ähnlich wie diesem. In diesem vereinfachten Beispiel werden Staging- und Produktionsversionen in öffentlichen Buckets auf Amazon S3 veröffentlicht.
Live-Aktualisierung des lokalen Testservers
HTML-Vorlagen mit Nunjucks
Erweitertes CSS mit Sass
JavaScript-Bündelung mit Rollup und Babel
Datenimporte mit quaff
Dynamische Seitengenerierung basierend auf strukturierten Eingaben
Automatische Bereitstellung jedes Zweigs in einer Staging-Umgebung bei jedem push Ereignis über GitHub Action
Bereitstellung per Knopfdruck in der Produktionsumgebung bei jedem release -Ereignis über GitHub Action
Slack-Nachrichten, die den Status jeder Bereitstellung über die Github-Aktion datadesk/notify-slack-on-build weiterleiten
Node.js Version 12, 14 oder 16, mindestens jedoch 12.20, 14.14 oder 16.0.
Knotenpaketmanager
Idiot
Mit ein wenig Konfiguration können Sie diese Vorlage zum einfachen Veröffentlichen einer Seite verwenden. Mit ein wenig Anpassung können Sie es so gestalten, wie Sie es möchten. Dieser Leitfaden führt Sie in die Grundlagen ein.
Erstellen einer neuen Seite
Erkundung des Repositorys
Zugriff auf Vermögenswerte
Auf Daten zugreifen
Dynamische Seiten
Einsatz
Globale Variablen
Baker.config.js
Der erste Schritt besteht darin, auf GitHubs Schaltfläche „Diese Vorlage verwenden“ zu klicken, um eine Kopie des Repositorys für sich selbst zu erstellen.
Sie werden gebeten, einen Slug für Ihr Projekt bereitzustellen. Sobald dies erledigt ist, wird ein neues Repository unter https://github.com/your-username/your-slug verfügbar sein.
Als Nächstes müssen Sie es auf Ihren Computer klonen, um mit dem Code arbeiten zu können.
Öffnen Sie Ihr Terminal und cd in Ihren Code-Ordner. Klonen Sie das Projekt in Ihren Ordner. Dadurch wird das Projekt auf Ihren Computer kopiert.
Git-Klon https://github.com/your-username/your-slug
Wenn dieser Befehl bei Ihnen nicht funktioniert, kann es daran liegen, dass Ihr Computer anders eingerichtet wurde und Sie über SSH in das Repository klonen müssen. Versuchen Sie, dies in Ihrem Terminal auszuführen:
git clone [email protected]:your-username/your-slug.git
Sobald der Download des Repositorys abgeschlossen ist, cd in your-slug und installieren Sie die Node.js-Abhängigkeiten.
npm installieren
Sobald die Abhängigkeiten installiert wurden, können Sie eine Vorschau des Projekts anzeigen. Führen Sie Folgendes aus, um den Testserver zu starten.
npm-Start
Gehen Sie nun in Ihrem Browser zu localhost:3000 . Sie sollten eine Standardseite sehen, die für Ihre Anpassungen bereit ist.
Eine alternative Möglichkeit besteht darin, eine neue Seite mit Bluprint zu erstellen, dem von der Reuters-Grafikabteilung entwickelten Befehlszeilen-Gerüsttool.
Bluprint fügt https://github.com/datadesk/baker-example-page-template hinzu mkdir meine-neue-seitecd meine-neue-seite Bluprint startet Baker-Beispielseite
Hier sind die Standarddateien und -ordner, die Sie finden, wenn Sie ein neues Projekt aus unserer Seitenvorlage klonen. Mit einigen Dateien werden Sie mehr Zeit verbringen als mit anderen, aber es ist gut, einen allgemeinen Überblick darüber zu haben, was sie alle tun.
Der Datenordner enthält relevante Daten für das Projekt. Wir verwenden diesen Ordner, um erforderliche Informationen zu jedem Projekt zu speichern – beispielsweise die URL, unter der es sich befinden soll. Sie können hier auch eine Vielzahl anderer Datentypen speichern, darunter .aml , .csv und .json .
Die meta.aml Datei enthält wichtige Informationen über die Seite wie Überschrift, Byline, Slug, Veröffentlichungsdatum und andere Felder. Durch das Ausfüllen wird sichergestellt, dass Ihre Seite korrekt angezeigt wird und von Suchmaschinen indiziert werden kann. Eine vollständige Liste aller Attribute finden Sie in unseren Referenzmaterialien. Sie können dies um so viele oder so wenige Optionen erweitern, wie Sie möchten.
In diesem Ordner werden die Basisvorlage unserer Website und wiederverwendbare Codefragmente gespeichert. Wenn Sie anfangen, werden Sie hier wahrscheinlich nichts ändern. In komplexeren Anwendungsfällen können Sie hier Code speichern, der auf mehreren Seiten wiederverwendet wird.
base.htmlDie Datei „base.html“ enthält den gesamten grundlegenden HTML-Code, der auf jeder von uns erstellten Seite zu finden ist. Das Beispiel hier ist vom Design her rudimentär. In einer realen Implementierung möchten Sie wahrscheinlich noch viel mehr einbeziehen.
Im Arbeitsbereich können Sie alles ablegen, was für das Projekt relevant ist und nicht im Internet veröffentlicht werden muss. KI-Dateien, Codeteile, Schreiben usw. Es liegt an Ihnen.
Hier werden Medien und andere Assets wie Bilder, Videos, Audio, Schriftarten usw. gespeichert. Sie können über die static Template-Tags in die Seite gezogen werden.
In diesem Ordner werden JavaScript-Dateien gespeichert. Die Hauptdatei für JavaScript heißt app.js und Sie können Ihren Code direkt schreiben. Über npm installierte Pakete können wie jedes andere Node.js-Skript importiert und ausgeführt werden. Sie können andere Dateien erstellen, um Ihren JavaScript-Code in diesen Ordner zu schreiben. Sie müssen jedoch sicherstellen, dass die Datei von app.js gestartet wird.
Unsere Stylesheets sind in SASS geschrieben, einer leistungsstarken Stylesheet-Sprache, die Entwicklern mehr Kontrolle über CSS gibt. Wenn Sie mit SASS nicht vertraut sind, können Sie einfaches CSS in die Stylesheets schreiben.
Der Ordner „Styles“ besteht aus einem Stylesheet ( app.scss ), in dem Sie alle Ihre benutzerdefinierten Stile zu Ihrem Projekt hinzufügen können. Manchmal möchten Sie jedoch möglicherweise zusätzliche Stylesheets erstellen und diese in app.scss importieren. Dieses Beispielprojekt umfasst nur das Nötigste, um eine einfache Site zu simulieren. In einer realen Implementierung möchten Sie wahrscheinlich mit viel mehr beginnen.
In der Datei baker.config.js legen wir Optionen ab, die Baker zum Bereitstellen und Erstellen des Projekts verwendet. Es wurde an anderer Stelle in dieser Datei vollständig dokumentiert. Mit Ausnahme der domain müssen nur fortgeschrittene Benutzer diese Datei ändern.
Die Standardvorlage für Ihre Seite. Hier gestalten Sie Ihre Seite. Es verwendet das Nujucks-Vorlagensystem, um HTML zu erstellen.
Diese Dateien verfolgen die in unseren Projekten verwendeten Knotenabhängigkeiten. Wenn Sie npm install ausführen, werden die von Ihnen hinzugefügten Bibliotheken hier automatisch für Sie nachverfolgt.
Dies ist ein spezielles Verzeichnis zum Speichern von Dateien, die GitHub für die Interaktion mit unseren Projekten und unserem Code verwendet. Das Verzeichnis .github/workflows enthält die GitHub-Aktion, die unsere Entwicklungsbereitstellungen verwaltet. Sie müssen hier nichts bearbeiten.
Dateispeicher im Assets-Verzeichnis werden im Rahmen des Bereitstellungsprozesses optimiert und gehasht. Um sicherzustellen, dass Ihre Verweise auf Bilder und andere statische Dateien erfolgen, sollten Sie das Tag {% static %} verwenden. Dadurch wird sichergestellt, dass die Datei bei der Veröffentlichung stark zwischengespeichert wird und der Link zum Bild in allen Umgebungen funktioniert. Sie möchten es für alle Fotos und Videos verwenden.
<Abbildung>
<img src="{% static 'assets/images/baker.jpg' %}" alt="Baker-Logo" width=200>
</figure> Auf strukturierte Datendateien, die in Ihrem _data -Ordner gespeichert sind, kann über Templatetags oder JavaScript zugegriffen werden. In dieser Demonstration wurde eine Datei namens example.json eingefügt, um zu veranschaulichen, was möglich ist. Andere Dateiformate wie CSV, YAML und AML werden unterstützt.
Dateien im Ordner _data sind in Ihren Vorlagen unter ihrem Namen verfügbar. Mit _data/example.json können Sie also etwas schreiben wie:
{% für obj im Beispiel %}
{{ obj.year }}: {{ obj.wheat }}{% endfor %}Ein häufiger Bedarf für jeden, der ein Projekt in Baker erstellt, ist der Zugriff auf Rohdaten in einer JavaScript-Datei. Oft werden diese Daten dann an Code weitergegeben, der mit d3 oder Svelte geschrieben wurde, um Grafiken zu zeichnen oder HTML-Tabellen auf der Seite zu erstellen.
Wenn die Daten, auf die Sie zugreifen, bereits unter einer URL verfügbar sind, von der Sie vertrauen, dass sie aktiv bleibt, ist dies einfach. Aber was ist, wenn dies nicht der Fall ist und es sich um Daten handelt, die Sie selbst erstellt haben?
Es ist möglich, auf Datensätze in Ihrem _data-Ordner zuzugreifen. Die einzige Einschränkung besteht darin, dass die Konvertierung dieser Datei in einen verwendbaren Zustand in Ihrer Verantwortung liegt. Eine gute Bibliothek hierfür ist d3-fetch .
Um die URL zu dieser Datei so zu erstellen, dass Baker sie versteht, verwenden Sie dieses Format:
import { json } from 'd3-fetch';// der erste Parameter sollte der Pfad zur Datei sein// der zweite Parameter *muss* „import.meta.url“ sein const url = new URL('../_data /example.json', import.meta.url);// Nennen Sie es inconst data = waiting json(url); Ein anderer Ansatz besteht darin, die Daten als script Tag in Ihre Vorlage zu drucken. Der jsonScript -Filter nimmt die ihm übergebene Variable, führt JSON.stringify darauf aus und gibt den JSON-Code in den HTML-Code innerhalb eines <script> -Tags mit der darauf festgelegten ID aus, die Sie als Parameter übergeben.
{{ example|jsonScript('example-data') }}Sobald dies erfolgt ist, können Sie nun den auf der Seite gespeicherten JSON nach ID in Ihrem JavaScript abrufen.
// Holen Sie sich das Element jsonScript, das mit derselben ID erstellt wurde, die Sie inconst übergeben haben dataElement = document.getElementById('example-data');// konvertieren Sie den Inhalt dieses Elements in JSON// machen Sie mit „data“, was Sie tun müssen !const data = JSON.parse(dataElement.textContent); Obwohl die URL-Methode empfohlen wird, kann diese Methode dennoch bevorzugt werden, wenn Sie zusätzliche Netzwerkanfragen vermeiden möchten. Es hat außerdem den zusätzlichen Vorteil, dass keine spezielle Bibliothek erforderlich ist, um .csv Daten in JSON zu konvertieren.
Sie können eine unbegrenzte Anzahl statischer Seiten generieren, indem Sie der Option createPages in der Datei baker.config.js eine strukturierte Datenquelle zuführen. Dieses Snippet generiert beispielsweise eine Seite für jeden Datensatz in der Datei example.json .
Standard exportieren {
// ... alle anderen Optionen über dieser wurden aus Gründen der Verdeutlichung ausgeschlossen
createPages: createPages(createPage, data) {// Holen Sie sich die Daten aus dem _data-Ordnerconst pageList = data.example;// Durchlaufen Sie die Datensätzefor (const d of pageList) { // Legen Sie die Basisvorlage fest, die für jedes Objekt verwendet wird . Es befindet sich im Ordner „_layouts“. const template = 'year-detail.html'; // Legen Sie die URL für die Seite fest const url = `${d.year}`; // Legen Sie die Variablen fest, die an den Kontext der Vorlage übergeben werden const context = { obj: d }; // Verwenden Sie die bereitgestellte Funktion, um die Seite zu rendern createPage(template, url, context);}
},}; Damit könnten URLs wie /baker-example-page-template/1775/ und /baker-example-page-template/1780/] mit einer einzigen Vorlage erstellt werden.
Bevor Sie eine von diesem Repository erstellte Seite bereitstellen können, müssen Sie Ihr Amazon AWS-Konto konfigurieren und Ihrem GitHub-Konto eine Reihe von Anmeldeinformationen hinzufügen.
Zunächst müssen Sie zwei Buckets im S3-Speicherdienst von Amazon erstellen. Eine davon ist für Ihre Staging-Site. Der andere ist für Ihren Produktionsstandort. Für dieses einfache Beispiel sollte jeder öffentliche Zugriff ermöglichen und für die Bereitstellung einer statischen Website konfiguriert sein. In einer ausgefeilteren Variante, wie wir sie bei der Los Angeles Times durchgeführt haben, könnten die Buckets mit registrierten Domänennamen verknüpft und die Staging-Site über ein Authentifizierungsschema vor der Öffentlichkeit geschützt werden.
Die Namen dieser Buckets sollten dann als GitHub-„Geheimnisse“ gespeichert werden, auf die die Aktionen zugreifen können, die die Site bereitstellen. Sie sollten den Einstellungsbereich für Ihr Konto oder Ihre Organisation besuchen. Fügen Sie zunächst diese beiden Geheimnisse hinzu.
| Name | Wert |
|---|---|
BAKER_AWS_S3_STAGING_BUCKET | Der Name Ihres Staging-Buckets |
BAKER_AWS_S3_STAGING_REGION | Die S3-Region, in der Ihr Staging-Bucket erstellt wurde |
BAKER_AWS_S3_PRODUCTION_BUCKET | Der Name Ihres Produktions-Buckets |
BAKER_AWS_S3_PRODUCTION_REGION | Die S3-Region, in der Ihr Produktions-Bucket erstellt wurde |
Als Nächstes sollten Sie sicherstellen, dass Sie über ein Schlüsselpaar von AWS verfügen, mit dem Sie öffentliche Dateien in Ihre beiden Buckets hochladen können. Die Werte sollten auch zu Ihren Geheimnissen hinzugefügt werden.
| Name | Wert |
|---|---|
BAKER_AWS_ACCESS_KEY_ID | Der AWS-Zugriffsschlüssel |
BAKER_AWS_SECRET_ACCESS_KEY | Der geheime AWS-Schlüssel |
Eine in diesem Repository enthaltene GitHub-Aktion veröffentlicht automatisch eine Staging-Version für jeden Zweig. Beispielsweise wird Code, der an den main gepusht wird, unter https://your-staging-bucket-url/your-repo/main/ angezeigt.
Wenn Sie einen neuen Git-Zweig namens bugfix erstellen und Ihren Code pushen würden, würden Sie bald eine neue Staging-Version unter https://your-staging-bucket-url/your-repo/bugfix/ sehen.
Bevor Sie Ihre Seite live senden, sollten Sie sich auf einen endgültigen Slug für die URL einigen. Dadurch wird das Unterverzeichnis in Ihrem Bucket festgelegt, in dem die Seite veröffentlicht wird. Mit dieser Funktion kann The Times zahlreiche Seiten im selben Bucket veröffentlichen, wobei jede Seite von einem anderen Repository verwaltet wird.
Schritt eins besteht darin, den Slug für Ihre URL in die Konfigurationsdatei _data/meta.aml einzugeben.
Slug: Your-Page-Slug
Es ist nie eine schlechte Idee, sicherzustellen, dass Ihre Schnecke nicht bereits genommen wurde. Sie können dies tun, indem Sie https://your-production-bucket-url/your-slug/ besuchen und sicherstellen, dass die Fehlermeldung „Seite nicht gefunden“ zurückgegeben wird.
Wenn Sie Ihre Seite im Stammverzeichnis Ihres Buckets veröffentlichen möchten, können Sie den Slug null lassen.
Schnecke:
Als Nächstes übernehmen Sie Ihre Änderung an der Konfigurationsdatei und stellen sicher, dass sie in den Hauptzweig auf GitHub übertragen wird.
git _data/meta.aml hinzufügen git commit -m „Seiten-Slug festlegen“ Git Push Origin Main
Besuchen Sie den Abschnitt „Releases“ auf der Seite Ihres Repositorys auf GitHub. Sie finden es auf der Homepage des Repos.
Entwerfen Sie eine neue Version.
Dort erstellen Sie eine neue Tag-Nummer. Ein guter Ansatz besteht darin, mit einer Zahl im xxx-Format zu beginnen, die semantischen Versionierungsstandards entspricht. 1.0.0 ist ein guter Anfang.
Klicken Sie abschließend auf den großen grünen Knopf unten und senden Sie die Veröffentlichung.
Warten Sie ein paar Minuten und Ihre Seite sollte unter https://your-production-bucket-url/your-slug/ angezeigt werden.
Der Baker-Testserver kann detaillierter protokollieren, indem er mit der folgenden Option beginnt.
DEBUG=1 npm-Start
So beschränken Sie die Protokolle auf den Baker-Lauf:
DEBUG=baker:* npm start
Wenn Ihr Build nicht erfolgreich ist, können Sie versuchen, die statische Site selbst lokal über Ihr Terminal zu erstellen. Sollten beim Seitenaufbau Fehler auftreten, werden diese auf Ihrem Terminal ausgedruckt.
npm run build
Baker verfügt über einen Satz globaler Variablen, die auf jeder erstellten Seite gleich sind, sowie über einen weiteren Satz seitenspezifischer Variablen, die basierend auf der aktuell erstellten Seite festgelegt werden. Sie können diese Variablen verwenden, um Inhalte bedingt zu Seiten hinzuzufügen oder nicht verwandte Daten basierend auf der aktuellen Seite herauszufiltern.
NODE_ENV Die Variable NODE_ENV hat immer einen von zwei Werten: development oder production . Es entspricht der Art des Builds, der auf der Seite ausgeführt wird.
Wenn Sie npm start ausführen, befinden Sie sich im development . Wenn Sie npm run build ausführen, befinden Sie sich im production .
Dies ist nur dann nützlich, wenn Sie sich im development befinden und Dinge zu Seiten hinzufügen möchten.
{% if NODE_ENV == 'development' %}<p>Das werden Sie nie auf der Live-Site sehen!</p>{% endif %}DOMAIN Die DOMAIN Variable ist immer dieselbe wie die in baker.config.js übergebene domain oder eine leere Zeichenfolge, wenn keine übergeben wurde.
PATH_PREFIX Die Variable PATH_PREFIX ist immer dieselbe wie die in baker.config.js übergebene Option pathPrefix oder ein einzelner Schrägstrich ( / ), wenn keiner übergeben wurde.
page.url Die projektbezogene URL zur aktuellen Seite. Enthält das pathPrefix sofern eines in der Datei baker.config.js angegeben wurde – mit anderen Worten: Es berücksichtigt alle vorgenommenen Projektpfade und zeigt auf die richtige Seite im Projekt.
page.absoluteUrl Die absolute URL zur aktuellen Seite. Dadurch werden domain , pathPrefix und aktueller Pfad zu einer vollständigen URL zusammengefasst. Dies wird derzeit zur Ausgabe der kanonischen URL und aller URLs für soziale <meta> -Tags verwendet.
<link rel="canonical" href="{{ page.absoluteUrl }}">page.inputUrl Dies ist der Pfad zur ursprünglichen Vorlage, die zum Erstellen dieser Seite verwendet wurde, relativ zum Verzeichnis des aktuellen Projekts. Wenn sich eine HTML-Datei unter page-two/index.html befindet, wäre page.inputUrl page-two/index.html .
page.outputUrl Dies ist der Pfad zur HTML-Datei, die zum Erstellen dieser Seite ausgegeben wurde, relativ zum Ordner _dist . Wenn Sie eine HTML-Datei unter page-two.html haben, wäre page.outputUrl page-two/index.html .
Jedes Baker-Projekt, an dem wir arbeiten, enthält eine Datei baker.config.js im Stammverzeichnis. Diese Datei ist für die Weitergabe von Informationen an Baker verantwortlich, damit Ihr Projekt korrekt erstellt werden kann.
Standard exportieren {
// das Verzeichnis, in dem sich die Assets befinden
Vermögenswerte: 'Vermögenswerte',
// Seiten erstellen
createPages: undefiniert,
// das Datenverzeichnis
Daten: '_data',
// eine optionale benutzerdefinierte Domäne, die beim Erstellen von Pfaden verwendet wird
Domäne: undefiniert,
// ein Pfad oder eine Pfadgruppe jedes JavaScript-Einstiegspunkts
Einstiegspunkte: 'scripts/app.js',
// das gesamte Eingabeverzeichnis, normalerweise der aktuelle Ordner
Eingabe: process.cwd(),
// wo sich die Vorlagenlayouts, Makros und Includes befinden
Layouts: '_layouts',
// ein Objekt mit den Schlüsseln und Werten globaler Variablen
// an alle Nunjucks-Vorlagen übergeben
nunjucksVariablen: undefiniert,
// ein Objekt mit Schlüssel (Name) + Wert (Funktion) zum Hinzufügen von benutzerdefinierten
// filtert nach Nunjucks
nunjucksFilter: undefiniert,
// ein Objekt mit Schlüssel (Name) + Wert (Funktion) zum Hinzufügen von benutzerdefinierten
// Tags für Nunjucks
nunjucksTags: undefiniert,
// wohin die kompilierten Dateien ausgegeben werden sollen
Ausgabe: '_dist',
// ein Präfix, das am Anfang jedes aufgelösten Pfads hinzugefügt wird, wie
// Schnecken funktionieren
PfadPräfix: '/',
// ein optionales Verzeichnis zum Ablegen aller Assets, das selten verwendet wird
staticRoot: '',}; Standard: ”assets”
Dadurch wird Baker mitgeteilt, welcher Ordner als Assets-Verzeichnis behandelt werden soll. Sie müssen dies wahrscheinlich nicht ändern.
Standard: undefined
createPages ist ein optionaler Parameter, der es ermöglicht, Seiten mithilfe von Daten und Vorlagen im Projekt dynamisch zu erstellen.
Standard exportieren {
// …
// createPage – eine Vorlage, einen Ausgabenamen und den Datenkontext übergeben
// Daten – die vorbereiteten Daten im Ordner „_data“.
createPages(createPage, data) {for (const title of data.titles) { createPage('template.html', `${title}.html`, {context: { title }, });}
},}; Standard: ”_data”
Die data teilt Baker mit, welchen Ordner er als Datenquelle verwenden soll. Sie müssen dies wahrscheinlich nicht ändern.
Standard: undefined
Die domain Option teilt Baker mit, was beim Erstellen absoluter URLs verwendet werden soll. Das bakery-template ist hierfür auf https://www.latimes.com voreingestellt.
Standard: ”scripts/app.js”
Die Option „ entrypoints teilt Baker mit, welche JavaScript-Dateien als Ausgangspunkte für Skriptpakete verwendet werden sollen. Dies kann ein Pfad zu einer Datei oder einem Datei-Glob sein, sodass mehrere Bundles gleichzeitig erstellt werden können.
Standard: process.cwd()
Die input teilt Baker mit, welchen Ordner er als Hauptverzeichnis für das gesamte Projekt verwenden soll. Standardmäßig ist dies der Ordner, in dem sich die Datei baker.config.js befindet. Sie müssen dies wahrscheinlich nicht festlegen.
Standard: ”_layouts”
Die Option layouts teilt Baker mit, wo sich die Vorlagen, Includes und Makros befinden. Standardmäßig ist dies der Ordner _layouts . Sie müssen dies wahrscheinlich nicht festlegen.
Standard: undefined
Sie können nunjucksFilters verwenden, um Ihre eigenen benutzerdefinierten Filter zu übergeben. Im Objekt ist jeder Schlüssel der Name des Filters, und der Funktionswert ist das, was aufgerufen wird, wenn Sie den Filter verwenden.
Standard exportieren {
// ...
// Übergebe ein Filterobjekt zum Hinzufügen zu Nunjucks
nunjucksFilters: {square(n) { n = +n; return n * n;}
},} {{ Wert|Quadrat }} Standard: undefined
Sie können nunjucksTags verwenden, um Ihre eigenen benutzerdefinierten Tags zu übergeben. Sie unterscheiden sich von Filtern dadurch, dass sie die Ausgabe von Text- oder HTML-Blöcken erleichtern.
Standard exportieren {
// ...
// Übergebe ein Filterobjekt zum Hinzufügen zu Nunjucks
nunjucksTags: {doubler(n) { return `<p>${n} doubled is ${n * 2}</p>`;}
},}; {% Verdoppelungswert %} Standard: ”_dist”
Die output teilt Baker mit, wo Dateien abgelegt werden sollen, wenn npm run build ausgeführt wird. Standardmäßig ist dies der Ordner _dist . Sie müssen dies wahrscheinlich nicht festlegen.
Standard: ”/”
pathPrefix teilt Baker mit, welches Pfadpräfix allen von ihm erstellten URLs hinzugefügt werden soll. Wenn auch domain übergeben wird, wird sie beim Erstellen absoluter URLs mit pathPrefix kombiniert. Normalerweise legen Sie dies nicht manuell fest – es wird bei Bereitstellungen zum Erstellen von URLs mit Projekt-Slugs verwendet.
Standard: ””
Die Option staticRoot weist Baker an, alle Assets in einem zusätzlichen Verzeichnis abzulegen. Dies ist nützlich für Projekte, die auf jeder einzelnen Seite eindeutige Slugs ohne Verschachtelung benötigen, damit alle statische Assets gemeinsam nutzen können. Dies ist jedoch ein Sonderfall und erfordert eine benutzerdefinierte Einrichtung für Bereitstellungen. Versuchen Sie nicht, dies ohne guten Grund zu verwenden.
