2.6 Layouts personalizados

Es muy probable que desee personalizar un tema a menos que lo haya diseñado. La forma más directa es simplemente hacer cambios directamente en el tema,26 Pero el problema es que un tema de Hugo puede ser actualizado constantemente por su autor original para mejoras o correcciones de errores. De manera similar a la política “la rompes, la compras” (la regla de Pottery Barn), una vez que toca el código fuente de otra persona, será responsable de su mantenimiento futuro, y el autor original no debería ser responsable de los cambios que haya realizado de su lado. Eso significa que puede no ser fácil extraer actualizaciones futuras de este tema a su sitio web (debe leer cuidadosamente los cambios y asegurarse de que no entren en conflicto con sus cambios), pero si está completamente satisfecho con el estado actual del tema y no quiere actualizaciones futuras, está bien modificar los archivos de tema directamente.

Un autor de tema que tenga en cuenta el hecho de que los usuarios pueden personalizar su tema generalmente proporcionará dos maneras: una es proporcionar opciones en config.toml, para que pueda cambiar estas opciones sin tocar los archivos de la plantilla; la otra es dejar unos pocos archivos de plantilla livianos en ‘layouts/’ en el tema, para que pueda anularlos sin tocar los archivos de la plantilla principal. Tome el tema XMin por ejemplo:

Tengo dos archivos HTML vacíos head_custom.html y foot_custom.html en layouts/partials/ en el tema. El primero se agregará dentro de <head> </head> de una página, por ejemplo, puede cargar librerías de JavaScript o incluir hojas de estilo CSS mediante <link>. Este último se agregará antes del pie de página de una página, por ejemplo, puede cargar librerías de JavaScript adicionales o incrustar comentarios de Disqus allí.

La forma en que personaliza estos dos archivos no es para editarlos directamente en la carpeta de temas, sino para crear un directorio layouts/partials/ en el directorio raíz de su sitio web, por ejemplo, su estructura de directorios puede verse así:

Todos los archivos en layouts/ en el directorio raíz anularán los archivos con las mismas rutas relativas en themes/hugo-xmin/layouts/, por ejemplo, el archivo layouts/partials/foot_custom.html, cuando se proporcione, anulará themes/hugo-xmin/layouts/partials/foot_custom.html. Eso significa que solo necesita crear y mantener como máximo dos archivos en layouts/ en lugar de mantener todos los archivos bajo themes/. Tenga en cuenta que este mecanismo de anulación se aplica a todos los archivos en layouts/, y no está limitado al directorio parials/. También se aplica a cualquier tema de Hugo que utilice realmente para su sitio web, y no se limita a hugo-xmin.

  1. Si es nuevo en el desarrollo web, tenga cuidado de cambiar el contenido dentro del tema. Pequeños cambios como colores y tamaños de fuente se pueden encontrar dentro de los archivos CSS del tema y pueden modificarse simplemente con el mínimo riesgo de romper la funcionalidad del tema.↩