# Пользовательские макрокоды Hugo

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

---

<!-- overview -->
На этой странице объясняются пользовательские макрокоды Hugo, которые можно использовать в Markdown-файлах документации Kubernetes.

Узнать подробнее про макрокоды можно в [документации Hugo](https://gohugo.io/content-management/shortcodes).


<!-- body -->

## Состояние функциональности

В Markdown странице (файл с расширением `.md`) вы можете добавить макрокод, чтобы отобразить версию и состояние документированной функциональной возможности.

### Демонстрация состояния функциональности

Ниже показан фрагмент кода для вывода состояния функциональности, который сообщает о функциональности в стабильной версии Kubernetes 1.10.

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

Результат:








  <div class="feature-state-notice feature-stable">
      <span class="feature-state-name">СТАТУС ФИЧИ:</span>
      <code>Kubernetes v1.10 [stable]</code>
    </div>
  



Допустимые значения для `state`:

* alpha
* beta
* deprecated
* stable

### Код состояния функциональности

По умолчанию отображается версия Kubernetes, соответствующая версии страницы или сайта. Это значение можно переопределить, передав параметр макрокода <code>for_k8s_version</code>.

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

Результат:








  <div class="feature-state-notice feature-stable">
      <span class="feature-state-name">СТАТУС ФИЧИ:</span>
      <code>Kubernetes v1.10 [stable]</code>
    </div>
  



#### Функциональность в альфа-версии

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

Результат:








  <div class="feature-state-notice feature-alpha">
      <span class="feature-state-name">СТАТУС ФИЧИ:</span>
      <code>Kubernetes v1.36 [alpha]</code>
    </div>
  



#### Функциональность в бета-версии

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

Результат:








  <div class="feature-state-notice feature-beta">
      <span class="feature-state-name">СТАТУС ФИЧИ:</span>
      <code>Kubernetes v1.36 [beta]</code>
    </div>
  



#### Функциональность в стабильной версии

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

Результат:








  <div class="feature-state-notice feature-stable">
      <span class="feature-state-name">СТАТУС ФИЧИ:</span>
      <code>Kubernetes v1.36 [stable]</code>
    </div>
  



#### Устаревшая функциональность

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

Результат:








  <div class="feature-state-notice feature-deprecated">
      <span class="feature-state-name">СТАТУС ФИЧИ:</span>
      <code>Kubernetes v1.36 [deprecated]</code>
    </div>
  



## Глоссарий

Вы можете сослаться на термины из [глоссария](/docs/reference/glossary/) в виде всплывающей (при наведении мыши) подсказки, что удобно при чтении документации через интернет.

Исходные файлы терминов глоссария хранятся в отдельной директории по URL-адресу [https://github.com/kubernetes/website/tree/master/content/en/docs/reference/glossary](https://github.com/kubernetes/website/tree/master/content/en/docs/reference/glossary).

### Демонстрация глоссария

Например, следующий фрагмент кода в Markdown будет отображен в виде всплывающей подсказки — <a class='glossary-tooltip' title='Набор рабочих машин, называемых узлами, которые запускают контейнеризированные приложения. Кластер имеет как минимум один рабочий узел.' data-bs-toggle='tooltip' data-bs-placement='top' href='/ru/docs/reference/glossary/?all=true#term-cluster' target='_blank' aria-label='cluster'>cluster</a>:

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

## Заголовки таблиц

Для улучшения доступности таблиц для программ для чтения с экрана, добавьте заголовок к таблице. Чтобы добавить [заголовок](https://www.w3schools.com/tags/tag_caption.asp) таблицы, поместите таблицу в макрокод `table` и определите значение заголовка в параметре` caption`.


<div class="alert alert-info" role="note"><h4 class="alert-heading">Примечание:</h4>Заголовки таблиц предназначены только для программ чтения с экрана, поэтому в браузере они не будут отображаться.</div>


Пример:

```go-html-template
{{< table caption="Конфигурационные параметры" >}}
Параметр | Описание | Значение по умолчанию
:---------|:------------|:-------
`timeout` | Тайм-аут для запросов | `30s`
`logLevel` | Уровень логирования | `INFO`
{{< /table >}}
```

Результат:

{{< table caption="Конфигурационные параметры" >}}
Параметр | Описание | Значение по умолчанию
:---------|:------------|:-------
`timeout` | Тайм-аут для запросов | `30s`
`logLevel` | Уровень логирования | `INFO`
{{< /table >}}

Если вы изучите HTML-код таблицы, вы заметите следующий ниже элемент сразу после открывающего элемента `<table>`:

```html
<caption style="display: none;"></caption>
```

## Вкладки

Страница в формате Markdown (файл с расширением `.md`) на этом сайте может содержать набор вкладок для отображения нескольких разновидностей определённого решения.

Макрокод `tabs` принимает следующие параметры:

* `name`: имя, отображаемое на вкладке.
* `codelang`: если вы указываете встроенный контент для макрокода `tab`, вы можете сообщить Hugo, какой язык использовать для подсветки синтаксиса.
* `include`: включаемый файл в вкладку. Если вкладка находится в [узле пакета (leaf bundle)](https://gohugo.io/content-management/page-bundles/#leaf-bundles) Hugo, то файл (может быть любым MIME-типом, который поддерживает Hugo) ищется в самом пакете. Если нет, то включаемое содержимое ищется относительно текущей страницы. Обратите внимание, что при использовании `include` вам следует использовать самозакрывающийся синтаксис. Например, <code>{{</* tab name="Content File #1" include="example1" />}}</code>. Язык может быть указан в `codelang`, в противном случае язык определяется из имени файла.
* Если содержимое вкладки это Markdown, вам нужно использовать символ `%`. Например, `{{% tab name="Вкладка 1" %}}This is **markdown**{{% /tab %}}`
* Вы можете совместно использовать перечисленные выше параметры.
Ниже приведена демонстрация шорткода вкладок.

Ниже приведены примеры вкладок.


<div class="alert alert-info" role="note"><h4 class="alert-heading">Примечание:</h4><strong>Имя</strong> вкладки в элементе <code>tabs</code> должно быть уникальным на странице.</div>


### Демонстрация вкладок: подсветка синтаксиса в блоках кода

```go-text-template
{{< tabs name="tab_with_code" >}}
{{{< tab name="Вкладка 1" codelang="bash" >}}
echo "Это вкладка 1."
{{< /tab >}}
{{< tab name="Вкладка 2" codelang="go" >}}
println "Это вкладка 2."
{{< /tab >}}}
{{< /tabs >}}
```

Результат:

<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">Вкладка 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">Вкладка 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;Это вкладка 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;Это вкладка 2.&#34;</span><span class="w">
</span></span></span></code></pre></div></div></div>


### Демонстрация вкладок: встроенный Markdown и HTML

```go-html-template
{{< tabs name="tab_with_md" >}}
{{% tab name="Markdown" %}}
Это **разметка Markdown.**
{{< note >}}
Также можно использовать макрокоды.
{{< /note >}}
{{% /tab %}}
{{< tab name="HTML" >}}
<div>
	<h3>Обычный HTML</h3>
	<p>Это <i>обычный</i> HTML.</p>
</div>
{{< /tab >}}
{{< /tabs >}}
```

Результат:

<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>Это <strong>разметка Markdown.</strong></p>
<div class="alert alert-info" role="note"><h4 class="alert-heading">Примечание:</h4>Также можно использовать макрокоды.</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>Обычный HTML</h3>
	<p>Это <i>обычный</i> HTML.</p>
</div>
</div></div>


### Демонстрация вкладок: включение файлов

```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 >}}
```

Результат:

<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>Это <strong>пример</strong> содержимого в файле внутри пакета узла <strong>includes</strong>.</p>

<div class="alert alert-info" role="note"><h4 class="alert-heading">Примечание:</h4>Подключаемые файлы также могут содержать макрокоды.</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>Это другой <strong>пример</strong> содержимого в файле внутри пакета узла <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>




## Что дальше

* Подробнее про [Hugo](https://gohugo.io/).
* Подробнее про [написание новой темы](/ru/docs/contribute/style/write-new-topic/).
* Подробнее про [использование шаблонов страниц](/ru/docs/contribute/style/page-templates/).
* Подробнее про [создание пулреквеста](/ru/docs/contribute/start/#отправка-пулреквеста).
