# Hugo Shortcodes personnalisés

LLMS index: [llms.txt](/llms.txt)

---

<!-- overview -->

Cette page explique les shortcodes Hugo personnalisés pouvant être utilisés dans la documentation de Kubernetes Markdown.

En savoir plus sur shortcodes dans la [documentation Hugo](https://gohugo.io/content-management/shortcodes).


<!-- body -->

## Etat de la fonctionnalité

Dans une page de Markdown (fichier `.md`) de ce site, vous pouvez ajouter un code court pour afficher la version et l'état de la fonction documentée.

### Feature state demo

Ci-dessous se trouve une démo de l'extrait d'état de la fonctionnalité, qui affiche la fonctionnalité comme stable dans Kubernetes version 1.10.

```
{{< feature-state for_k8s_version="v1.10" state="stable" >}}
```

Rend à :








  <div class="feature-state-notice feature-stable">
      <span class="feature-state-name">FEATURE STATE:</span>
      <code>Kubernetes v1.10 [stable]</code>
    </div>
  



Les valeurs valides pour `state` sont :

* alpha
* beta
* deprecated
* stable

### Feature state code

La version de Kubernetes affichée par défaut est celle de la page ou du site.
Ceci peut être modifié en passant le paramètre <code>for_k8s_version</code> shortcode.

````
{{< feature-state for_k8s_version="v1.10" state="stable" >}}
````

Rend à :








  <div class="feature-state-notice feature-stable">
      <span class="feature-state-name">FEATURE STATE:</span>
      <code>Kubernetes v1.10 [stable]</code>
    </div>
  



#### Alpha feature

````
{{< feature-state feature-state state="alpha" >}}
````

Rend à :








  <div class="feature-state-notice feature-alpha">
      <span class="feature-state-name">FEATURE STATE:</span>
      <code>Kubernetes v1.36 [alpha]</code>
    </div>
  



#### Beta feature

````
{{< feature-state feature-state state="beta" >}}
````

Rend à :








  <div class="feature-state-notice feature-beta">
      <span class="feature-state-name">FEATURE STATE:</span>
      <code>Kubernetes v1.36 [beta]</code>
    </div>
  



#### Stable feature

````
{{< feature-state feature-state state="stable" >}}
````

Rend à :








  <div class="feature-state-notice feature-stable">
      <span class="feature-state-name">FEATURE STATE:</span>
      <code>Kubernetes v1.36 [stable]</code>
    </div>
  



#### Deprecated feature

````
{{< feature-state feature-state state="deprecated" >}}
````

Rend à :








  <div class="feature-state-notice feature-deprecated">
      <span class="feature-state-name">FEATURE STATE:</span>
      <code>Kubernetes v1.36 [deprecated]</code>
    </div>
  



## Glossaire

Vous pouvez faire référence à des termes du glossaire avec une inclusion qui met à jour et remplace automatiquement le contenu avec les liens pertinents de [notre glossaire](/fr/docs/reference/glossary/).
When the term is moused-over by someone using the online documentation, the glossary entry displays a tooltip.

The raw data for glossary terms is stored at [https://github.com/kubernetes/website/tree/master/content/en/docs/reference/glossary](https://github.com/kubernetes/website/tree/master/content/en/docs/reference/glossary), with a content file for each glossary term.

### Démonstration du glossaire

Par exemple, le snippet suivant est rendu à <a class='glossary-tooltip' title='Un ensemble de machines, appelées des &quot;nœuds&quot;, qui exécutent des applications conteneurisées gérées par Kubernetes.' data-bs-toggle='tooltip' data-bs-placement='top' href='/fr/docs/reference/glossary/?all=true#term-cluster' target='_blank' aria-label='cluster'>cluster</a> avec une infobulle :

````liquid
{{< glossary_tooltip text="cluster" term_id="cluster" >}}
````

## Tabs

Dans une page de démarque (fichier `.md`) de ce site, vous pouvez ajouter un jeu d'onglets pour afficher plusieurs saveurs d'une solution donnée.

The `tabs` shortcode takes these parameters:

* `name`: Le nom tel qu'il apparaît sur l'onglet.
* `codelang`: Si vous fournissez un contenu interne au shortcode `tab`, vous pouvez indiquer à Hugo quel langage de code utiliser pour activer la coloration syntaxique.
* `include`: Le fichier à inclure dans l'onglet.
  Si l'onglet vit dans un Hugo [leaf bundle](https://gohugo.io/content-management/page-bundles/#leaf-bundles), le fichier -- qui peut être n'importe quel type MIME supporté par Hugo -- est recherché dans le bundle lui-même.
  Si ce n'est pas le cas, la page de contenu qui doit être incluse est recherchée par rapport à la page en cours.
  Notez qu'avec le `include`, vous n'avez pas de contenu interne de shortcode et devez utiliser la syntaxe de fermeture automatique.
  Par exemple, <code>{{< tab name="Content File #1" include="example1" />}}</code>.
  La langue doit être spécifiée sous `codelang` ou la langue est prise en compte en fonction du nom du fichier.
  Les fichiers non contenus sont mis en surbrillance par défaut.
* Si votre contenu interne est Markdown, vous devez utiliser le délimiteur `%` pour entourer l'onglet.
  Par exemple, `{{% tab name="Tab 1" %}}This is **markdown**{{% /tab %}}`
* Vous pouvez combiner les variations mentionnées ci-dessus dans un ensemble d'onglets.

Ci-dessous se trouve une démo du raccourci des onglets.


<div class="alert alert-info" role="note"><h4 class="alert-heading">Note</h4>L'onglet <strong>name</strong> d'une définition <code>tabs</code> doit être unique dans une page de contenu.</div>


### Tabs demo: Code highlighting

```go-text-template
{{< tabs name="tab_with_code" >}}
{{{< tab name="Tab 1" codelang="bash" >}}
echo "This is tab 1."
{{< /tab >}}
{{< tab name="Tab 2" codelang="go" >}}
println "This is tab 2."
{{< /tab >}}}
{{< /tabs >}}
```

Rend à:

<ul class="nav nav-tabs" id="tabs-tab-with-code" role="tablist"><li class="nav-item"><a data-bs-toggle="tab" class="nav-link active" href="#tabs-tab-with-code-0" role="tab" aria-controls="tabs-tab-with-code-0" aria-selected="true">Tab 1</a></li>
	  
		<li class="nav-item"><a data-bs-toggle="tab" class="nav-link" href="#tabs-tab-with-code-1" role="tab" aria-controls="tabs-tab-with-code-1">Tab 2</a></li></ul>

<div class="tab-content" id="tabs-tab-with-code-content"><div class="tab-body tab-pane fadeshow active"
        id="tabs-tab-with-code-0" role="tabpanel" aria-labelledby="tabs-tab-with-code-0-tab" tabindex="tab-with-code"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">&#34;This is tab 1.&#34;</span>
</span></span></code></pre></div></div><div class="tab-body tab-pane fade"
        id="tabs-tab-with-code-1" role="tabpanel" aria-labelledby="tabs-tab-with-code-1-tab" tabindex="tab-with-code"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nx">println</span><span class="w"> </span><span class="s">&#34;This is tab 2.&#34;</span><span class="w">
</span></span></span></code></pre></div></div></div>


### Tabs demo: Inline Markdown and HTML

```go-html-template
{{< tabs name="tab_with_md" >}}
{{% tab name="Markdown" %}}
This is **some markdown.**
{{< note >}}
It can even contain shortcodes.
{{< /note >}}
{{% /tab %}}
{{< tab name="HTML" >}}
<div>
	<h3>Plain HTML</h3>
	<p>This is some <i>plain</i> HTML.</p>
</div>
{{< /tab >}}
{{< /tabs >}}
```

Rend à:

<ul class="nav nav-tabs" id="tabs-tab-with-md" role="tablist"><li class="nav-item"><a data-bs-toggle="tab" class="nav-link active" href="#tabs-tab-with-md-0" role="tab" aria-controls="tabs-tab-with-md-0" aria-selected="true">Markdown</a></li>
	  
		<li class="nav-item"><a data-bs-toggle="tab" class="nav-link" href="#tabs-tab-with-md-1" role="tab" aria-controls="tabs-tab-with-md-1">HTML</a></li></ul>

<div class="tab-content" id="tabs-tab-with-md-content"><div class="tab-body tab-pane fadeshow active"
        id="tabs-tab-with-md-0" role="tabpanel" aria-labelledby="tabs-tab-with-md-0-tab" tabindex="tab-with-md"><p>This is <strong>some markdown.</strong></p>
<div class="alert alert-info" role="note"><h4 class="alert-heading">Note</h4>Il peut même contenir des shortcodes.</div>
</div><div class="tab-body tab-pane fade"
        id="tabs-tab-with-md-1" role="tabpanel" aria-labelledby="tabs-tab-with-md-1-tab" tabindex="tab-with-md">
<div>
	<h3>Plain HTML</h3>
	<p>This is some <i>plain</i> HTML.</p>
</div>
</div></div>


### Tabs demo: File include

```go-text-template
{{< tabs name="tab_with_file_include" >}}
{{< tab name="Content File #1" include="example1" />}}
{{< tab name="Content File #2" include="example2" />}}
{{< tab name="JSON File" include="podtemplate" />}}
{{< /tabs >}}
```

Rend à:

<ul class="nav nav-tabs" id="tabs-tab-with-file-include" role="tablist"><li class="nav-item"><a data-bs-toggle="tab" class="nav-link active" href="#tabs-tab-with-file-include-0" role="tab" aria-controls="tabs-tab-with-file-include-0" aria-selected="true">Content File #1</a></li>
	  
		<li class="nav-item"><a data-bs-toggle="tab" class="nav-link" href="#tabs-tab-with-file-include-1" role="tab" aria-controls="tabs-tab-with-file-include-1">Content File #2</a></li>
		<li class="nav-item"><a data-bs-toggle="tab" class="nav-link" href="#tabs-tab-with-file-include-2" role="tab" aria-controls="tabs-tab-with-file-include-2">JSON File</a></li></ul>

<div class="tab-content" id="tabs-tab-with-file-include-content"><div class="tab-body tab-pane fadeshow active"
        id="tabs-tab-with-file-include-0" role="tabpanel" aria-labelledby="tabs-tab-with-file-include-0-tab" tabindex="tab-with-file-include"><p>Ceci est un fichier de contenu <strong>exemple</strong> à l'intérieur du paquet de feuilles <strong>includes</strong>.</p>

<div class="alert alert-info" role="note"><h4 class="alert-heading">Note</h4>Les fichiers de contenu inclus peuvent également contenir des codes abrégés.</div>

</div><div class="tab-body tab-pane fade"
        id="tabs-tab-with-file-include-1" role="tabpanel" aria-labelledby="tabs-tab-with-file-include-1-tab" tabindex="tab-with-file-include"><p>Ceci est un autre <strong>exemple</strong> fichier de contenu à l'intérieur du paquet de feuilles <strong>includes</strong>.</p>
</div><div class="tab-body tab-pane fade"
        id="tabs-tab-with-file-include-2" role="tabpanel" aria-labelledby="tabs-tab-with-file-include-2-tab" tabindex="tab-with-file-include"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;apiVersion&#34;</span><span class="p">:</span> <span class="s2">&#34;v1&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;kind&#34;</span><span class="p">:</span> <span class="s2">&#34;PodTemplate&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;metadata&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;nginx&#34;</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;template&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;metadata&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;labels&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;nginx&#34;</span>
</span></span><span class="line"><span class="cl">      <span class="p">},</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;generateName&#34;</span><span class="p">:</span> <span class="s2">&#34;nginx-&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;spec&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nt">&#34;containers&#34;</span><span class="p">:</span> <span class="p">[{</span>
</span></span><span class="line"><span class="cl">          <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;nginx&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">          <span class="nt">&#34;image&#34;</span><span class="p">:</span> <span class="s2">&#34;dockerfile/nginx&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">          <span class="nt">&#34;ports&#34;</span><span class="p">:</span> <span class="p">[{</span><span class="nt">&#34;containerPort&#34;</span><span class="p">:</span> <span class="mi">80</span><span class="p">}]</span>
</span></span><span class="line"><span class="cl">        <span class="p">}]</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div></div></div>




## A suivre


* En savoir plus sur [Hugo](https://gohugo.io/).
* En savoir plus sur [écrire un nouveau sujet](/docs/home/contribute/write-new-topic/).
* En savoir plus sur [l'utilisation des page templates](/docs/home/contribute/page-templates/).
* En savoir plus sur [staging your changes](/docs/home/contribute/stage-documentation-changes/)
* En savoir plus sur [créer une pull request](/docs/home/contribute/create-pull-request/).
