Blowfish proporciona diseños de página de inicio flexibles con configuraciones para ajustar cada diseño. Alternativamente, también puedes proporcionar tu propia plantilla y tener control total sobre el contenido de la página de inicio.
El diseño de la página de inicio está controlado por la configuración homepage.layout en el archivo de configuración params.toml. Además, todos los diseños tienen la opción de incluir una lista de artículos recientes.
Diseño Perfil#
El diseño predeterminado es el diseño de perfil, que es ideal para sitios web personales y blogs. Pone los detalles del autor en primer plano proporcionando una imagen y enlaces a perfiles sociales.
La información del autor se proporciona en el archivo de configuración de idiomas. Consulta las secciones Primeros Pasos y Configuración de idioma para detalles de los parámetros.
Además, cualquier contenido Markdown que se proporcione en el contenido de la página de inicio se colocará debajo del perfil del autor. Esto permite flexibilidad adicional para mostrar una biografía u otro contenido personalizado usando shortcodes.
Para habilitar el diseño Perfil, establece homepage.layout = "profile" en el archivo de configuración params.toml.
Diseño Página#
El diseño de página es simplemente una página de contenido normal que muestra tu contenido Markdown. Es ideal para sitios web estáticos y proporciona mucha flexibilidad.
Para habilitar el diseño Página, establece homepage.layout = "page" en el archivo de configuración params.toml.
Diseño Hero#
El diseño hero combina ideas de los diseños de perfil y tarjeta. Este no solo muestra información sobre el autor del sitio sino que también carga tu markdown debajo.
Para habilitar el diseño Hero, establece homepage.layout = "hero" y homepage.homepageImage en el archivo de configuración params.toml.
Diseño Fondo#
El diseño de fondo es una versión más suave del diseño hero. Como en el diseño Hero, este también muestra información sobre el autor del sitio y carga tu markdown debajo.
Para habilitar el diseño Fondo, establece homepage.layout = "background" y homepage.homepageImage en el archivo de configuración params.toml.
Diseño Tarjeta#
El diseño de tarjeta es una extensión del diseño de página. Proporciona el mismo nivel de flexibilidad mostrando también tu contenido markdown y añade una imagen de tarjeta para mostrar contenido visual.
Para habilitar el diseño Tarjeta, establece homepage.layout = "card" y homepage.homepageImage en el archivo de configuración params.toml.
Diseño Landing#
El diseño Landing está pensado para sitios de producto, centros de documentación y sitios personales que necesitan una declaración de apertura más contundente. Se abre con un hero espacioso y editorial — eyebrow, titular destacado, párrafo introductorio y botones de llamada a la acción — opcionalmente respaldado por una imagen hero de ancho completo que se funde con el fondo global, con una animación de entrada escalonada que se desactiva automáticamente para los visitantes que prefieren el movimiento reducido. Todo lo que está debajo del hero es Markdown estándar y shortcodes de Blowfish, de modo que la página completa sigue siendo portátil y fácil de mantener.
Para habilitar el diseño Landing, establece homepage.layout = "landing" en el archivo de configuración params.toml.
El hero se controla mediante el front matter de content/_index.md. Todos los campos son opcionales — todo lo que omitas simplemente no se renderiza:
---
title: "Build a site that feels unmistakably yours."
heroCaption: "Blowfish" # eyebrow above the title; defaults to the author name
heroLead: "A short statement that expands on the title."
heroButtons:
- label: "Get started"
url: "/docs/installation/"
- label: "Explore the docs"
url: "/docs/"
style: "outline" # "primary" (default) or "outline"
---| Front matter | Descripción |
|---|---|
heroCaption | Pequeño eyebrow en mayúsculas encima del título. Por defecto usa params.Author.name. |
heroLead | Párrafo introductorio renderizado bajo el título. Admite Markdown. |
heroButtons | Lista de botones de llamada a la acción (label, url y style opcional). Usa el mismo estilo que el shortcode cta. |
El cuerpo Markdown de _index.md se renderiza debajo del hero, de modo que estadísticas, cuadrículas de características, pasos y cualquier otro shortcode pueden construir el resto de la página. El diseño Landing combina bien con la opción backgroundCanvas de todo el sitio descrita en la documentación de configuración.
Diseño personalizado#
Si los diseños de página de inicio integrados no son suficientes para tus necesidades, tienes la opción de proporcionar tu propio diseño personalizado. Esto te permite tener control total sobre el contenido de la página y esencialmente te da una página en blanco para trabajar.
Para habilitar el diseño personalizado, establece homepage.layout = "custom" en el archivo de configuración params.toml.
Con el valor de configuración establecido, crea un nuevo archivo custom.html y colócalo en layouts/partials/home/custom.html. Ahora, lo que esté en el archivo custom.html se colocará en el área de contenido de la página de inicio del sitio. Puedes usar cualquier HTML, Tailwind o funciones de plantillas Hugo que desees para definir tu diseño.
Para incluir artículos recientes en el diseño personalizado, usa el partial recent-articles/main.html.
El sitio de ejemplo incluido usa el diseño Landing integrado y shortcodes de contenido estándar. Visita el repositorio de GitHub para ver cómo está configurado.
Artículos recientes#
Todos los diseños de página de inicio tienen la opción de mostrar artículos recientes debajo del contenido principal de la página. Para habilitar esto, simplemente establece la configuración homepage.showRecent en true en el archivo de configuración params.toml.
Los artículos listados en esta sección se derivan de la configuración mainSections que permite cualquier tipo de contenido que estés usando en tu sitio web. Por ejemplo, si tienes secciones de contenido para posts y projects podrías establecer esta configuración en ["posts", "projects"] y todos los artículos en estas dos secciones se usarían para llenar la lista de recientes. El tema espera que esta configuración sea un array, así que si solo usas una sección para todo tu contenido, deberías establecerlo así: ["blog"].
Miniaturas#
Blowfish fue construido para que sea fácil agregar soporte visual a tus artículos. Si estás familiarizado con la estructura de artículos de Hugo, solo necesitas colocar un archivo de imagen (casi todos los formatos son compatibles pero recomendamos .png o .jpg) que comience con feature* dentro de tu carpeta de artículo. Y eso es todo, Blowfish podrá usar la imagen tanto como miniatura dentro de tu sitio web como para tarjetas oEmbed en plataformas sociales.
Aquí hay una guía con más información y un ejemplo si quieres ver un ejemplo.
Galería de tarjetas#
Blowfish también admite mostrar las listas estándar de artículos como galerías de tarjetas. Puedes configurar esto tanto para la sección de recientes en la página de inicio como para las listas de artículos en todo tu sitio web. Para la página de inicio puedes usar homepage.cardView y homepage.cardViewScreenWidth; y para las listas usa list.cardView y list.cardViewScreenWidth. Consulta la documentación de configuración para más detalles, y la página de inicio para una demostración en vivo.
