Documentación del Tema - Contenido

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

2 Front Matter

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

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.

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.

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.

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.

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.

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 \)

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

⁹⁰/₁₀₀

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 😂

Otro ejemplo:

1

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

La salida renderizada sería:

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