Der einfachste Node.js CMS & SSG!
Eine winzige Flamme in der Dunkelheit des Fehlers ...
Wichtig
Diese Dokumentation repräsentiert nicht mehr die verschiedenen Funktionen von Blog-Doc. Bitte wenden Sie sich an die umfassende Dokumentation, um aktuelle Informationen zu den Funktionen von Blog-Doc zu erhalten.
Um Blog-Doc on Space zu installieren, überlegen Sie sich die Installationsseite und klicken Sie auf die Schaltfläche Install App
.
Öffnen Sie nach der Installation die App aus Ihrem Horizont oder greifen Sie auf die Builder -Instanz der App zu und klicken Sie auf die Schaltfläche Open Builder Instance
.
Sie werden in die Adresse der App umgeleitet und in Ihrem Browser die folgende Nachricht: Route Not Found
.
Bitte flippen Sie nicht aus! Ich habe einige andere Möglichkeiten ausprobiert, aber dies ist die einfachste und sicherste.
Angenommen, Ihre Instanz von Blog-Doc hat die folgende Adresse:
https://abc-1-x234.deta.app
in der Adressleiste Ihres Browsers.
Fügen Sie nach dem /admin-blog-doc-config
hinzu, die Adresse lautet jetzt:
https://abc-1-x234.deta.app/admin-blog-doc-config
, klicken Sie auf die Eingabetaste.
Sie werden zu einer Seite umgeleitet, auf der Sie die Hauptkonfiguration festlegen, um mit dem Blog-Doc zu beginnen, 2 einfache Schritte von 2 Minuten.
Am Ende reichen Sie ein Formular ein, dauert höchstens 30 Sekunden, um die Konfiguration hochzuladen. Dann werden Sie an die erste Adresse https://abc-1-x234.deta.app
umgeleitet und sehen Sie erneut: Route Not Found
: Route: Route Route Not Found
.
Wieder in Panik! Fügen Sie einfach "/Seiten/Dokumentation" nach der Adresse hinzu. Stöbern Sie für eine Minute in der App (Zeit für den Code, um mit dem neu erstellten Laufwerk zu interagieren), ohne die Heimroute zu besuchen, dann gehen Sie zur Hauptroute und verwenden Sie Ihre eigene Instanz von Blog-Doc?
Wenn es nicht vom ersten Mal nicht funktioniert, machen Sie es noch einmal wieder und es wird es tun.
siteURL
vor der Bereitstellung der Anwendung ändern.
Nota Bene: Die lebende URL muss mit einem Schrägstrich enden /
Natürlich müssen Sie auch siteTitle
, siteDescription
und rssCopyright
auf der Seite "Einstellungen" ändern.
Sie sollten die Werte von siteTitle
, siteDescription
und rssCopyright
durch die Ihrer Website ersetzen.
Sie können den Wert rssSiteLanguage
durch die Sprache Ihrer Website ersetzen.
Eine Liste der verfügbaren Sprachcodes finden Sie auf der Seite der RSS -Sprachcodes.
⬆️ Zurück zu Funktionen
Wie beim RSS -Feed müssen Sie die Live -URL Ihrer Website auf der Seite "Einstellungen" angeben, indem Sie den siteURL
-Wert ändern, um die richtigen Links für jede Seite, Post, Tag und Vorlage sowie für die Blog -Routen zu generieren.
Bitte denken Sie daran, dass die URL der Website mit einem Schrägstrich enden muss /
Sie können die Sitemap Ihrer Website unter der Route /sitemap
überprüfen.
⬆️ Zurück zu Funktionen
Blog-Doc verfügt über eine integrierte Suchfunktion.
Mit der Suchfunktion können ein Benutzer die Titel und den Inhalt der Beiträge recherchieren.
Sie können die Suche Ihrer Website unter der Route /search
überprüfen.
Sie können die Suche in der App node.js sowie für die generierte statische Site deaktivieren, indem Sie searchFeature
einen Wert von false
auf der Seite "Site -Einstellungen" geben.
⬆️ Zurück zu Funktionen
Blog-doc verwendet Highlight.js, um den Codeblock zu hervorheben.
Um Inline -Code zu schreiben, umgeben Sie Ihren Code mit Backticks ``
.
Um sie hervorzuheben, geben Sie die Sprache für den Inline -Code an, indem Sie einen lockigen Klammern mit dem Alias der Sprache des Codes einstellen.
Die folgenden Beispiele geben Ihnen eine bessere Idee.
Angenommen, diese css
-Zeile p : color { red }
, um sie hervorzuheben, werden Sie `p { color: red }`{language=css}
schreiben.
Der Code ist von Backticks ``
umgeben und gefolgt von {language=alias of code language}
.
Um einen Codeblock zu schreiben, umgeben Sie Ihren Block mit einem Paar von 3 Backticks ```
.
Um es hervorzuheben, geben Sie den Alias der Sprache für den Block kurz nach den ersten 3 Backticks an.
Wir werden das vorherige Beispiel nehmen und es als Block hervorheben:
```css
p { color: red }
```
Wir erhalten die folgende Ausgabe:
p {
color : red;
}
Besuchen Sie die unterstützten Sprachen von highlight.js, um den richtigen Alias zu erhalten, wenn Sie sich nicht sicher sind.
Alternativ können Sie einen Codeblock schreiben, ohne einen Alias bereitzustellen. Highlight.js erkennt die Sprache automatisch.
Wenn der Textmarker die richtige Sprache für einen Codeblock ohne Alias nicht erkennt, fügen Sie einfach die gewünschte Sprache zum Block hinzu, wie oben angegeben.
⬆️ Zurück zu Funktionen
Das Hinzufügen eines id
-Attributs zu einem Überschriften -Tag, nur H2 bis H4, ist standardmäßig eine optionale aktivierte Funktion.
Diese Funktion wurde aus Randkoffern und Tippfehlern erstellt: Tippfehler: Tippfehler:
Um eine id
hinzuzufügen, fügen Sie einen lockigen Zahnspangen mit einem Hashtag hinzu, gefolgt vom Text der ID.
Die folgenden Beispiele geben Ihnen eine bessere Idee:
<!-- Heading tags with an id property -->
## My awesome H2 title {# my-awesome-h2-title}
The HTML output will be : < h2 id = " my-awesome-h2-title " >My awesome H2 title</ h2 >
### My awesome H3 title {# my awesome h3 title}
The HTML output will be : < h3 id = " my-awesome-h3-title " >My awesome H3 title</ h3 >
#### My awesome H4 title {# My awesome H4 title}
The HTML output will be : < h4 id = " my-awesome-h4-title " >My awesome H4 title</ h4 >
Jede Whitespace wird automatisch durch einen Bindestrich ersetzt und eine beliebige Anzahl von Bindestrichen aufeinanderfolgend wird nur durch einen Bindestrich ersetzt.
Eine beliebige Anzahl von Bindestrichen zu Beginn oder am Ende des ID -Textes wird entfernt, sodass das Folgende auch gültig ist:
## My awesome H2 title { # ----- My ----- aWEsOMe ----- h2 ----- tITlE ----- }
Whatever the number of whitespace characters / hyphens is at the beginning,
between the words or at the end, the HTML output will still be :
< h2 id = " my-awesome-h2-title " >My awesome H2 title</ h2 >
Alles vor dem letzten Hashtag wird ignoriert und Sonderzeichen im ID -Text werden ebenfalls ignoriert:
## My awesome H2 title { /!@# a comment ?%^& # -my= awesome+ h2 ( title ) | }
The HTML output will be : < h2 id = " my-awesome-h2-title " >My awesome H2 title</ h2 >
& will be parsed to amp (ampersand)
" will be parsed to quot (quotation)
> will be parsed to gt (greater then)
< will be parsed to lt (less then)
Als Beispiel:
## Honey & Bees {#Honey & Bees}
The HTML output will be : < h2 id = " honey-amp-bees " >Honey & Bees</ h2 >
Wenn Sie diese Funktion deaktivieren möchten, legen Sie den Wert addIdsToHeadings
auf der Seite "Site -Einstellungen" auf false
fest.
⬆️ Zurück zu Funktionen
Da Blog-Doc in ein CMS wurde, habe ich geplant, eine Galerie hinzuzufügen und Bilder für die Seiten und Beiträge direkt abzurufen.
Jetzt ist es fast fertig. Fast, weil es immer Platz gibt, um Verbesserungen zu erzielen.
Im Moment können Sie die Galerie besuchen, indem Sie auf die Route /admin/gallery/images
klicken oder zur Administrationsseite gehen und auf den Link der Galerie im Menü oder auf der Karte klicken.
Im globalen Geist von Blog-Doc ist die Galeere ziemlich einfach zu bedienen.
Sie finden eine Drop -Zone, in der Sie Ihre Bilder fallen lassen oder darauf klicken und die Bild (n) auswählen können, die Sie hochladen möchten.
Sie können auch ein Bild aus der Galerie löschen, indem Sie auf die Schaltfläche "Löschen" klicken.
Um einer Seite oder einem Beitrag ein Bild zuzuweisen, können Sie beim Erstellen oder Aktualisieren ein Bild aus der Galerie auswählen, indem Sie es direkt auf der Seite oder dem Beitrag auswählen.
⬆️ Zurück zu Funktionen
(bald in den Weltraum)
Sie können zwischen Themen wechseln und das Design auswählen, das Ihren Anforderungen entspricht.
Blog-Doc kommt mit:
Wenn ein Bild mehr als tausend Worte wert ist, ist ein Video eine Million wert!
Ein 30-Sekunden-Video mit der Möglichkeit, das Erscheinungsbild Ihrer Website sofort mit Blog-Doc zu ändern.
Ich werde im Laufe der Zeit weitere Themen zum Blog-Doc hinzufügen.
Wenn Sie ein Thema für Blog-Doc codiert haben und es unter den verfügbaren Themen auflisten möchten, können Sie mich in den Diskussionen des Repositorys von Blog-Doc in der Kategorie Ideen informieren.
Bitte beachten Sie, dass Blog-Doc-Themen nur ein einfaches JavaScript verwenden dürfen und keine Code oder Bild (en) enthalten, die Veröffentlichungs- und/oder Verteilungsbeschränkungen haben!
⬆️ Zurück zu Funktionen
Mit aller Zeit und der harten Arbeit jedes Entwicklers, der einen statischen Site-Generator mit Node.js erstellt hat, einschließlich der vorherigen Versionen von Blog-Doc , sind das Gasworks!
Ich biete meinen aufrichtigen Entschuldigungen im Voraus jedem dieser Entwickler an, aber eine App soll kein Gaswerk sein ...
Während die folgenden Beiträge für die tatsächliche Version von Blog-Doc nicht mehr relevant sind, erklären sie meine Motivation ziemlich gut und können Sie schockieren.
Bitte lesen Sie von 145 bis 7?
Lesen Sie auch den neuen Blog-Doc
Lesen Sie auch, dass node_modules nicht schwer ist, Entwickler sind faul!
Blog-Doc für Space verwendet jetzt nur 14 Module (1916,1 KB oder 1,9161 MB) anstelle von 131 (10082 KB oder 10,082 MB)!
Gehen Sie zu der Ausgabenseite des Blog-Doc-Bereichs auf GitHub und erstellen Sie ein neues Problem, indem Sie so viel wie möglich das Problem erläutern, mit dem Sie konfrontiert sind.
Gehen Sie zu den Ideen des Blog-Doc-Raums auf GitHub und erzählen Sie mir davon.
Die Einbeziehung des SSG in Blog-Doc on Space erfordert einige Architekturänderungen.
Ich werde später in Betracht ziehen, die SSG aufzunehmen oder nicht, je nach Nutzung und Anforderungen von Blog-Doc auf den Raum.
Bitte lesen Sie den Installationsabschnitt.
Ich beabsichtige, diese App in meiner kurzen Freizeit zu verbessern.
Sie können Blog-Doc als Prototyp nehmen und ihn vollständig ändern, um ihn mit einem anderen Design und/oder einer anderen Vorlagensprache zu verwenden.
Ich hoffe wirklich, dass diese App für viele Menschen in irgendeiner Weise nützlich sein wird. Ich betrachte sie als meinen persönlichen Beitrag zum Node.js und Markdown -Communities.
Ideen, Kommentare und Vorschläge sind sehr willkommen.
Sya, Lebcit
Gebaut mit ❤️ von Lebcit