Nodoku è un set di librerie che consente di creare senza sforzo una landing page o un sito statico
Nodoku è un framework basato su NextJS , React e Tailwind .
Nodoku sfrutta le funzionalità di base di NextJS di Server-Side-Rendering (SSR).
Il motore Nodoku analizza il file Markdown fornito in blocchi di contenuto.
Quindi esegue il rendering di ciascun blocco utilizzando la configurazione fornita nel file Yaml, denominata skin .
Metodo Nodoku
Nodoku suggerisce un modo semplice per creare landing page incentrate sui contenuti, utilizzando Markdown e Yaml
Passaggio 1: pensa
Crea contenuti che promuovano il tuo prodotto o servizio come file MD
Concentratevi sull'argomento del vostro prodotto/servizio per evidenziarne i vantaggi.
Utilizza il tuo editor di testo preferito per creare un file MD (markdown) ricco di contenuti, senza preoccuparti della presentazione.
Utilizzando il delimitatore del blocco di contenuto, un frammento di codice Yaml, struttura il file di contenuto in modo che possa essere inviato al parser Nodoku.
Fase 2: Pelle
Rivesti il file MD utilizzando una semplice configurazione Yaml e i componenti disponibili
Una volta che sei soddisfatto del messaggio che trasmette la tua landing page, inizia a migliorarla.
La skin Nodoku è un file Yaml che collega le sezioni del tuo file MD con i blocchi di presentazione.
Puoi scegliere tra diversi componenti di presentazione, tra cui Carousel, Hero e diversi tipi di componenti Card.
Fase 3: messa a punto precisa
Utilizza le opzioni di configurazione per perfezionare la presentazione della tua landing page
Se la presentazione predefinita non soddisfa le tue esigenze, puoi modificarla utilizzando le opzioni di configurazione di ogni componente per adattarla alle tue esigenze.
Puoi cambiare il colore dello sfondo, il colore del testo, i bordi e altri dettagli visivi della tua presentazione.
Normalmente i componenti Nodoku supportano Tailwind CSS out of the box, quindi puoi mettere a punto la preimpostazione attuale usando Tailwind.
Ecco un esempio
Supponiamo che tu stia creando una landing page di prodotto
Creare un file MD
crea un file di contenuto Markdown che descriva il tuo prodotto
# Title of my awesome product
## Subtitle of my awesome product
Description of my product.
And another line of description.
Crea un file Yaml per la skin
abbozzare un file Yaml che configura la rappresentazione visiva
rows:
- row:
components:
- mambaui/hero-left-text:
selector:
attributes:
id: product-1
Ed ecco il risultato
Titolo del mio fantastico prodotto
Sottotitolo del mio fantastico prodotto
E sì!
L' intero sito è stato generato con Nodoku!
Controlla il codice sorgente di questa pagina su
https://github.com/epanikas/nodoku-demo-page
Perché vorresti provare Nodoku
Approccio basato sui contenuti senza distrazioni
A differenza di Nodoku, la stragrande maggioranza dei creatori di siti utilizza il cosiddetto approccio WYSIWYG (What You See Is What You Get), ovvero quando il sito viene costruito gradualmente, compilando i moduli web direttamente sugli elementi visivi.
Anche se questo approccio fornisce un'impressione visiva molto rapida della tua futura pagina, ha un grosso svantaggio: distrae molto.
Nodoku suggerisce un approccio diverso: prima si creano i contenuti .
Il contenuto viene creato in forma testuale in un file Markdown e in questo momento nient'altro ha importanza .
Contenuto e presentazione sono rigorosamente separati
Nodoku promuove una netta separazione tra contenuto e presentazione, consentendo un elevato grado di flessibilità, poiché è possibile modificare uno dei due senza che ciò influisca sull'altro.
Questo approccio è illustrato dal fatto che il contenuto e il design sono rappresentati da file diversi: il file Markdown per il contenuto e il file Yaml , denominato skin , per la presentazione visiva.
Mantenere i contenuti e i concetti di design rigorosamente separati consente la modifica indipendente di entrambi, senza doversi preoccupare dell'impatto che uno potrebbe avere sull'altro.
Localizzazione multilingue integrata
Nodoku è stato progettato sin dalle fondamenta tenendo presente la necessità della localizzazione dei contenuti.
Il contenuto in Nodoku è rappresentato da un insieme di blocchi di contenuto , ognuno dei quali è una parte di contenuto separata (solitamente un paragrafo o un titolo).
Il contenuto diventa facilmente localizzabile, poiché ogni blocco di contenuto ha una sua chiave univoca.
Questa chiave può essere naturalmente utilizzata come chiave di traduzione , integrabile con la soluzione di localizzazione scelta.
Per maggiori dettagli, consulta nodoku-i18n .
I componenti Nodoku sono naturalmente reattivi
Ogni componente Nodoku è realizzato con cura in modo da poter essere visualizzato correttamente su qualsiasi dispositivo di navigazione.
I set di componenti Nodoku attualmente disponibili, Nodoku-Flowbite e Nodoku-MambaUI, basati rispettivamente sui set di blocchi visivi Flowbite e Mamba UI , sono tutti reattivi per fornire la migliore esperienza utente .
La skin Nodoku, un file Yaml che consente la personalizzazione visiva, si basa sul motore di stile CSS Tailwind, che offre ampie possibilità di ottimizzazione del design reattivo.
Layout, basato su griglia CSS o flex CSS
Una pagina Nodoku è organizzata come un insieme di righe , ciascuna delle quali contiene uno o più componenti visivi.
Questo layout orientato alle righe fornisce una chiara comprensione della struttura della pagina e un posizionamento prevedibile degli elementi visivi.
Per impostazione predefinita, ogni riga in una pagina Nodoku utilizza una griglia CSS per organizzare gli elementi interni della riga.
Tuttavia, se necessario, è possibile convertire il layout di una riga in CSS Flex .
Ciò consente, a seconda delle vostre particolari esigenze, di adattare il layout più adatto alle vostre necessità.
SEO friendly, grazie al rendering lato server
Nodoku utilizza il rendering lato server, basato sul framework NextJS .
Tutte le pagine Nodoku vengono pre-costruite in anticipo durante il processo di creazione offline.
Ciò consente non solo il caricamento rapido della pagina, ma anche l'ottimizzazione per i motori di ricerca , poiché ogni pagina è immediatamente disponibile e può essere facilmente scansionata dai motori di ricerca.
Non è necessario eseguire alcun codice Javascript prima che la pagina venga scansionata dal motore di ricerca web.
Di conseguenza, l'intera pagina diventa naturalmente SEO friendly .
Estendibile con nuovi componenti visivi
Il framework Nodoku è estensibile per impostazione predefinita, poiché è l'utente finale a controllare la mappatura tra i componenti visivi e la configurazione della skin Yaml.
Nodoku utilizza il cosiddetto componente provider , una funzione che restituisce una rappresentazione visiva del componente in base alla descrizione del file skin Yaml.
Questa implementazione è responsabile del rendering finale dei componenti, utilizzando il tema e la localizzazione.
Di conseguenza, l'utente finale può facilmente ampliare il set di componenti esistente con componenti personalizzati, a seconda delle esigenze.
Le stesse carte possono essere presentate come componente Carosello
Questa è solo una questione di configurazione della pelle
rows:
- row:
components:
- flowbite/carousel:
selector:
attributes:
sectionName: advantages
