Gestión de contenidos y plantillas de Hugo

Estaba planeando reconstruir mi sitio y comenzar a crear contenido nuevamente, pero nunca encontré el tiempo hasta ahora.

Quería hacer mi tema desde cero en lugar de usar un tema predefinido, así que tuve que aprender cómo se realizan las plantillas y la gestión de contenido en Hugo.

Una vez que hice ese proceso, quiero resumir las cosas más importantes que considero que debes saber si quieres hacer tu propio tema como lo hice yo (¡este sitio es la prueba de eso!).

Gestión de contenido

Primero que nada hablemos de la organización de contenido en Hugo.

Todo el contenido que desee tener en su sitio debe estar dentro del directorio content/. Simplemente coloque sus publicaciones dentro de content/posts y su descripción en content/about y Hugo hará la magia por usted. Suena fácil, ¿verdad? Continúe entonces.

Hugo tiene principalmente dos tipos de páginas, las "únicas" y las "múltiples". Los primeros se utilizan por ejemplo para un about o para un faq o una contrib o un landing... Los segundos se utilizan cuando se desea agrupar en una misma categoría diferentes contenidos. Por ejemplo, sus diferentes publicaciones para sus "publicaciones" o un catálogo para sus "productos". Dicho esto, hay otra diferencia que debes conocer cuando creas tus diferentes páginas.

Los únicos tienen que ser nombrados como index.md, los de la lista no. Esto al final le indica a Hugo cómo administrar el contenido dentro de los directorios y cómo generar las URL para acceder a ellos. El siguiente esquema demuestra cómo funciona:

└── content
    └── about
    |   └── index.md        (https://mysite.com/about)
    ├── posts
    |   ├── first-post.md   (https://mysite.com/posts/first-post)
    |   └── second-post.md  (https://mysite.com/posts/second-post)
    |   └── trips
    |       └── pandora.md  (https://mysite.com/posts/trips/pandora)
    └── faq
        └── index.md        (https://mysite.com/faq)

También existe la posibilidad de especificar la URL usando la propiedad slug como slug=" my-custom-url ".

Gestión de plantillas

Ahora que sabes cómo organizar tu contenido, es hora de hablar sobre las plantillas. Son el código HTML que genera las páginas de su sitio. Hay algunos trucos y consejos que quiero compartir con ustedes como lo hice con el contenido de la sección anterior.

Las diferentes plantillas deben colocarse dentro del directorio layouts/. En la raíz debe estar la plantilla principal llamada index.html utilizada para representar la página de inicio. De la misma forma que el contenido, las plantillas se pueden organizar en carpetas si desea mostrar de diferentes formas el contenido según la ruta. Al igual que el contenido, las plantillas se pueden organizar entre únicas y múltiples. Tomando la organización de contenido descrita anteriormente, considerando que desea especificar diferentes plantillas para cada carpeta de contenido, una de las posibles organizaciones de plantillas puede ser:

└── layouts
    └── _default_
    |   ├── list.html
    |   └── single.html
    └── posts
        ├── list.html
        └── single.html
        └── trips
            ├── list.html
            └── single.html

Analizando en detalle, se puede ver un árbol similar al contenido pero con la particularidad de que no hay carpetas about nifaq pero que parecía una _default. Hugo usa esta carpeta especial para renderizar las páginas que no tienen su propia plantilla. En ese caso, el about y el faq, ambos tipos únicos, se renderizarán utilizando la plantilla layouts/_default/single.html. Si el directorio trips no existiera, las plantillas utilizadas serán las de _default.

En este punto, ya conoce la organización de contenido y la gestión de plantillas, pero está pensando:

¿Cómo sabe Hugo cuando quiero usar una página única o una lista?

La respuesta depende de la URL y el contenido allí. Utilizando de nuevo el ejemplo anterior para la organización del contenido, si observa que about contiene unindex.md, eso indica que Hugo es una página "única". Como no definimos ninguna plantilla en particular para eso, la que se utilizará es la genérica _default/single.thml.

Por otro lado, dentro de las posts hay tres publicaciones pero ninguna index.md una, lo que indica a Hugo que es una página "múltiple", por lo que usarás ambas plantillas, la list.html como un "índice" de tus publicaciones y el single.html para cada publicación. Para renderizar el list.html tienes que ir a la URL del directorio (https://mysite.com/posts/). Para las publicaciones (https://mysite.com/posts/first-post) y (https://mysite.com/posts/second-post) la plantilla utilizada será single.html.

Variables de página

Las páginas tienen un conjunto de variables útiles que es bueno conocer:

• Title: el título de la publicación
• Description: una descripción corta o larga de la publicación
• Content: el cuerpo de la publicación.
• ReadingTime: los minutos que Hugo autocalcula para leer la publicación

Para acceder a los parámetros personalizados que puede crear en cada publicación, debe acceder a ellos por su nombre dentro del objeto Params (Params.yourParam).

Puede mostrar publicaciones relacionadas leyendo los resultados del .Site.RegularPages.Related.

Consulte la lista completa en la página documentación.

La plantilla list.html se usa para mostrar una breve descripción de las publicaciones como un índice de libros con los enlaces a la publicación real. Para hacer eso, tienes que acceder a la variable $.Paginator.Pages y recorrer los resultados. Las variables son las mismas descritas anteriormente con un Permalink más, el que necesitas usar para acceder a la publicación (y llamar a la plantilla single.html) para ese contenido.

También existen las variables PrevInSection yNextInSection para paginar los resultados.

Plantillas parciales

El último consejo que quiero explicarte es que no necesitas repetir todo el tiempo todas las partes de las plantillas, puedes extraer la parte común en una plantilla y luego reutilizarla donde quieras. Estas son las plantillas parciales. Su particularidad es que necesitas colocar esa parte dentro de un directorio partials/ y llamarlo como {{partial" nombre.html ". }}. Son útiles para el header,footer, navbar y otras partes genéricas, así como para una plantilla de lista que desea reutilizar para sus publicaciones y para sus viajes, por ejemplo.

No dude en comentar aquí o contactarme en mis redes sociales para cualquier comentario, pregunta o sugerencia.