Documentación del tema - Built-in Shortcodes

Hugo facilita numerosos built-in shortcodes para comodidad de los autores y para permitir mantener un código Markdown más limpio.

Hugo usa Markdown como formato para los contenidos más simples. Sin embargo, hay un montón de cosas que Markdown no soporta directamente. Puedes usar HTML puro para ampliar tus posibilidades.

Pero usar HTML puro puede ser una mala idea. Todo el mundo usa Markdown por que es limpio y simple de leer incluso sin renderizar. Conviene evitar el HTML para mantener el Markdown tan legible y simple como sea posible.

Para evitar estas limitaciones Hugo usa shortcodes. Un shortcode es un artefacto simple que genera un código HTML razonable al ser renderizado y que encaja dentro de la filosofía de diseño de Markdown.

Hugo incluye de serie numerosos shortcodes predefinidos que son de uso común:

1 figure

Documentación de figure

Ejemplo de uso de figure:

1

{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}

La salida correspondiente:

El HTML generado:

1
2
3
4
5
6

<figure>
    <img src="/images/lighthouse.jpg"/>
    <figcaption>
        <h4>Lighthouse (figure)</h4>
    </figcaption>
</figure>

2 gist

Documentación de gist

Ejemplo de uso de gist:

1

{{< gist spf13 7896402 >}}

La salida correspondiente:

El HTML generado:

1

<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>

3 highlight

Documentación de highlight

Ejemplo de uso de highlight:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{< highlight html >}}
<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>
{{< /highlight >}}

La salida sería:

1
2
3
4
5
6
7
8

<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>

4 instagram

Documentación de instagram

ESTA ROTO

5 param

Documentación de param

Example param input:

1

{{< param description >}}

La salida:

6 ref y relref

Documentación de ref and relref

7 tweet

Documentación de tweet

Ejemplo de tweet:

1

{{< tweet 877500564405444608 >}}

La salida correspondiente:

Hugo 0.24 Released: Big archetype update + @Netlify _redirects etc. file supporthttps://t.co/X94FmYDEZJ #gohugo #golang @spf13 @bepsays

— GoHugo.io (@GoHugoIO) June 21, 2017

8 vimeo

Documentación de vimeo

Ejemplo de vimeo:

1

{{< vimeo 146022717 >}}

La salida rederizada sería:

9 youtube

Documentación de youtube

Ejemplo de uso de youtube:

1

{{< youtube w7Ft2ymGmfc >}}

Y su salida renderizada: