Inhalte erstellen, eine hoch optimierte Website erhalten
css
-Prop und dem css
-Template -Tag anInstallieren Sie es mit NPM oder Garn mit einem einfachen Befehl
yarn add contentz
# npm install contentz
Nachdem Sie ContentZ installiert haben, können Sie es mit einem einfachen Befehl verwenden.
contentz build
Dadurch wird Ihre Dateien gelesen und Ihre Website für Sie generiert.
Erstellen Sie eine Konfigurationsdatei namens config.yml
---
title : Sergio Xalambrí
description : Senior Software Engineer and Technical Writer
domain : https://sergiodxa.com
language : en
repository : https://github.com/sergiodxa/personal-site/
email : [email protected]
patreon : sergiodxa
analytics : UA-XXXXXXXXX-2
social :
twitter : sergiodxa
github : sergiodxa
npm : sergiodxa
linkedin : sergiodxa
dev : sergiodxa
meetup : 182915204
navigation :
- name : About
path : /about
- name : Services
path : /services
Option | Beschreibung | Erforderlich |
---|---|---|
Titel | Der Titel der Website, der im <title> und in der Homepage verwendet wird | Nein (Standard: Just another Contentz site ) |
Beschreibung | Die Beschreibung der Website, die in der <meta> und in der Homepage verwendet wird | Nein (Standard: leere Beschreibung) |
Domain | Die Domain, die Sie verwenden werden, um die Website zu hosten, die im RSS -Feed verwendet wird | Ja |
Sprache | Die Hauptsprache der Website, die als Fallback für Artikel und Seiten verwendet wird | Nein (Standard: en) |
Repository | Das GitHub -Repository -Hosting der Website, die im Fußzeilen von Artikeln und Seiten verwendet wird | Nein (Standard: Link zum Bearbeiten ausblenden) |
Ihre E -Mail -Adresse, die auf dem E -Mail -Symbol in der Homepage verwendet wird | Nein (Standard: Symbol ausblenden) | |
Patreon | Ihr Patreon -Benutzername, der in der Homepage und in der Fußzeile verwendet wird | Nein (Standard: Hiden Patreon Nachricht) |
Analyse | Ihre Analytik ua | Nein (Standard: Analytics ausblenden) |
sozial | Eine Liste Ihrer sozialen Netzwerke, die verwendet wird, um sie auf der Homepage zu verknüpfen | Nein (Standard: Soziale Symbole ausblenden) |
Navigation | Eine Liste von Seiten, die im Header verknüpft sind | Nein (Standard: Fügen Sie keine zusätzlichen Links hinzu) |
SW | Stellen Sie es als false wenn Sie die SW -Generation deaktivieren möchten | Nein (Standard: wahr) |
inkrementell | Stellen Sie es als false wenn Sie inkrementelle Build deaktivieren möchten | Nein (Standard: wahr) |
Symbol | Legen Sie den Weg des Favicon der Website fest | Nein (Standard: /static/favicon.png ) |
Senden Sie für andere soziale Netzwerke einen PR mit einem neuen Symbol und fügen Sie eine Möglichkeit hinzu, die URL für dieses Symbol zu formatieren.
Erstellen Sie einen Ordner /articles
und geben Sie Ihre .mdx
-Dateien dort ein. Hier finden Sie einen Beispielbeitrag.
---
title : My super cool article
description : This is the description of the article
date : 2018-01-01T00:00:00.000Z
published : true
---
This is my content, here I could use markdown or import a component and render it.
Führen Sie nun contentz
aus und erstellen Sie ein /public
Verzeichnis mit Ihrer Homepage, Archive -Seite und -artartik. Sie können auf Ihr Archiv AT /articles/
und jeden Artikel als /articles/:article/
In dem Beispiel sehen Sie es möglicherweise unter /articles/my-super-cool-article
.
Für benutzerdefinierte Seiten erstellen Sie einen /pages
-Ordner und geben Sie Ihre .mdx
-Dateien dort ein. Hier finden Sie eine Beispielseite.
---
title : About me
---
Hi! I'm an example page.
Führen Sie jetzt contentz
aus und es erstellen ein /public
Verzeichnis mit Ihrer Homepage und Ihren Seiten. Jede Seite wird auf der Basis der public
gestellt, dh Ihre /pages/about.mdx
kann als /about/
in Ihrem Browser und nicht /pages/about
umgeben werden.
Falls Sie eine Seite haben möchten, um interessante Links zu teilen, können Sie eine link.yml
-Datei zum Stammvermögen Ihres Projekts erstellen. Führen Sie dann contentz
aus und generieren automatisch eine /link/
Seite für Sie mit einer Liste aller Ihrer Links. Jeder Link sollte url
, title
, comment
und date
haben. Beispieldatei:
---
- url : https://sergiodxa.com/
title : Sergio Xalambrí
comment : The website of the creator of Contentz
date : 2019-01-28T19:44:10.945Z
- url : https://sergiodxa.dev/
title : sergiodxa.dev
comment : The alias of the website of the creator of Contentz
date : 2019-01-28T19:44:10.945Z
ContentZ generiert automatisch eine Fehlerseite auf /404.html
, wenn Sie bei der Bereitstellung keine Seiten auf /404.html
umleiten können.
Wenn Sie für Netlify bereitgestellt werden, wird diese Datei automatisch abgeholt.
ContentZ generiert automatisch ein SW für Sie. Dieser SW wird jede Anfrage auf Ihre eigene Website unter Verwendung von location.origin
ausspeichert. Es wird keine Anfrage an eine andere Domäne zwischenspeichern.
Dieses Verhalten kann deaktiviert werden, um sw: false
zu Ihrer config.yml
-Datei hinzuzufügen. Wenn dies hinzugefügt wird, wird auch de sw.js
und load-sw.js
gelöscht, um zwischengespeicherten Zugriff auf die Datei unload-sw.js
zu vermeiden.
ContentZ generiert automatisch ein gültiges RSS -Atom -Feed mit Ihrer Artikelliste, es wird in /atom.xml
platziert und ein <meta>
Tag wird für Sie auf jeder Seite automatisch hinzugefügt, um es aufmerksam zu machen.
Wenn Sie mit statischen Dateien wie Bildern, Videos usw. verlinken möchten, erstellen Sie einen /static
Ordner und geben Sie alle Ihre Dateien dort ein. Wenn Sie content
ausführen, werden sie automatisch in /public/static
kopiert
Falls Sie ein HTML -Tag mit benutzerdefinierten Stilen direkt in Ihrem MDX -Inhalt hinzufügen möchten, können Sie die css
-Prop und das css
-Template -Tag der Emotion verwenden.
Beispiel:
< div css = { { color : "red" } } > This is red </ div >
< div css = { css `color: blue` } > This is blue < / div>
ContentZ erkennt, welche Dateien geändert wurden, und aktualisiert nur die zugehörigen Dateien. Dies bedeutet, wenn Sie nur einen neuen Link hinzufügen /link/
wiederhergestellt werden. Wenn Sie jedoch einen Artikel auf den Artikelseiten ändern, wird die Liste der Artikel und der RSS -Feed regeneriert.
In dem Fall aktualisieren Sie die Konfiguration oder aktualisieren die ContentZ -Version, alle Seiten werden regeneriert.
Wenn Sie dieses Funktionssatz incremental: false
in Ihrer config.yml
abmelden möchten. Dadurch werden frühere Caches automatisch ungültig und erzeugt immer alle Seiten.
ContentZ kann auch automatisch soziale Bilder (auch bekannt als offenes Diagramm) generieren, damit Sie in Ihren Artikeln und Seiten verwenden können. Um es zu verwenden, führen Sie den Befehl aus:
contentz social [path]
Wobei [path]
die Datei ist, mit der das soziale Bild generiert wird. Es könnte auch mehr als eine Datei sein, die einen Speicherplatz zwischen ihnen hinzufügt.
contentz social [path1] [path2]
Ein Pfad könnte ein Weg für einen Artikel, ein Beitrag oder eine der automatisch erzeugten Seiten sein.
Wenn Sie sie zunächst erzeugen möchten
contentz social home articles links error
Nachdem Sie die sozialen Bilder generiert haben, sehen Sie mit Ihren Bildern einen Ordner /static/_social
, Seiten werden in /static/_social/pages
und Artikel in /static/_social/article
platziert. Sonderseiten stehen am Wurzel von _social
.
ContentZ unterstützt i18n außerhalb des Feldes für die festen Texte der Website, Text wie die Patreon -Unterstützung oder bearbeiten Sie auf GitHub. Um die Hauptsprache Ihrer Website zu ändern, setzen Sie die language
oder die lang
(Sprache wird bevorzugt) in den Sprachcode.
Unterstützte Sprachen sind es
für Spanisch und en
für Englisch (Standard für Englisch im Falle eines ungültigen Sprachcode).
Wenn Ihre Sprache nicht unterstützt wird, fügen Sie einen JSON mit den Nachrichten hinzu und laden Sie ihn in die i18n lib. Senden Sie dann eine PR, um es hinzuzufügen.