Saltar al contenido principal

Blog

Para crear o modificar un post en el blog, se utiliza un lenguaje de marcado llamado Markdown. Markdown es un lenguaje de marcado ligero que se utiliza para dar formato a los documentos de texto y es muy sencillo de utilizar. En este tutorial se explica lo fundamental para poder utilizar este lenguaje.

Para crear un nuevo post, se debe seguir los siguientes pasos:

Crear el archivo del post​

Acceder a la carpeta blog (que se encuentra en la raíz del proyecto) y crear un nuevo archivo con el siguiente formato de nombre: YYYY-MM-DD-titulo-del-post.md, donde YYYY será el año, MM el mes y DD el día de publicación del post. Con esto nuestra publicación ya tendrá una fecha y un identificador. Por ejemplo, si queremos crear un post sobre la creación de un nuevo post, el nombre del archivo sería 2022-01-01-crear-nuevo-post.md, donde su fecha sería el 1 de enero de 2022 y su identificador "crear-nuevo-post". Esto se aplicará en la ruta de la noticia en la web, por lo que es importante que sea un nombre descriptivo. Un ejemplo de ruta sería https://acg.ual.es/blog/2022/01/01/crear-nuevo-post.

Encabezado de información del post​

Dentro del archivo, lo primero que debemos hacer es añadir un encabezado con la información del post. Este encabezado debe tener la siguiente estructura:

---
title: "Titulo del post"
authors: [nuevo-autor]
tags: [tags, separadas, por, comas, ejemplo, noticia, ACG]
---

Donde:

  • title: es el título del post.
  • authors: es un array con los autores del post. Si el autor no existe, se debe crear un nuevo autor en el archivo authors.yml (que se encuentra dentro de la carpeta blog) siguiendo el formato de los autores ya existentes.
tip

La estructura de un autor que nos encontraremos dentro de authors.yml es la siguiente:

pepito-perez:
  name: Pepito Pérez
  title: Ayudante de Investigación
  url: https://www.example.es/
  image_url: /img/miembros/nombre_autor.jpg

Donde:

  • pepito-perez: es el identificador del autor. Tiene que ser un nombre identificativo, separado por guiones y único.
  • name: es el nombre del autor.
  • title: es el cargo del autor.
  • url: es la URL de la página personal (o cualquier enlace de preferencia) del autor.
  • image_url: es la ruta de la imagen del autor. Se debe subir la imagen a la carpeta static/img/miembros.
  • tags: es un array con las etiquetas del post. Se escribe directamente el nombre de la etiqueta, sin necesidad de crearla previamente.

Recomendaciones de formato de contenido​

A partir de la línea siguiente al encabezado, se puede añadir el contenido del post. Para dar formato al texto, a partir de aquí se puede utilizar Markdown.

---
title: "Titulo del post"
authors: [nuevo-autor]
tags: [tags, separadas, por, comas, ejemplo, noticia, ACG]
---
## Encabezado contenido
Contenido del post...

Añadir imágenes​

Para añadir imágenes al post, se debe subir la imagen a la carpeta static/img/noticias y se puede añadir al post de diferentes maneras.

Añadir imagen solo con Markdown​

Para llamar a la imagen podemos ver que simplemente debemos poner la ruta de la imagen en el archivo y un texto alternativo.

![Texto alternativo](/img/noticias/nombre_imagen.png)

La desventaja de esta forma es que no se puede centrar la imagen, estará alineada a la izquierda.

Añadir imagen centrada utilizando HTML​

Para centrar la imagen, se puede utilizar HTML, ya que Markdown permite mezclar HTML con su sintaxis. Para centrar la imagen, se puede utilizar el siguiente código:

<p align="center">
  <img src={require(`@site/static/img/noticias/nombre_imagen.png`).default} alt="Texto alternativo"/>
</p>

Donde:

  • align="center": centra el contenido.
  • src: es la ruta de la imagen.
  • alt: es el texto alternativo de la imagen.

Insertar enlaces​

Enlace externo​

Para insertar un enlace externo en el post, se puede añadir de la siguiente manera:

[Mi enlace](https://www.example.es/)

Donde:

  • Mi enlace: es el texto del enlace.
  • https://www.example.es/: es la URL del enlace.

Enlace interno​

Para insertar un enlace interno en el post, se puede añadir de la siguiente manera:

[Mi enlace](/about-us)

Donde:

  • Mi enlace: es el texto del enlace.
  • /about-us: es la URL del enlace. En este caso, se redirigirá a la página "Sobre nosotros" de la versión en español.
Casos especiales​
  • Enlace a un post: Para enlazar a un post, se puede añadir de la siguiente manera:
[Mi enlace](/blog/2022/01/01/crear-nuevo-post)

Donde:

  • Mi enlace: es el texto del enlace.
  • /blog/2022/01/01/crear-nuevo-post: es la URL del enlace. En este caso, se redirigirá al post "Crear nuevo post".
  • Enlace a documentación: Para enlazar a la documentación, se puede añadir de la siguiente manera:
[Mi enlace](/docs/documentacion-web/create-a-post)

Donde:

  • Mi enlace: es el texto del enlace.
  • /docs/documentacion-web/create-a-post: es la URL del enlace. En este caso, se redirigirá a la página "Crear un post" de la documentación.
  • Enlace a la web en inglés: Para enlazar a la versión en inglés de la web, se puede añadir de la siguiente manera:
[Mi enlace](/en/about-us)

Donde:

  • Mi enlace: es el texto del enlace.
  • /en/about-us: es la URL del enlace. En este caso, se redirigirá a la página "About us" de la versión en inglés.

El texto de enlace se mostrará en el post y al hacer clic en él, se redirigirá a la URL especificada.

Insertar PDFs​

Para insertar un PDF en el post, se debe subir el archivo a la carpeta static/attached_files y se puede añadir al post de la siguiente manera:

Insertar un PDF con un enlace​

Para insertar un PDF en el post, se puede añadir un enlace al archivo PDF.

[Texto del enlace](/attached_files/nombre_archivo.pdf)

Insertar un PDF con un visor​

Para insertar un PDF en el post con un visor, se puede utilizar el siguiente código:

<iframe width="100%" height="800" src={require(`@site/static/attached_files/5717fcb325964.pdf`).default} />

Donde:

  • width="100%": es el ancho del visor.
  • height="800": es la altura del visor.
  • src: es la ruta del archivo PDF.

Insertar videos​

Para insertar un video en el post, se puede añadir de la siguiente manera:

Insertar un video de YouTube​

Para insertar un video de YouTube en el post, se puede utilizar el siguiente código:

<p align="center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/id_video" frameborder="0" allowfullscreen></iframe>
</p>

Donde:

  • align="center": centra el contenido.
  • width="560": es el ancho del video.
  • height="315": es la altura del video.
  • src: es la URL del video de YouTube.
  • id_video: es el identificador del video de YouTube. Para obtener el identificador, se puede copiar el código de inserción del video de YouTube y extraer el identificador del enlace. Un ejemplo de enlace de YouTube es https://www.youtube.com/watch?v=Rb0UmrCXxVA&ab_channel=HALIDONMUSIC, donde Rb0UmrCXxVA es el identificador del video (https://www.youtube.com/watch?v={{id_video}}&ab_channel=HALIDONMUSIC). A veces puede no estar en la misma posición, por lo que se debe buscar el v= y copiar el identificador que le sigue.

Insertar un video de Vimeo​

Para insertar un video de Vimeo en el post, se puede utilizar el siguiente código:

<p align="center">
  <iframe src="https://player.vimeo.com/video/id_video" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</p>

Donde:

  • align="center": centra el contenido.
  • src: es la URL del video de Vimeo.
  • id_video: es el identificador del video de Vimeo. Para obtener el identificador, se puede copiar el enlace del video de Vimeo y extraer el identificador del enlace. Un ejemplo de enlace de Vimeo es https://vimeo.com/45436516, donde 45436516 es el identificador del video (https://vimeo.com/{{id_video}}).

Acortar el contenido en la página principal​

Para acortar el contenido del post en la página principal del blog, se puede añadir un separador de contenido. Para ello, se debe añadir la siguiente línea en el lugar donde se quiera que se corte el contenido:

<!-- truncate -->

A partir de esta línea, el contenido se acortará en la página principal del blog y se mostrará un enlace para leer el post completo que pondrá "Leer más". Un post ya puede ser largo cuando el texto ocupe la primera pantalla del navegador sin desplazarse, por lo que se recomienda acortar el contenido en la página principal.

Recomendaciones de estructura de contenido​

Para que el post tenga una estructura uniforme y sea más fácil de leer, se recomienda seguir la siguiente estructura:

---
title: "Titulo"
authors: [autor]
tags: [tags]
---
(Si hay imágenes que poner)
<p align="center">
  <img src={require(`@site/static/img/571617ee956ff.png`).default} alt="Armando Fox"/>
</p>

Contenido del post...
<!-- truncate -->
Contenido del post muy largo...

(Si hay algun video o PDF que insertar)
<p align="center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/TK8LGB2xezo" frameborder="0" allowfullscreen></iframe>
</p>
<iframe width="100%" height="800" src={require(`@site/static/attached_files/5717fcb325964.pdf`).default} />

(Si hay enlaces que poner o se quiere redirigir a otra página con más información)
_Más información: https://www.example.com/_