1d88d5b296
Add complete translations for: - German (de) - French (fr) - Spanish (es) - Portuguese Brazil (pt-br) - Portuguese Portugal (pt-pt) Changes include: - Language config files (languages.*.toml) - Menu config files (menus.*.toml) - Translated docs section (16 files x 5 langs) - Translated homepage, guides, samples - Translated examples, authors, tags sections - Translated users section (112 dirs x 5 langs) - Fixed YAML front matter formatting in user files Hugo build now supports 9 languages total. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
6.7 KiB
title, weight, draft, description, slug, tags, series, series_order
| title | weight | draft | description | slug | tags | series | series_order | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Diseño de página de inicio | 5 | false | Configuración del diseño de la página de inicio en el tema Blowfish. | homepage-layout |
|
|
5 |
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.
{{< figure src="img/home-profile.png" class="thumbnailshadow" >}}
La información del autor se proporciona en el archivo de configuración de idiomas. Consulta las secciones [Primeros Pasos]({{< ref "getting-started" >}}) y [Configuración de idioma]({{< ref "configuration##language-and-i18n" >}}) 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.
{{< figure src="img/home-page.png" class="thumbnailshadow" >}}
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.
{{< figure src="img/home-hero.png" class="thumbnailshadow" >}}
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.
{{< figure src="img/home-background.png" class="thumbnailshadow" >}}
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.
{{< figure src="img/home-card.png" class="thumbnailshadow" >}}
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]({{< ref "/" >}}) 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.
{{< figure src="img/home-list.png" class="thumbnailshadow" >}}
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í]({{< ref "thumbnails" >}}) hay una guía con más información y un [ejemplo]({{< ref "thumbnail_sample" >}}) 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]({{< ref "configuration" >}}) para más detalles, y la página de inicio para una demostración en vivo.