Cómo utilizar las plantillas integradas en Hugo: una guía paso a paso

Publicado: 2024-11-27

Hugo es un potente generador de sitios estáticos que permite a los desarrolladores y creadores de contenido crear rápidamente sitios web rápidos y escalables. Una de las características principales de Hugo es su sistema de plantillas, que ayuda a estructurar el contenido y personalizar la apariencia del sitio. Si es nuevo en Hugo o desea aprovechar sus capacidades de creación de plantillas de manera más efectiva, esta guía paso a paso le mostrará cómo usar las plantillas integradas en Hugo.

¿Qué son las plantillas en Hugo?

Las plantillas en Hugo son archivos que definen cómo se representará el contenido de su sitio. Están compuestos de HTML, CSS y código específico de Hugo, lo que le permite personalizar el diseño de su sitio web. Las plantillas se pueden utilizar para diversos fines, como crear encabezados, pies de página, páginas individuales, listas y más.

Cómo entender el problema: la casilla de verificación no se muestra

Hugo tiene plantillas integradas que forman parte de su estructura temática y también le permite crear plantillas personalizadas para una mayor flexibilidad. Estas plantillas se aplican automáticamente según el tipo de contenido, la estructura de la URL y otras variables, lo que facilita la administración de sitios complejos.

Paso 1: instale Hugo y cree un sitio nuevo

Antes de sumergirse en las plantillas, primero debe instalar Hugo y configurar su sitio. Así es como se hace eso:

Instalar Hugo :
- Si no ha instalado Hugo, siga la guía de instalación oficial para su sistema operativo: Instalación de Hugo.
Crear un nuevo sitio Hugo :
- Ejecute el siguiente comando en su terminal para crear un nuevo sitio:
```
 hugo new site mysite
```
- Esto creará un nuevo directorio llamado mysite con la estructura de archivos básica para su proyecto Hugo.

Paso 2: agrega un tema

Hugo trabaja con temas para gestionar cómo se muestra el contenido. Puede utilizar un tema existente de Hugo Themes o crear uno personalizado. Para simplificar, usemos un tema de la biblioteca de temas de Hugo.

Agregar un tema :
- Puede agregar un tema clonándolo en su directorio themes/ . Por ejemplo, usemos el tema “Ananke”:
```
 git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
```
Configurar el tema :
- Abra su archivo config.toml y configure el tema:
```
 theme = "ananke"
```

Paso 3: comprender la estructura de la plantilla Hugo

El sistema de plantillas de Hugo se basa en el lenguaje de plantillas Go. Las plantillas se dividen en varias categorías según su finalidad:

Plantillas base : estas son las plantillas generales que envuelven el contenido. A menudo incluyen secciones comunes como encabezados, pies de página y navegación.
Plantillas de contenido : definen cómo se muestran los tipos de contenido individuales (por ejemplo, publicaciones de blog, páginas, secciones).
Plantillas de lista : estas plantillas controlan cómo se presentan los grupos de contenido (por ejemplo, una lista de publicaciones de blog).
Plantillas parciales : son fragmentos reutilizables más pequeños (por ejemplo, barra de navegación o pie de página) que se incluyen en las plantillas principales.

Directorios de plantillas comunes

layouts/ : Contiene todos los archivos de diseño como index.html , single.html , etc.
themes/ : Contiene plantillas que vienen con el tema elegido.
content/ : almacena sus archivos de contenido (generalmente escritos en Markdown).

Paso 4: crea una plantilla

Exploremos cómo crear y modificar una plantilla para una página.

Crear un nuevo archivo de contenido :
- Para crear una nueva página (por ejemplo, una publicación de blog), use el siguiente comando:
```
 hugo new posts/my-first-post.md
```
- Esto crea un nuevo archivo Markdown dentro de content/posts/ con contenido preliminar (YAML o TOML) y un marcador de posición para su contenido.
Cree una plantilla para páginas individuales :
- En el directorio layouts , cree un archivo llamado single.html dentro layouts/_default/ . Esto controlará cómo se muestran las páginas de contenido individuales.
```
  <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html>
```
- Esta plantilla mostrará el título y el contenido de cualquier página que cree.

Crear una plantilla de lista :

De manera similar, puede crear una plantilla de lista para mostrar múltiples elementos de contenido (por ejemplo, una lista de publicaciones). Cree un list.html en el directorio layouts/_default/ .

 <!-- layouts/_default/list.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>

Paso 5: Personalizar plantillas

Puede mejorar sus plantillas con el rico conjunto de funciones de plantillas de Hugo. Por ejemplo, puede incluir CSS personalizado, bucle sobre variables o formato de fechas:

Agregar CSS : puede vincular un archivo CSS a su plantilla:

 <link rel="stylesheet" href="{{ "styles.css" | relURL }}">

Formatear fechas : use la función date para mostrar fechas en un formato específico:
```
 <p>Published on: {{ .Date.Format "January 2, 2006" }}</p>
```

Paso 6: publique y obtenga una vista previa de su sitio

Una vez que sus plantillas estén en su lugar y haya agregado contenido, puede obtener una vista previa de su sitio localmente:

 hugo server

Navegue a http://localhost:1313 para ver su sitio.

Preguntas frecuentes sobre las plantillas Hugo

1. ¿Cuál es el propósito del directorio “layouts” en Hugo?

El directorio layouts es donde almacena todos sus archivos de plantilla en Hugo. Se utiliza para definir cómo se mostrarán los diferentes tipos de contenido (por ejemplo, publicaciones, páginas, listas) en la parte frontal de su sitio. Las plantillas están organizadas por tipo y ubicación, como single.html para páginas de contenido individuales y list.html para listas de contenido.

2. ¿Puedo crear mis propias plantillas personalizadas en Hugo?

Sí, puedes crear plantillas personalizadas en Hugo. Al colocar sus plantillas en el directorio layouts , puede crear plantillas especializadas para tipos de contenido específicos, secciones o incluso presentaciones de contenido únicas. Hugo también le permite anular las plantillas predeterminadas del tema elegido.

3. ¿Cómo maneja Hugo los archivos de contenido y las plantillas?

Hugo utiliza un sistema donde los archivos de contenido (escritos en Markdown u otros formatos) se combinan con plantillas para definir cómo se muestran. Cuando crea contenido (por ejemplo, una publicación de blog), Hugo busca automáticamente una plantilla adecuada (por ejemplo, single.html ) y procesa el contenido usando esa plantilla. Hugo también admite la organización del contenido en secciones, que pueden utilizar diferentes plantillas.

4. ¿Qué son las plantillas parciales en Hugo?

Las plantillas parciales son componentes reutilizables o fragmentos de HTML que se pueden incluir en otras plantillas. Por ejemplo, un encabezado, pie de página o menú de navegación se pueden crear como parciales e incluirlos en varias plantillas usando {{ partial "header.html" . }} sintaxis. Esto ayuda a mantener los principios DRY (No te repitas) y hace que el sitio sea más fácil de administrar.

5. ¿Puedo utilizar plantillas de Hugo con un tema personalizado?

Sí, puedes usar temas personalizados en Hugo. Puedes crear tu propio tema o utilizar uno existente del repositorio de temas de Hugo. Si está utilizando un tema existente, puede anular sus plantillas agregando sus plantillas personalizadas en el directorio layouts , lo que le permite modificar partes específicas del tema sin cambiar toda la estructura.

Si sigue estos pasos y comprende el sistema de plantillas de Hugo, podrá crear sitios web potentes y personalizables. Ya sea que esté utilizando plantillas integradas o creando las suyas propias, Hugo brinda la flexibilidad y velocidad necesarias para desarrollar sitios estáticos con facilidad.