LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes.fr.md

weight	title	subtitle	date	lastmod	draft	author	authorLink	description	license	tags	categories	hiddenFromHomePage	featuredImage	featuredImagePreview	toc	autoCollapseToc	math	mapbox	lightgallery	linkToMarkdown	share	comment
3	Thème Documentation - Built-in Shortcodes		2020-03-04T16:29:59+08:00	2020-03-04T16:29:59+08:00	false	Dillon	https://dillonzq.com	Hugo fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre.		shortcodes	documentation	false	/images/theme-documentation-built-in-shortcodes/featured-image.png		true	true	false	accessToken lightStyle darkStyle navigation geolocate scale fullscreen true true true true	true	true	enable true	true

Hugo fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre.

{{< admonition warning >}} Sorry, this article has not been completely translated into French. Welcome to take the time to propose a translation by making a PR to the theme! {{< /admonition >}}

Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.

But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.

To avoid this limitations, Hugo created shortcodes. A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.

Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.

figure

Documentation of figure

Example figure input:

{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}

The rendered output looks like this:

{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}

The HTML looks like this:

<figure>
    <img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
    <figcaption>
        <h4>Lighthouse (figure)</h4>
    </figcaption>
</figure>

gist

Documentation of gist

Example gist input:

{{</* gist spf13 7896402 */>}}

The rendered output looks like this:

{{< gist spf13 7896402 >}}

The HTML looks like this:

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

highlight

Documentation of highlight

Example highlight input:

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

The rendered output looks like this:

{{< highlight html >}}

{{ .Title }}

{{ range .Pages }} {{ .Render "summary"}} {{ end }}

{{< /highlight >}}

instagram

Documentation of instagram

Example instagram input:

{{</* instagram BWNjjyYFxVx hidecaption */>}}

The rendered output looks like this:

{{< instagram BWNjjyYFxVx hidecaption >}}

param

Documentation of param

Example param input:

{{</* param description */>}}

The rendered output looks like this:

{{< param description >}}

ref and relref

Documentation of ref and relref

tweet

Documentation of tweet

Example tweet input:

{{</* tweet 877500564405444608 */>}}

The rendered output looks like this:

{{< tweet 877500564405444608 >}}

vimeo

Documentation of vimeo

Example vimeo input:

{{</* vimeo 146022717 */>}}

The rendered output looks like this:

{{< vimeo 146022717 >}}

youtube

Documentation of youtube

Example youtube input:

{{</* youtube w7Ft2ymGmfc */>}}

The rendered output looks like this:

{{< youtube w7Ft2ymGmfc >}}