Im vorherigen Artikel wurde die Gründe für die Verwendung eines statischen Website -Generators erörtert. Kurz gesagt, statische Website -Generatoren erstellen Seitendateien, die nur HTML aus Vorlagen und Rohdaten enthalten (normalerweise in Markdown -Dateien enthalten). Es bietet einige CMS -Vorteile ohne Hosting, Leistung und Sicherheit.
statische Websites können für eine Vielzahl von Projekten geeignet sein, darunter:
im Wesentlichen ist ein statischer Website -Generator ein Gebäudetool. Sie können es verwenden, um Aufgaben auszuführen oder Gerüste wie Sie mit Grunzen oder Schluck zu projizieren.
Der unbestrittene statische Website -Champion ist Jekyll - ein 2008 ins Leben gerufenes Ruby -Projekt. Sie brauchen nicht unbedingt Ruby -Expertise, um Jekyll zu verwenden, aber das hilft. Glücklicherweise haben die meisten beliebten Sprachen eine Vielzahl von statischen Open -Source -Website -Generatoren. Zu den JavaScript -Optionen gehören Hexo, Harfe und Montage. Für einfachere Projekte können Sie auch Build -Tools wie Gulp verwenden.
Ich habe Metalsmith für dieses Tutorial ausgewählt, weil es:
Dieses Tutorial hat eine Demo -Website erstellt. Es wird keine Designpreise gewinnen, aber es zeigt das Grundkonzept. Metalsmith -Build -Code kann über das GitHub -Repository überprüft und installiert werden. Alternativ können Sie die Anweisungen hier befolgen und Ihre eigene grundlegende Website erstellen.
Ich habe ein paar Mal Metalsmith verwendet, um dies nicht zu tun, um jede statische Website zu erstellen!
Stellen Sie sicher, dass Sie Node.js installiert haben (z. B. mit NVM) und dann ein neues Projektverzeichnis wie das Projekt erstellen und Ihre Paket.json -Datei initialisieren:
<code>cd project && cd project npm init -y </code>
Metalsmith jetzt und die verschiedenen Plugins installieren, mit denen wir die Site erstellen werden. Dies sind:
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
Wir werden die folgende Struktur als Quelle (SRC) und Build (Build) in unserem Projekt verwenden.
Sie können wie folgt Beispieldateien erstellen oder sie direkt aus dem Demo SRC -Verzeichnis kopieren.
Seiten -Markdown -Datei ist in SRC/HTML enthalten. Dies kann ein Unterverzeichnis der ersten Stufe für jeden Website-Abschnitt enthalten, d. H.
Jedes Verzeichnis enthält eine index.md -Datei, die die Standardseite für diesen Abschnitt ist. Andere Seiten können jeden einzigartigen Namen verwenden.
Der Erstellungsprozess wandelt diese Dateien in verzeichnisbasierte Permalinks um, z. B.
Jede Markdown -Datei enthält Inhalte und Meta -Informationen, die als "Vorwort" bezeichnet werden, oben zwischen den Markierungen, z
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
Obwohl andere Optionen unterstützt werden, wird das Lenker -Vorlagensystem verwendet. Eine typische Vorlage erfordert ein {{{Inhalt}}} Tag, um den Seiteninhalt und alle Vorwortwerte wie {{{title}}:
zu enthalten<code>cd project && cd project npm init -y </code>
Die Verweise auf {{& gt;
Teil
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
statische Vermögenswerte
benutzerdefiniertes Plugin
bauen Verzeichnis
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
Metalsmith Plugin
Dieses einfache Beispiel protokolliert alle Metadaten- und Seiteninformationen in die Konsole (es kann in Build.js definiert werden):
<code>
lang="en">
>
{{> meta }}
>
>
{{> header }}
<main>></main>
>
{{#if title}}
<h1>></h1>{{ title }}>
{{/if}}
{{{ contents }}}
>
>
{{> footer }}
>
>
</code>Metalsmith -Build -Code kann aktualisiert werden, um dieses Plugin zu verwenden:
<code>{{> partialname }}</code>Diese Debugging -Funktion kann Ihnen helfen, Ihre eigenen benutzerdefinierten Plugins zu erstellen. Die meisten Funktionen, die Sie möglicherweise benötigen, sind bereits geschrieben - es gibt eine lange Liste von Plugins auf der Metalsmith -Website.
Die Hauptteile der Demo -Site -Build -Datei werden unten erläutert.
Wenn die Umgebungsvariable node_env auf die Produktion gesetzt ist (Export node_env = Produktion auf Mac/Linux oder node_env = Produktion unter Windows), wird das variable DevBuild auf true eingestellt:
<code>cd project && cd project npm init -y </code>
Home -Verzeichnis ist im Dir -Objekt definiert, damit wir sie wiederverwenden können:
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
Metalsmith und Plug-in-Module laden. Hinweis:
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
<code>
lang="en">
>
{{> meta }}
>
>
{{> header }}
<main>></main>
>
{{#if title}}
<h1>></h1>{{ title }}>
{{/if}}
{{{ contents }}}
>
>
{{> footer }}
>
>
</code>Das
<code>{{> partialname }}</code>
<code>// basic build
'use strict';
var
metalsmith = require('metalsmith'),
markdown = require('metalsmith-markdown'),
ms = metalsmith(__dirname) // the working directory
.clean(true) // clean the build directory
.source('src/html/') // the page source directory
.destination('build/') // the destination directory
.use(markdown()) // convert markdown to HTML
.build(function(err) { // build the site
if (err) throw err; // and throw errors
});
</code>
<code>function debug(logToConsole) {
return function(files, metalsmith, done) {
if (logToConsole) {
console.log('\nMETADATA:');
console.log(metalsmith.metadata());
for (var f in files) {
console.log('\nFILE:');
console.log(files[f]);
}
}
done();
};
};
</code>Metalsmith-Sammeln ist eines der wichtigsten Plugins, da sie eine Kategorie oder Taxonomie auf der Grundlage ihres Standorts oder anderen Faktoren im Quellverzeichnis zuweist. Es kann Dateien mithilfe von Vormitteln wie Daten oder Prioritäten neu ordnen und ermöglicht Ihnen, benutzerdefinierte Metadaten für die Sammlung festzulegen. Code -Definition:
<code>ms = metalsmith(__dirname) // the working directory
.clean(true) // clean the build directory
.source('src/html/') // the page source directory
.destination('build/') // the destination directory
.use(markdown()) // convert Markdown to HTML
.use(debug(true)) // *** NEW *** output debug information
.build(function(err) { // build the site
if (err) throw err; // and throw errors
});
</code>Die Startsammlung jeder Datei im Verzeichnis SRC/HTML/START. Es sortiert sie nach Prioritätswerten, die in der vorherigen Frage in der Datei festgelegt sind.
<code>devBuild = ((process.env.NODE_ENV || '').trim().toLowerCase() !== 'production') </code>
Metalsmith-Wort-Count berechnet die Anzahl der Wörter in einem Artikel und berechnet, wie lange es dauert, um sie zu lesen. Parameter {RAW: TRUE} Ausgabe nur Zahlen:
<code>dir = {
base: __dirname + '/',
lib: __dirname + '/lib/',
source: './src/',
dest: './build/'
}
</code>Moremeta ist ein weiteres benutzerdefiniertes Plugin, das in lib/metalsmith-moremeta.js enthalten ist. Es fügt jeder Datei andere Metadaten an:
<code>metalsmith = require('metalsmith'),
markdown = require('metalsmith-markdown'),
publish = require('metalsmith-publish'),
wordcount = require("metalsmith-word-count"),
collections = require('metalsmith-collections'),
permalinks = require('metalsmith-permalinks'),
inplace = require('metalsmith-in-place'),
layouts = require('metalsmith-layouts'),
sitemap = require('metalsmith-mapsite'),
rssfeed = require('metalsmith-feed'),
assets = require('metalsmith-assets'),
htmlmin = devBuild ? null : require('metalsmith-html-minifier'),
browsersync = devBuild ? require('metalsmith-browser-sync') : null,
// custom plugins
setdate = require(dir.lib + 'metalsmith-setdate'),
moremeta = require(dir.lib + 'metalsmith-moremeta'),
debug = consoleLog ? require(dir.lib + 'metalsmith-debug') : null,
</code>Plugin -Code ist komplizierter, da er die Navigation behandelt. Wenn Sie eine einfachere Hierarchie benötigen, gibt es einfachere Optionen.
<code>cd project && cd project npm init -y </code>
Die Plugins mit Metalsmith und Metalsmith-Layouts steuern das In-Page- und Vorlagenlayout. Übergeben Sie das gleiche TemplateConfig -Objekt wie oben definiert:
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
Wenn Htmlmin eingestellt ist (im Produktionsbau), können wir HTML komprimieren:
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
Debugg ist das endgültige benutzerdefinierte Plugin, das in lib/metalsmith-debug.js enthalten ist. Es ähnelt der oben beschriebenen Debug -Funktion:
<code>
lang="en">
>
{{> meta }}
>
>
{{> header }}
<main>></main>
>
{{#if title}}
<h1>></h1>{{ title }}>
{{/if}}
{{{ contents }}}
>
>
{{> footer }}
>
>
</code>Starten Sie den BrowserSync -Testserver, damit wir den Entwicklungsbau testen können. Wenn Sie es noch nicht benutzt haben, sieht es wie Magie aus: Jedes Mal, wenn Sie eine Änderung vornehmen, wird Ihre Website auf magische Weise aktualisiert, und wenn Sie auf der Website scrollen oder durchsuchen, werden die Ansichten in zwei oder mehr Browsern synchronisieren:
<code>{{> partialname }}</code>Schließlich können wir:
<code>// basic build
'use strict';
var
metalsmith = require('metalsmith'),
markdown = require('metalsmith-markdown'),
ms = metalsmith(__dirname) // the working directory
.clean(true) // clean the build directory
.source('src/html/') // the page source directory
.destination('build/') // the destination directory
.use(markdown()) // convert markdown to HTML
.build(function(err) { // build the site
if (err) throw err; // and throw errors
});
</code>Der Rest ist der letzte Schritt. Build (), um die Website zu erstellen:
<code>function debug(logToConsole) {
return function(files, metalsmith, done) {
if (logToConsole) {
console.log('\nMETADATA:');
console.log(metalsmith.metadata());
for (var f in files) {
console.log('\nFILE:');
console.log(files[f]);
}
}
done();
};
};
</code>Wenn Sie fertig sind, können Sie Node ./build.js erneut ausführen, um Ihre statische Website zu erstellen.
Ich habe beim Erstellen einer einfachen Metalsmith -Website viel gelernt, aber sind Sie uns der folgenden Probleme bewusst:
Plugins können mit anderen Plugins in Konflikt stehen. Beispielsweise ist die Berechnung des Metalsmith-Wurzelwegs des relativen Wurzelpfads nicht sehr kompatibel mit Metalsmith-Permalinks, die benutzerdefinierte Build-Verzeichnisstrukturen erstellen. Ich habe dieses Problem gelöst, indem ich den benutzerdefinierten Root-Pfad-Berechnungscode im lib/metalsmith-moremeta.js-Plugin geschrieben habe.
Wenn die Plugins in die falsche Reihenfolge platziert werden, können die Plugins von oder Konflikten abhängen. Zum Beispiel muss das Metalsmith-Feed-Plugin, das RSS erzeugt, nach Metalsmith-Layouts aufgerufen werden, um sicherzustellen, dass RSS XML in der Seitenvorlage nicht generiert wird.
Wenn BrowserSync die Datei ausführt und bearbeitet, wird die Sammlung neu gestaltet, aber die alten Daten scheinen immer noch zu existieren. Dies kann ein Problem mit dem benutzerdefinierten Plugin von lib/metalsmith-moremeta.js sein, aber das Menü sowie die Vorder- und Rücklinks können nicht synchronisiert sein. Um es zu beheben, stoppen Sie den Build und starten Sie den Build mithilfe von Strg/CMD C neu.
Personen, die Taskmanager wie Gulp verwenden, werden feststellen, dass Metalsmith einen vertrauten Build -Prozess bietet. Es gibt Plug-Ins für CSS-Vorverarbeitung, Bildkomprimierung, Dateiverbindung, Verleumdung und mehr mit SASS. Für einen einfacheren Prozess könnte es ausreichen.
Gulp verfügt jedoch über eine breitere Auswahl an Plugins und ermöglicht komplexe Build-Aktivitäten wie FINT-, Bereitstellungs- und PostCSS-Verarbeitung mithilfe von Auto-Prefixer. Es gibt einige Gulp/Metalsmith -Integrations -Plugins, obwohl ich einige Probleme habe und nicht erforderlich sein sollte, da Gulp -Aufgaben Metalsmith direkt ausführen können, z
<code>cd project && cd project npm init -y </code>
Ist Metalsmith für Sie geeignet?
Das Erstellen eines Metalsmith -Build -Systems braucht Zeit, und wir haben nicht die Arbeit in HTML -Vorlagen und Bereitstellungen berücksichtigt. Sobald Sie jedoch einen Prozess zur Verfügung haben, wird das Hinzufügen, Bearbeiten und Löschen von Markdown -Dateien jedoch sehr einfach. Es kann einfacher sein als die Verwendung von CMS, und Sie haben alle Vorteile einer statischen Website.
FAQs über das Erstellen statischer Websites mit Metalsmith
Wie installiere ich Metalsmith?
Wie erstelle ich ein neues Metalsmith -Projekt?
Um Ihrem Metalsmith -Projekt Plugins hinzuzufügen, müssen Sie sie über NPM installieren und dann in Ihrer Metalsmith -Konfigurationsdatei verweisen. Um das Markdown-Plugin hinzuzufügen, müssen Sie zunächst die NPM-Installation von Metalsmith-Markdown ausführen. In Ihrer Konfigurationsdatei müssen Sie var markdown = Require ('Metalsmith-Markdown') hinzufügen. )) Gehen Sie zu Ihrer Metalsmith -Build -Kette.
Um Ihre Metalsmith -Website zu erstellen, müssen Sie den Befehlsmitglied im Terminal ausführen. Dadurch werden alle Dateien zusammengefasst und in das Build -Verzeichnis ausgegeben, das Sie dann auf Ihrem Server bereitstellen können.
Um das Layout Ihrer Metalsmith -Website anzupassen, können Sie Vorlagenmotoren wie Lenker oder Jade verwenden. Mit diesen können Sie wiederverwendbare Vorlagen für verschiedene Teile Ihrer Website erstellen, z. B. Header, Fußzeilen und einzelne Seiten.
Um Ihrer Metalsmith -Website Inhalte hinzuzufügen, können Sie im Quellverzeichnis eine Markdown -Datei erstellen. Beim Erstellen einer Website werden diese Dateien in HTML konvertiert. Sie können auch CMS wie Netlify CMS verwenden, um Ihre Inhalte zu verwalten.
Um Ihre Metalsmith -Website bereitzustellen, können Sie Dienste wie Netlify- oder Github -Seiten verwenden. Diese Dienste hosten Ihre statische Website und stellen automatisch Änderungen bereit, wenn Sie in das Repository drücken.
Um Ihre Metalsmith -Website zu aktualisieren, ändern Sie einfach die Quelldatei und Ihre Website neu. Änderungen werden im Build -Verzeichnis widerspiegelt, die Sie dann auf Ihrem Server bereitstellen können.
Ja, Metalsmith ist sehr skalierbar und kann für große und komplexe Websites verwendet werden. Mit der modularen Struktur können Sie bei Bedarf Funktionen hinzufügen, und die Verwendung statischer Dateien bedeutet, dass sie viele Inhalte ohne Verlangsamung verarbeiten kann.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine statische Seite mit Metalsmith. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
