Quint es un tema minimalista de Hugo diseñado para evocar una sensación limpia y aireada, enfatizando la claridad y la facilidad de lectura. Cuenta con elegantes banners de imágenes incorporados y un diseño liviano, lo que lo hace ideal para mostrar su contenido en el centro del escenario.
Consulte el repositorio del sitio de demostración, que también puede utilizar como plantilla inicial para un sitio nuevo. (Psst... allí hay un botón de implementación con un solo clic en Netlify).
Demostración en vivo aquí.
Diseño minimalista : centrado en la legibilidad del contenido con mínimas distracciones.
Modos oscuro y claro : cambio automático de tema que respeta la configuración del navegador/dispositivo del espectador.
Diseño responsivo : se ve muy bien tanto en dispositivos móviles como de escritorio.
Banners de imágenes incluidos : Se envía con hermosos banners de imágenes minimalistas que marcan el tono de su sitio. Reemplácelos o agregue los suyos propios en cualquier momento.
Búsqueda del sitio : búsqueda integrada en su sitio estático utilizando Lunr.js.
Iconos sociales : enlaces configurables a tus redes sociales en el pie de página.
Para comenzar con Quint, necesita tener Hugo instalado en su máquina. Para obtener más información sobre la instalación de Hugo, consulte la documentación oficial de Hugo.
Para obtener una guía paso a paso para crear un nuevo sitio con Hugo, lea el Inicio rápido.
Con Hugo instalado, agregue Quint al directorio de temas de su sitio. Desde la raíz de su sitio, ejecute:
submódulo git agregar https://github.com/victoriadrake/hugo-theme-quint.git themes/quint
Abra el archivo de configuración de su sitio Hugo (ya sea hugo.toml
, hugo.yaml
o hugo.json
) y actualice el parámetro theme
para usar quint
:
hugo.toml
:tema = "quinto"
hugo.yaml
:tema: "quinto"
Quint luce fantástico desde el primer momento. Opcionalmente, copie los valores de configuración de yoursite/themes/quint/hugo.toml
a la configuración de su sitio ( yoursite/hugo.toml
) para personalizar aún más Quint.
Ejecute Hugo para generar su sitio e iniciar el servidor. Desde la raíz de su sitio, ejecute:
servidor hugo
Navegue hasta http://localhost:1313
en su navegador web para ver su sitio en acción con el tema Quint.
Para descargar la última versión de Quint, ejecute:
Actualización del submódulo de git --temas remotos/quint
Quint está diseñado para que sea sencillo de personalizar.
Agregue fácilmente sus propios archivos CSS personalizados nombrándolos en su configuración de Hugo:
[params]css = ["css/custom.css"] # Tus anulaciones de CSS personalizadas, almacenadas en tu sitio/static/
Puede anular cualquier diseño utilizando un archivo del mismo nombre en el directorio de su proyecto. Por ejemplo, el archivo yoursite/layouts/partials/contact.html
anulará yoursite/themes/quint/layouts/partials/contact.html
.
Agregue o elimine secciones de la página de inicio anulando el archivo yoursite/themes/quint/layouts/index.html
. Simplemente cree una copia de este archivo en el directorio de su proyecto ( yoursite/layouts/index.html
) y elimine o agregue cualquier correo electrónico partial
que desee.
Si una página o publicación no especifica una image
en la portada, Quint mostrará un hermoso banner de imagen eligiendo una imagen aleatoria del directorio themes/quint/static/images
.
Esto se logra eligiendo un número aleatorio del 1 al 10, que corresponde al nombre de un archivo de imagen. Puede agregar a esta colección o reemplazar cualquier imagen que desee. Simplemente actualice el número aleatorio máximo para que coincida con la cantidad de imágenes que tiene.
[params]numImages = 12 # Número de imágenes aleatorias para elegir para los banners (en temas/quint/static/images)
¡Las contribuciones a Quint son bienvenidas! No dudes en enviar problemas o solicitudes de extracción en GitHub para mejorar la funcionalidad o la documentación del tema.
¿Quieres algunas ideas para empezar? Aquí hay una lista rápida de características que me encantaría ver agregadas:
Botones de copia de bloque de código
Resaltado de sintaxis Chroma de Hugo
Generador de activos de Hugo con canalización, toma de huellas dactilares, agrupación y minificación
Soporte multilingüe
Navegación de ruta de navegación
Este tema se publica bajo la licencia MIT. Para obtener más detalles, consulte el archivo de LICENCIA.
Quint utiliza la excelente fuente Open Sauce.
Maqueta de dispositivo creada desde deviceframes.com.