Contenidos en Hugo – Parte 3

En esta serie de artículos sobre el gestor de contenidos Hugo, vamos a centrarnos en la creación de los contenidos.

Con el comando:

hugo new

Se pueden introducir nuevas entradas en nuestro sitio web. Por ejemplo:

hugo new eldiario/noticia1.md

Dentro del directorio content, se habrá creado una carpeta llamada “eldiario” y allí dentro un archivo con la extensión “md”, “noticia1.md”.

Ahora con:

hugo new eldiario/noticia2.md

Dentro del directorio eldiario/noticia se habrá creado “noticia2.md”.

Si ahora con el comando:

hugo server --theme=hugo_theme_robust -Dv

Visitamos el sitio web creado, se puede comprobar que aparecen noticia1 y noticia2, y a cada una se les ha asignado la etiqueta “eldiario” (que coincide con el nombre del directorio). Si se hace clic sobre el nombre de la etiqueta, nos mostrará todas las noticias que tengan asignada esta etiqueta (notica1 y noticia2).

Si las comparamos con las taxonomías, en las taxonomías se creaba un menú con las etiquetas que se habían introducido. En el caso de las etiquetas no.

Vamos ahora a introducir una imagen en una de las entradas que hemos creado. Las imágenes las podemos poner en 2 lugares:

  • En la carpeta en la que se introduce la entrada.
  • En la carpeta static.

Por ejemplo, creamos una entrada nueva:

hugo new noticia/noticia1.md

Se creará la carpeta “content/noticia” y dentro de ésta “noticia1.md”.

Ahora ponemos una imagen en “content/notica”, por ejemplo, “imagen1.png”. Si queremos hacer que esta imagen aparezca en la noticia, en el texto de la noticia deberemos poner:


+++
date = "2017-04-09T15:35:01+02:00"
draft = true
title = "noticia1"

+++

En formato markdown
![Esto es una imagen](../imagen.png)

En formato html:
<img src='../imagen.png' />

Si nos fijamos, la referencia a la imagen la hacemos a la carpeta anterior “../imagen.png”.

Si ahora, la imagen la ponemos en la carpeta static, la referencia deberá ser:


+++
date = "2017-04-09T15:35:01+02:00"
draft = true
title = "noticia1"

+++

En formato markdown
![Esto es una imagen](/imagen.png)

En formato html:
<img src='/imagen.png' />

Es decir a “/imagen.png”, los contenidos de static se copian directamente a la raíz del sitio web.

Por último, si en static creamos la carpeta “img” y ponemos la imagen en “static/img”, deberemos poner:


+++
date = "2017-04-09T15:35:01+02:00"
draft = true
title = "noticia1"

+++

En formato markdown
![Esto es una imagen](/img/imagen.png)

En formato html:
<img src='/img/imagen.png' />

Es decir, en la raíz del sitio web se va crear la carpeta “/img” y dentro de ella se copiará la imagen.

Algunos temas soportan imágenes en las cabeceras de las noticias, para ello usamos el parámetro thumbnail en la cabecera del documento:

+++
date = "2017-04-09T15:35:01+02:00"
draft = true
title = "noticia1"
thumbnail = "/imagen.png"

+++

Esta es la noticia 1.

Por último, vamos a dar un repaso a los directorios que se crean cuando se ejecuta el comando “hugo new site” para crear un sitio nuevo:

  • archetypes: Cuando se crea un nuevo contenido con el comando “hugo new”, se añaden al artículo algunas configuraciones por defecto, como el título o la fecha. Aquí se pueden definir las configuraciones por defecto que se van a colocar.
  • config.toml: Es el archivo de configuración del sitio web. Usa el lenguaje TOML, aunque se pueden usar otros como JSON o YAML. En él se definen cosas como el nombre del sitio, el idioma, la URL.
  • content: Aquí se almacenan los contenidos que el usuario almacena en el sitio.
  • data: Se usa para almacenar la configuración que Hugo usa para generar el sitio web.
  • layouts: Indica la forma en la que los contenidos van a ser transformados en un sitio estático.
  • static: Lo podemos usar para almacenar todos los contenidos estáticos del sitio, como imágenes, Javascript, CSS, imágenes,… El contenido se copiará a la raíz del sitio.
  • themes: Son los temas que definen la apariencia que va a tener el sitio web. Se pueden crear e instalar varios temas y cambiar de uno a otro. Hay muchos temas disponibles para ser descargados y modificados.
Anuncios
Esta entrada fue publicada en Software y etiquetada . Guarda el enlace permanente.

Una respuesta a Contenidos en Hugo – Parte 3

  1. Pingback: Contenidos en Hugo – Parte 3 | PlanetaLibre

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s