Nodoku
una página de destino centrada en el contenido y
generador de sitios estáticos
Nodoku es un conjunto de bibliotecas que tienen como objetivo crear páginas de destino hermosas y responsivas sin esfuerzo.
Nodoku utiliza un archivo Markdown como proveedor de contenido y un archivo Yaml como configurador visual.
Nodoku es un conjunto de bibliotecas que permiten crear sin esfuerzo una página de destino o un sitio estático.
Nodoku es un framework basado en NextJS , React y Tailwind .
Nodoku utiliza las capacidades subyacentes de NextJS de Server-Side-Rendering (SSR).
El motor Nodoku analiza el archivo Markdown proporcionado en bloques de contenido.
Luego, renderiza cada bloque usando la configuración proporcionada en el archivo Yaml, llamado skin .
Camino Nodoku
Nodoku sugiere una forma sencilla de crear páginas de destino centradas en el contenido, utilizando Markdown y Yaml
Paso 1: Piensa
Cree contenido que promocione su producto o servicio como un archivo MD
Concéntrese en el tema de su producto/servicio para resaltar sus ventajas.
Utilice su editor de texto favorito para crear un archivo MD (markdown) rico en contenido, sin preocuparse por la presentación.
Usando el delimitador de bloque de contenido (un fragmento de código Yaml), estructure el archivo de contenido para que pueda enviarse al analizador Nodoku.
Paso 2: Piel
Diseñe el archivo MD usando una configuración Yaml simple y los componentes disponibles
Una vez que estés satisfecho con el mensaje que transmite tu página de destino, comienza a mejorarla.
El skin de Nodoku es un archivo Yaml que une secciones en tu archivo MD con los bloques de presentación.
Puedes elegir entre diferentes componentes de presentación, incluidos Carrusel, Héroe y diferentes tipos de componentes de Tarjeta.
Paso 3: Ajuste fino
Utilice las opciones de configuración para ajustar la presentación de su página de destino
Si la presentación predeterminada no se adapta a tus necesidades, puedes modificarla utilizando las opciones de configuración de cada componente para ajustarla a tus necesidades.
Puede cambiar el color de fondo, el color del texto, los bordes y otros detalles visuales de su presentación.
Normalmente, los componentes de Nodoku son compatibles con Tailwind CSS de forma predeterminada, por lo que puedes ajustar la configuración virtual usando Tailwind.
He aquí un ejemplo
Supongamos que está creando una página de destino de un producto.
Crear un archivo MD
Crea un archivo de contenido Markdown que describa tu producto.
# Title of my awesome product
## Subtitle of my awesome product
Description of my product.
And another line of description.
Redactar un archivo Yaml de skin
redactar un archivo Yaml que configure la representación visual
rows:
- row:
components:
- mambaui/hero-left-text:
selector:
attributes:
id: product-1
Y aquí está el resultado.
Título de mi increíble producto
Subtítulo de mi increíble producto
¡Y sí!
¡ Todo este sitio fue generado con Nodoku!
Consulte el código fuente de esta página en
https://github.com/epanikas/nodoku-demo-page
¿Por qué te gustaría probar Nodoku?
Enfoque centrado en el contenido y sin distracciones
A diferencia de Nodoku, la gran mayoría de los creadores de sitios utilizan el llamado enfoque WYSIWYG (Lo que ves es lo que obtienes), cuando el sitio se construye gradualmente, rellenando los formularios web directamente en los elementos visuales.
Si bien este enfoque ofrece una impresión visual muy rápida de su futura página, tiene un inconveniente importante: distrae mucho.
Nodoku sugiere un enfoque diferente: primero se crea el contenido .
El contenido se crea en formato de texto en un archivo Markdown y, en este momento, nada más importa .
El contenido y la presentación están estrictamente separados.
Nodoku promueve una separación estricta entre el contenido y la presentación, lo que permite una gran flexibilidad, ya que se puede cambiar uno sin afectar al otro.
Este enfoque se ilustra por el hecho de que el contenido y el diseño están representados por archivos diferentes: un archivo Markdown para el contenido y un archivo Yaml , llamado skin , para la presentación visual.
Mantener los conceptos de contenido y diseño estrictamente separados permite la edición independiente de ambos, sin preocuparse por el impacto que uno pueda tener sobre el otro.
Localización multilingüe incorporada
Nodoku ha sido diseñado desde cero teniendo en cuenta la necesidad de la localización del contenido.
El contenido en Nodoku está representado por un conjunto de bloques de contenido , cada uno de los cuales es una pieza de contenido separada (generalmente un párrafo o un título).
El contenido se vuelve fácilmente localizable, ya que cada bloque de contenido tiene su clave única.
Naturalmente, esta clave se puede utilizar como clave de traducción , que puede integrarse con la solución de localización de su elección.
Consulte nodoku-i18n para obtener más detalles.
Los componentes de Nodoku son naturalmente responsivos
Cada componente de Nodoku está diseñado cuidadosamente para que se presente correctamente en cualquier dispositivo de navegación.
Los conjuntos de componentes Nodoku actualmente disponibles, Nodoku-Flowbite y Nodoku-MambaUI, basados en el conjunto de bloques visuales Flowbite y Mamba UI respectivamente, son todos responsivos para brindar la mejor experiencia de usuario .
El skin Nodoku (un archivo Yaml que proporciona personalización visual) está basado en el motor de estilo CSS Tailwind, que brinda grandes posibilidades para ajustar el diseño responsivo.
Diseño, basado en cuadrícula CSS o CSS flex
Una página de Nodoku está organizada como un conjunto de filas , cada fila tiene uno o más componentes visuales.
Este diseño orientado a filas proporciona una comprensión clara de la estructura de su página y una ubicación predecible de los elementos visuales.
De forma predeterminada, cada fila de una página Nodoku utiliza una cuadrícula CSS para organizar los elementos internos de la fila.
Sin embargo, el diseño de una fila se puede cambiar a CSS flex , si es necesario.
Esto permite, dependiendo de sus requisitos particulares, adaptar el diseño que mejor se adapte a sus necesidades.
Optimizado para SEO, gracias a la representación del lado del servidor
Nodoku utiliza renderizado del lado del servidor, impulsado por el marco NextJS .
Todas las páginas de Nodoku se construyen previamente durante el proceso de creación sin conexión.
Esto permite no sólo una carga de página increíblemente rápida, sino también la optimización de motores de búsqueda , ya que cada página está fácilmente disponible y los motores de búsqueda pueden escanearla fácilmente.
No es necesario ejecutar ningún código Javascript antes de que el motor de búsqueda web escanee la página.
En consecuencia, toda la página se vuelve naturalmente amigable con el SEO .
Extensible con nuevos componentes visuales
El framework Nodoku es extensible por diseño, ya que es el usuario final quien controla el mapeo entre los componentes visuales y la configuración del skin Yaml.
Nodoku utiliza el llamado proveedor de componentes , una función que devuelve una representación visual del componente de acuerdo con la descripción del archivo de máscara Yaml.
Esta implementación es responsable de la representación final del componente, utilizando el tema y la localización.
En consecuencia, el usuario final puede ampliar fácilmente el conjunto de componentes existente con otros personalizados, según sea necesario.
Las mismas tarjetas se pueden presentar como el componente Carrusel
Esto es solo una cuestión de configuración de la piel.
rows:
- row:
components:
- flowbite/carousel:
selector:
attributes:
sectionName: advantages
La mayor parte de este sitio está disponible en los siguientes idiomas
Y el tuyo también puede serlo, con la ayuda de la localización fácil de Nodoku
Obtenga más información sobre las capacidades de localización de Nodoku