Blowfish proporciona un diseño de página de inicio totalmente flexible. Hay dos plantillas principales para elegir con configuraciones adicionales para ajustar el 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 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.
Como ejemplo, la página de inicio de este sitio usa el diseño personalizado para permitir alternar entre los diseños de perfil y página. Visita el repositorio de GitHub para ver cómo funciona.
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.
