Nodoku ist eine Reihe von Bibliotheken, mit denen sich mühelos eine Landingpage oder eine statische Site erstellen lässt
Nodoku ist ein Framework, das auf NextJS , React und Tailwind basiert.
Nodoku nutzt die zugrunde liegenden NextJS-Funktionen des Server-Side-Rendering (SSR).
Die Nodoku-Engine analysiert die bereitgestellte Markdown-Datei in Inhaltsblöcke.
Anschließend rendert es jeden Block mithilfe der in der Yaml-Datei namens „ skin“ bereitgestellten Konfiguration.
Nodoku-Weg
Nodoku schlägt eine einfache Möglichkeit vor, inhaltszentrierte Landingpages mit Markdown und Yaml zu erstellen
Schritt 1: Denken
Erstellen Sie Inhalte, die Ihr Produkt oder Ihre Dienstleistung bewerben, als MD-Datei
Konzentrieren Sie sich thematisch auf Ihr Produkt/Ihre Dienstleistung, um dessen Vorteile hervorzuheben.
Verwenden Sie Ihren bevorzugten Texteditor, um eine inhaltsreiche MD-Datei (Markdown) zu erstellen, ohne sich um die Präsentation kümmern zu müssen.
Strukturieren Sie die Inhaltsdatei mithilfe des Inhaltsblock-Trennzeichens – einem YAML-Codeausschnitt –, sodass sie an den Nodoku-Parser übermittelt werden kann.
Schritt 2: Haut
Skinnen Sie die MD-Datei mit einer einfachen Yaml-Konfiguration und verfügbaren Komponenten
Wenn Sie mit der Botschaft Ihrer Landingpage zufrieden sind, beginnen Sie mit der Gestaltung.
Nodoku Skin ist eine YAML-Datei, die Abschnitte Ihrer MD-Datei mit den Präsentationsblöcken verbindet.
Sie können zwischen verschiedenen Präsentationskomponenten wählen, darunter Karussell, Hero und verschiedene Arten von Kartenkomponenten.
Schritt 3: Feinabstimmung
Verwenden Sie Konfigurationsoptionen, um die Präsentation Ihrer Zielseite zu optimieren
Wenn die Standarddarstellung nicht Ihren Anforderungen entspricht, können Sie sie mithilfe der Konfigurationsoptionen der einzelnen Komponenten an Ihre Bedürfnisse anpassen.
Sie können die Hintergrundfarbe, Textfarbe, Rahmen und andere visuelle Details Ihrer Präsentation ändern.
Normalerweise unterstützen die Nodoku-Komponenten Tailwind CSS standardmäßig, sodass Sie die individuelle Voreinstellung mit Tailwind optimieren können.
Hier ist ein Beispiel
Angenommen, Sie erstellen eine Produkt-Landingpage
Erstellen einer MD-Datei
Erstellen Sie eine Markdown-Inhaltsdatei, die Ihr Produkt beschreibt
# Title of my awesome product
## Subtitle of my awesome product
Description of my product.
And another line of description.
Entwerfen Sie eine Skin-YAML-Datei
Erstellen Sie eine Yaml-Datei, die die visuelle Darstellung konfiguriert
rows:
- row:
components:
- mambaui/hero-left-text:
selector:
attributes:
id: product-1
Und hier ist das Ergebnis
Titel meines tollen Produkts
Untertitel meines großartigen Produkts
Und ja!
Diese gesamte Site wurde mit Nodoku erstellt!
Den Quellcode dieser Seite finden Sie unter
https://github.com/epanikas/nodoku-demo-page
Warum Sie Nodoku ausprobieren möchten
Ablenkungsfreier Content-First-Ansatz
Anders als Nodoku verwendet die überwiegende Mehrheit der Site-Builder den sogenannten WYSIWYG-Ansatz (What You See Is What You Get), bei dem die Site schrittweise erstellt wird, indem die Webformulare direkt auf den visuellen Elementen ausgefüllt werden.
Obwohl dieser Ansatz einen sehr schnellen visuellen Eindruck Ihrer zukünftigen Seite vermittelt, hat er einen großen Nachteil: Er lenkt sehr ab.
Nodoku schlägt einen anderen Ansatz vor: Sie erstellen zuerst Inhalte .
Der Inhalt wird in Textform in einer Markdown-Datei erstellt, und im Moment ist nichts anderes wichtig .
Inhalt und Präsentation sind strikt getrennt
Nodoku fördert eine strikte Trennung zwischen Inhalt und Präsentation und ermöglicht so ein hohes Maß an Flexibilität, da das eine geändert werden kann, ohne das andere zu beeinträchtigen.
Dieser Ansatz wird durch die Tatsache veranschaulicht, dass der Inhalt und das Design durch unterschiedliche Dateien dargestellt werden – Markdown-Datei für den Inhalt und Yaml-Datei – Skin genannt – für die visuelle Darstellung.
Durch die strikte Trennung von Inhalts- und Designkonzepten können beide unabhängig voneinander bearbeitet werden, ohne dass man sich Gedanken über die Auswirkungen machen muss, die das eine auf das andere haben könnte.
Integrierte mehrsprachige Lokalisierung
Nodoku wurde von Grund auf unter Berücksichtigung der Notwendigkeit der Inhaltslokalisierung entwickelt.
Der Inhalt in Nodoku wird durch eine Reihe von Inhaltsblöcken dargestellt, von denen jeder ein separater Inhaltsteil ist (normalerweise ein Absatz oder ein Titel).
Der Inhalt lässt sich leicht lokalisieren, da jeder Inhaltsblock über einen eindeutigen Schlüssel verfügt.
Dieser Schlüssel kann natürlich als Übersetzungsschlüssel verwendet werden, der in die Lokalisierungslösung Ihrer Wahl integriert werden kann.
Weitere Einzelheiten finden Sie unter nodoku-i18n .
Nodoku-Komponenten reagieren von Natur aus
Jede Nodoku-Komponente wird sorgfältig erstellt, sodass sie auf jedem Browsergerät korrekt angezeigt wird.
Die derzeit verfügbaren Sätze von Nodoku-Komponenten, Nodoku-Flowbite und Nodoku-MambaUI, die auf den visuellen Blöcken von Flowbite bzw. Mamba UI basieren, reagieren alle , um das beste Benutzererlebnis zu bieten .
Das Nodoku-Skin – eine Yaml-Datei zur visuellen Anpassung – basiert auf der Tailwind CSS-Styling-Engine, die umfangreiche Möglichkeiten zur Anpassung des Responsive-Designs bietet.
Layout, basierend entweder auf CSS-Raster oder CSS-Flex
Eine Nodoku-Seite ist als eine Reihe von Zeilen organisiert, wobei jede Zeile eine oder mehrere visuelle Komponenten enthält.
Ein solches zeilenorientiertes Layout vermittelt ein klares Verständnis der Struktur Ihrer Seite und ermöglicht eine vorhersehbare Platzierung visueller Elemente.
Standardmäßig verwendet jede Zeile einer Nodoku-Seite ein CSS-Raster, um die inneren Elemente der Zeile zu organisieren.
Allerdings lässt sich das Layout einer Zeile bei Bedarf auf CSS flex umstellen.
Dadurch können Sie, je nach Ihren individuellen Anforderungen, das Layout anpassen, das Ihren Anforderungen am besten entspricht.
SEO-freundlich dank serverseitigem Rendering
Nodoku verwendet Server-Side Rendering, unterstützt durch das NextJS- Framework.
Alle Nodoku-Seiten werden während des Offline-Erstellungsprozesses vorab erstellt.
Dies ermöglicht nicht nur ein blitzschnelles Laden der Seiten, sondern auch eine Optimierung für Suchmaschinen , da jede Seite sofort verfügbar ist und von den Suchmaschinen problemlos gescannt werden kann.
Vor dem Scannen der Seite durch die Websuchmaschine muss kein Javascript-Code ausgeführt werden.
Dadurch wird die gesamte Seite auf natürliche Weise SEO-freundlich .
Erweiterbar mit neuen visuellen Komponenten
Das Nodoku-Framework ist von Natur aus erweiterbar, da der Endbenutzer die Zuordnung zwischen visuellen Komponenten und der Yaml-Skin-Konfiguration steuert .
Nodoku verwendet den sogenannten Komponentenanbieter – eine Funktion, die eine visuelle Komponentendarstellung gemäß der Yaml-Skin-Dateibeschreibung zurückgibt.
Diese Implementierung ist für die endgültige Komponentendarstellung unter Verwendung des Designs und der Lokalisierung verantwortlich.
Folglich kann der Endbenutzer den vorhandenen Satz an Komponenten bei Bedarf problemlos um benutzerdefinierte Komponenten erweitern.
Die gleichen Karten können als Karussellkomponente präsentiert werden
Dies ist nur eine Frage der Skin-Konfiguration
rows:
- row:
components:
- flowbite/carousel:
selector:
attributes:
sectionName: advantages
Der Großteil dieser Site ist in den folgenden Sprachen verfügbar
Und Ihr Unternehmen kann es auch sein, mit Hilfe der einfachen Lokalisierung von Nodoku
Erfahren Sie mehr über die Lokalisierungsfunktionen von Nodoku