Documentación del Tema - Contenido

Advertencia
Este artículo se actualizó por última vez el 2023-03-09, es posible que el contenido no esté actualizado.

Averigua como crear y organizar tu contenido rapida e intuitivamente en el tema LoveIt.

1 Organización de Contenidos

Algunas sugerencias para ayudarte a implementar un sitio elegante rapidamente:

  • Manten las páginas de las entradas en el directorio content/posts, por ejemplo: content/posts/my-first-post.md
  • Mantén las otras páginas en el directorio content, por ejemplo: content/about.md
  • Organización de los recursos locales
Referencia de los Recursos Locales

Hay tres maneras de hacer referencia a los recursos locales, como imágenes y música:

  1. Usando las páginas de recursos (page resources) en conjuntos de páginas (page bundles). Se puede hacer referencia a las páginas de recursos por el valor de Resources.GetMatch o directamente mediante la ruta del fichero de recurso relativo al directorio de la página.
  2. Guardando recursos en el directorio assets, que por defecto es /assets. La ruta de fichero que tenemos que usar en la entrada (post) es la relativa al directorio assets.
  3. Guardando recursos en el directorio static, que por defecto es /static. La ruta de fichero que debemos usar en la entrada (post) es la relativa al directorio static.

La prioridad en que se resuelven las referencias sigue el mismo orden que en la lista previa.

Las referencias a recursos locales de la lista anterior pueden usarse en muchos lugares diferentes dentro del tema, como por ejemplo links, images, image shortcode, music shortcode y algunos parámetros en la sección front matter.

Las imágenes en las páginas de recursos o en el directorio assets (ver processing) se soportarán en futuras versiones del tema. ¡Interesante!

2 Front Matter

Hugo permite añadir una sección front matter escrita en yaml, toml o json a los ficheros de contenido.

Nota
No todos los parametros especificados a continuación para la sección front matter tienen que especificarse necesariamente en cada fichero de entrada (post). Sólo son necesarios si la sección front matter y la parte page de la site configuration son inconsistentes.

Aquí tienes un ejemplo de una sección front matter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
---
title: "My First Post"
subtitle: ""
date: 2020-03-04T15:58:26+08:00
lastmod: 2020-03-04T15:58:26+08:00
draft: true
author: ""
authorLink: ""
description: ""
license: ""
images: []

tags: []
categories: []
featuredImage: ""
featuredImagePreview: ""

hiddenFromHomePage: false
hiddenFromSearch: false
twemoji: false
lightgallery: true
ruby: true
fraction: true
fontawesome: true
linkToMarkdown: true
rssFullText: false

toc:
  enable: true
  auto: true
code:
  copy: true
  # ...
math:
  enable: true
  # ...
mapbox:
  accessToken: ""
  # ...
share:
  enable: true
  # ...
comment:
  enable: true
  # ...
library:
  css:
    # someCSS = "some.css"
    # located in "assets/"
    # Or
    # someCSS = "https://cdn.example.com/some.css"
  js:
    # someJS = "some.js"
    # located in "assets/"
    # Or
    # someJS = "https://cdn.example.com/some.js"
seo:
  images: []
  # ...
---
  • title: el título para el contenido.

  • subtitle: el subtítulo para el contenido.

  • date: la fecha y hora asignada a esta página, normalmente la fecha y hora de la página se obtiene a partir de este campo, pero este comporamiento puede configurarse en el site configuration.

  • lastmod: la fecha y hora de la última modificación del contenido de la página.

  • draft: si vale true, el contenido no se renderizará al generar el sitio web a menos que pasemos la opción --buildDrafts/-D al invocar el comando hugo.

  • author: el autor del contenido.

  • authorLink: el link del autor.

  • description: la descripción del contenido.

  • license: Una licencia específica para este contenido.

  • images: imagenes para esta página en Open Graph y Twitter Cards.

  • tags: las etiquetas para el contenido.

  • categories: las categorías para el contenido.

  • featuredImage: la imagen destacada para el contenido.

  • featuredImagePreview: la imagen destacada para el vista previa del contenido en la home page.

  • hiddenFromHomePage: si es true, el contenido no se mostrará en la home page.

  • hiddenFromSearch: si es true, el contenido no se mostrará en los resultados de las búsquedas.

  • twemoji: si es true, el contenido tendrá habilitada la funcionalidad twemoji.

  • lightgallery: si es true, las imágenes en el contenido se mostrará en la galería.

  • ruby: si es true, el contenido tendrá habilitada la funcionalidad ruby extended syntax.

  • fraction: si es true, el contenido tendrá habilitada la funcionalidad fraction extended syntax.

  • fontawesome: si es true, el contenido tendrá habilitada la funcionalidad Font Awesome extended syntax.

  • linkToMarkdown: si es true, el pie de página del contenido mostrará el enlace al fichero Markdown original.

  • rssFullText: si es true, el texto completo del contenido se mostrará en el RSS.

  • toc: es igual que la sección params.page.toc en el fichero del site configuration.

  • code: es lo mismo que la sección params.page.code en el fichero del site configuration.

  • math: es lo mismo que la sección params.page.math en el fichero site configuration.

  • mapbox: es lo mismo que la sección params.page.mapbox en el fichero site configuration.

  • share: es lo mismo que la sección params.page.share en el fichero site configuration.

  • comment: es lo mismo que la sección params.page.comment en el fichero site configuration.

  • library: es lo mismo que la sección params.page.library en el fichero site configuration.

  • seo: es lo mismo que la sección params.page.seo en el fichero site configuration.

Consejo

featuredImage y featuredImagePreview soporta por completo el uso de local resource references.

Si el recurso de página con name: featured-image o name: featured-image-preview se establece en la sección de cabecera (front matter), no será necesario establecer el parámetro featuredImage o featuredImagePreview:

1
2
3
4
5
resources:
- name: featured-image
  src: featured-image.jpg
- name: featured-image-preview
  src: featured-image-preview.jpg

3 Resúmenes de contenido

El tema LoveIt usa el resumen del contenido para mostrar un resumen de la entrada en la home page. Hugo puede generar resúmenes de tu contenido.

Summary Preview

Extracción Automática del Resumen

Por defecto, Hugo extrae automáticamente las 70 primeras palabras de tu contenido como resumen.

Se puede ajustar la longitud del resumen extraido estableciendo el valor de la variable summaryLength en el fichero de site configuration.

Si estás creando contenido en CJKChino/Japonés/Coreano y quieres usar la extracción automática de Hugo, es necesario establecer la variable hasCJKLanguage a true en el fichero de site configuration.

Extracción Manual del Resumen

Alternativamente, puedes añadir el separador <!--more--> para señalizar por donde separarse el resumen del artículo.

El contenido que va antes del separador se usará como resumen.

Nota
Hay que tener cuidado de usar exactamente la cadena: <!--more-->; todo en minúsculas y sin espacios.

Resumen en la cabecera (Front Matter)

Puede que quieras que tu resumen sea diferente del comienzo de tu contenido. En ese caso puedes especificar un resumen distinto en la sección summary de la cabecera (front matter).

Usar la Descripción como Resumen

Puede que quieras que la descripción definida en la variable description en la sección de cabecera (front matter) sea el resumen.

Si añades el marcador <!--more--> al principio del artículo. Si mantienes la sección de resumen vacía el tema LoveIt usará tu descripción como resumen.

Orden de Prioridad para la selección del Resumen

Como hemos visto hay varias formas de especificar el resumen, el orden en que aplican es el siguiente:

  1. Si hay un separador de resumen <!--more--> presente en el artículo, pero no hay contenido antes del mismo, la descripción se usará como resumen.
  2. Si el separador <!--more--> está presente y hay contenido previo en el artículo, se usará ese contenido como resumen.
  3. Si se ha definido una variable summary en la cabecera (front matter) del artículo, el valor de esta variable será el resumen.
  4. El texto al comienzo del artículo se usará como resumen en caso de que no se haya especificado ninguno de los anteriores.
Nota
No se recomienda usar bloques de texto enriquecido en el resumen, causarían errores tipográficos. Así que hay que evitar bloques de código, imágenes, tablas, etc.

4 Sintáxis Básica de Markdown

Puedes consultarla aquí: basic markdown syntax page.

5 Markdown: Sintáxis Extendida

LoveIt tiene alguna sintáxis extendida que puede usarse en los artículos.

Soporte para Emoji

Puedes consultar esta página: emoji support page.

Fórmulas Matemáticas

LoveIt soporta fórmulas matemáticas basadas en $ \KaTeX $.

Si se establece la variable enable = true en la sección [params.math] en tu fichero site configuration y la propiedad math: true en la cabecera del artículo para habilitar el renderizado automático de las fórmulas matemáticas.

Consejo

Fórmulas en Bloques

Los delimitadores de bloque por defecto son $$/$$ and \\[/\\]:

1
2
3
$$ c = \pm\sqrt{a^2 + b^2} $$

\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]

La salida renderizada sería:

$$ c = \pm\sqrt{a^2 + b^2} $$

\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \]

Fórmulas “en linea”

Los delimitadores por defecto de las fórmulas en linea son: $/$ and \\(/\\):

1
$ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)

La salida renderizada sería:

$ c = \pm\sqrt{a^2 + b^2} $ and \( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \)

Consejo
Puedes añadir más delimitadores para bloques o fórmulas “en linea” en el fichero site configuration.

Copy-tex

Copy-tex es una extensión para $ \KaTeX $.

Gracias a esta extensión, cuando seleccionas y copias elementos de $ \KaTeX $ renderizados, copia el código fuente $ \LaTeX $ al portapapeles.

Define la propiedad copyTex = true en la sección [params.math] de tu fichero site configuration para habilitar la extensión Copy-tex.

Selecciona y copia la fórmula renderizada en la sección anterior y podrás comprobar que se ha copiado el código fuente $ \LaTeX $ en el portapapeles.

mhchem

mhchem es una extensión para $ \KaTeX $.

Gracias a esta extensión podrás escribir fácilmente ecuaciones químicas en tus artículos.

Hay que establecer la propiedad mhchem = true en la sección [params.math] de tu fichero site configuration para habilitar la extensión mhchem.

1
2
3
$$ \ce{CO2 + C -> 2 CO} $$

$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$

La salida renderizada será la siguiente:

$$ \ce{CO2 + C -> 2 CO} $$

$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$

Anotaciones Ruby

La sintaxis extendida para anotaciones de estilo ruby está soportada en el tema LoveIt:

1
[Hugo]^(An open-source static site generator)

La salida renderizada sería:

HugoAn open-source static site generator

Fracción

Una extensión de la sintaxis Markdown para fraction:

1
2
3
[Light]/[Dark]

[99]/[100]

La salida renderizada sería:

Light/Dark

90/100

Font Awesome

LoveIt usa Font Awesome como biblioteca de iconos. Puedes usar fácilmente estos iconos en tus artículos.

Averigua la clase (class) de iconos que quieres usar en Font Awesome website.

1
2
3
Gone camping! :(fas fa-campground fa-fw): Be back soon.

That is so funny! :(far fa-grin-tears):

La salida renderizada sería:

Gone camping!  Be back soon.

That is so funny!

Escapar caracteres

Hay casos especiales (por ejemplo escribiendo esta documentación ), en los que tu contenido colisiona con la sintaxis extendida de Markdown, y no se puede evitar.

El escape de caracteres puede ayudarte a a construir tu contenido:

1
{?X} -> X

Por ejemplo, dos : habilitan la sintaxis de emoji, y no es el comportamiento que necesitas. La sintáxis para escapar el caracter sería:

1
{?:}joy:

La salida renderizada sería:

:joy: instead of 😂

Consejo
Esto está relacionado con un issue de Hugo que no ha sido solucionado.

Otro ejemplo:

1
[link{?]}(#escape-character)

La salida renderizada sería:

[link](#escape-character) en lugar de link.

0%