---
title: "Shortcodes"
weight: 6
draft: true
description: "Все shortcodes темы Blowfish — справочник для практиков."
slug: "shortcodes"
tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
series: ["Документация"]
series_order: 8
---

Hugo даёт [стандартные shortcodes](https://gohugo.io/content-management/shortcodes/). Blowfish добавляет свои — для типичных задач блога.

## Alert

`alert` выводит стилизованный блок-уведомление. Нужен когда важную информацию нельзя пропустить.

| Параметр | Описание |
| --- | --- |
| `icon` | **Опционально.** Иконка слева.<br>**По умолчанию:** `triangle-exclamation` (см. [icon](#icon)) |
| `iconColor` | **Опционально.** Цвет иконки в CSS-формате.<br>Hex (`#FFFFFF`) или имя цвета (`white`).<br>По умолчанию — из текущей темы. |
| `cardColor` | **Опционально.** Цвет фона карточки в CSS-формате.<br>Hex (`#FFFFFF`) или имя цвета (`white`).<br>По умолчанию — из текущей темы. |
| `textColor` | **Опционально.** Цвет текста в CSS-формате.<br>Hex (`#FFFFFF`) или имя цвета (`white`).<br>По умолчанию — из текущей темы. |

Внутри — Markdown, форматируй как угодно.

**Пример 1:** Без параметров

```md
{{</* alert */>}}
**Внимание!** Это действие необратимо!
{{</* /alert */>}}
```

{{< alert >}}
**Warning!** This action is destructive!
{{< /alert >}}

**Пример 2:** Безымянный параметр

```md
{{</* alert "twitter" */>}}
Не забудь [подписаться](https://twitter.com/nunocoracao) в Twitter.
{{</* /alert */>}}
```

{{< alert "twitter" >}}
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
{{< /alert >}}

**Пример 3:** Именованные параметры

```md
{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}}
Это ошибка!
{{</* /alert */>}}
```

{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
This is an error!
{{< /alert >}}

<br/><br/><br/>

## Admonition

Admonition — визуальные блоки-выноски для акцентирования внимания.

Работает как alert, но через render hooks Hugo. Ключевое отличие — синтаксис Markdown, переносимый между платформами. Shortcodes — специфика Hugo. Синтаксис похож на GitHub alerts:

```md
> [!TIP]
> Admonition типа Tip.

> [!TIP]+ Свой заголовок + Своя иконка
> Сворачиваемый admonition с кастомным заголовком.
{icon="twitter"}
```

> [!TIP]
> A Tip type admonition.

> [!TIP]+ Custom Title + Custom Icon
> A collapsible admonition with custom title.
{icon="twitter"}

Знак alert (`+` или `-`) — опционален, управляет сворачиванием. Работает только в Obsidian.

> [!INFO]- Поддерживаемые типы
> Допустимые типы: [GitHub alert types](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) и [Obsidian callout types](https://help.obsidian.md/callouts). Регистр не важен.
>
> **GitHub:** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`\
>
> `NOTE`: `Заметка`: Полезная информация — даже при беглом чтении.\
> `TIP`: `Совет`: Как сделать проще или лучше.\
> `IMPORTANT`: `Важно`: Ключевое для достижения цели.\
> `WARNING`: `Внимание`: Срочно — иначе будут проблемы.\
> `CAUTION`: `Осторожно`: Риски и последствия этого действия.\
>
> **Obsidian:** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote`

> [!INFO]- Кастомизация admonition
> См. [руководство по кастомизации admonition](https://github.com/nunocoracao/blowfish/blob/main/layouts/_default/_markup/render-blockquote.html).

## Accordion

`accordion` — сворачиваемые панели. Элементы задаются через `accordionItem`. Параметр `mode` управляет одновременным открытием нескольких элементов.

| Параметр | Описание |
| --------- | ------------------------------------------------------------------------------------------------- |
| `mode` | **Опционально.** `collapse` (один открыт) или `open` (несколько открыты). По умолчанию `collapse`. |
| `separated` | **Опционально.** `true` — каждый элемент как отдельная карточка. По умолчанию `false` (единый список). |

Параметры `accordionItem`:

| Параметр | Описание |
| --------- | --------------------------------------------------------------------------------------------------- |
| `title` | **Обязательно.** Заголовок в шапке элемента. |
| `open` | **Опционально.** `true` — элемент открыт по умолчанию. |
| `header` | **Опционально.** Алиас для `title`, для совместимости. |
| `icon` | **Опционально.** Иконка перед заголовком. |

**Пример 1: `mode="open"` (несколько элементов открыты) + `separated=true`**

```md
{{</* accordion mode="open" separated=true */>}}
  {{</* accordionItem title="Пример Markdown" icon="code" open=true */>}}
  Этот элемент демонстрирует рендеринг Markdown:
  - **Жирный текст**
  - Списки
  - `inline code`
  {{</* /accordionItem */>}}

  {{</* accordionItem title="Пример shortcode" md=false */>}}
  Этот элемент демонстрирует рендеринг shortcode с <code>md=false</code>:
  
  {{</* alert */>}}Это inline alert.{{</* /alert */>}}
  {{</* /accordionItem */>}}
{{</* /accordion */>}}
```

{{< accordion mode="open" separated=true >}}
  {{< accordionItem title="Markdown example" icon="code" open=true >}}
  This item demonstrates Markdown rendering:
  - **Bold text**
  - Lists
  - `inline code`
  {{< /accordionItem >}}

  {{< accordionItem title="Shortcode example" md=false >}}
  This item demonstrates shortcode rendering with <code>md=false</code>:
  
  {{< alert >}}This is an inline alert.{{< /alert >}}
  {{< /accordionItem >}}
{{< /accordion >}}

**Пример 2: `mode="collapse"` (только один элемент открыт)**

```md
{{</* accordion mode="collapse" */>}}
  {{</* accordionItem title="Первый элемент" open=true */>}}
  Этот элемент использует Markdown с коротким списком:
  1. Один
  2. Два
  3. Три
  {{</* /accordionItem */>}}

  {{</* accordionItem title="Второй элемент" md=false */>}}
  Этот элемент включает другой shortcode:
  {{</* badge */>}}Tip{{</* /badge */>}}
  {{</* /accordionItem */>}}
{{</* /accordion */>}}
```

{{< accordion mode="collapse" >}}
  {{< accordionItem title="First item" open=true >}}
  This item uses Markdown with a short list:
  1. One
  2. Two
  3. Three
  {{< /accordionItem >}}

  {{< accordionItem title="Second item" md=false >}}
  This item includes another shortcode:
  {{< badge >}}Tip{{< /badge >}}
  {{< /accordionItem >}}
{{< /accordion >}}

<br/><br/><br/>

## Article

`article` встраивает статью в markdown-файл. Параметр `link` — `.RelPermalink` встраиваемой статьи. Shortcode не отображает родительскую страницу. _Важно: если сайт в подпапке (например, /blowfish/), включай этот путь в ссылку._

| Параметр | Описание |
| --------- | -------------------------------------------------------- |
| `link` | **Обязательно.** `.RelPermalink` целевой статьи. |
| `showSummary` | **Опционально.** Показывать краткое описание статьи. По умолчанию — из конфигурации сайта. |
| `compactSummary` | **Опционально.** Компактный режим отображения описания. По умолчанию `false`. |

**Пример:**

```md
{{</* article link="/docs/welcome/" showSummary=true compactSummary=true */>}}
```

{{< article link="/docs/welcome/" showSummary=true compactSummary=true >}}

<br/><br/><br/>

## Badge

`badge` — стилизованный бейдж для метаданных.

**Пример:**

```md
{{</* badge */>}}
Новая статья!
{{</* /badge */>}}
```

{{< badge >}}
New article!
{{< /badge >}}

<br/><br/><br/>

## Button

`button` — стилизованная кнопка для основного действия. Три опциональных параметра: `href`, `target`, `rel` — URL, target и relation ссылки.

**Пример:**

```md
{{</* button href="#button" target="_self" */>}}
Призыв к действию
{{</* /button */>}}
```

{{< button href="#button" target="_self" >}}
Call to action
{{< /button >}}

<br/><br/><br/>

## Carousel

`carousel` — интерактивная карусель изображений. Адаптивная, занимает место одного изображения по вертикали. Все изображения на полную ширину родительского контейнера с заданным соотношением сторон (по умолчанию `16:9`).

| Параметр | Описание |
| --- | --- |
| `images` | **Обязательно.** Regex-строка для поиска изображений или URL. |
| `captions` | **Опционально.** Список пар `ключ:подпись`. Ключи — имена файлов (локальные) или полные URL (внешние). Подписи поддерживают Markdown. |
| `aspectRatio` | **Опционально.** Соотношение сторон. По умолчанию `16-9`. |
| `interval` | **Опционально.** Интервал автопрокрутки в миллисекундах. По умолчанию `2000` (2с). |

Подписи сопоставляются по ключу. Для локальных — имя файла (например, `01.jpg`). Для внешних — полный URL.

**Пример 1:** Соотношение 16:9, явный список изображений

```md
{{</* carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" */>}}
```

{{< carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}

**Пример 2:** Соотношение 21:9, regex для изображений

```md
{{</* carousel images="gallery/*" aspectRatio="21-9" interval="2500" */>}}
```

{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}

**Пример 3:** Подписи к изображениям

```md
{{</* carousel images="gallery/*" captions="{01.jpg:Первое изображение с *форматированием*,02.jpg:Второе изображение со [ссылкой](https://example.com)}" */>}}
```

{{< carousel images="gallery/*" captions="{01.jpg:First image with *formatting*,02.jpg:Second image with a [link](https://example.com)}" >}}

<br/><br/><br/>

## Chart

`chart` — графики через библиотеку Chart.js. Поддерживает [разные типы диаграмм](https://www.chartjs.org/docs/latest/samples/). Параметры — между тегами shortcode, Chart.js делает остальное.

Синтаксис и типы диаграмм — в [официальной документации Chart.js](https://www.chartjs.org/docs/latest/general/).

**Пример:**

```js
{{</* chart */>}}
type: 'bar',
data: {
  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
  datasets: [{
    label: '# of votes',
    data: [12, 19, 3, 5, 3],
  }]
}
{{</* /chart */>}}
```

{{< chart >}}
type: 'bar',
data: {
  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
  datasets: [{
    label: '# of votes',
    data: [12, 19, 3, 5, 3],
  }]
}
{{< /chart >}}

Еще примеры диаграмм:

## Bar chart

<!-- prettier-ignore-start -->
{{< chart >}}
type: 'bar',
data: {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
}
{{< /chart >}}
<!-- prettier-ignore-end -->

## Line chart

<!-- prettier-ignore-start -->
{{< chart >}}
type: 'line',
data: {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    tension: 0.2
  }]
}
{{< /chart >}}
<!-- prettier-ignore-end -->

## Doughnut chart

<!-- prettier-ignore-start -->
{{< chart >}}
type: 'doughnut',
data: {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgba(255, 99, 132, 0.7)',
      'rgba(54, 162, 235, 0.7)',
      'rgba(255, 205, 86, 0.7)'
    ],
    borderWidth: 0,
    hoverOffset: 4
  }]
}
{{< /chart >}}
<!-- prettier-ignore-end -->




<br/><br/><br/>

## Code Importer

Импорт кода из внешних источников без копипасты.

| Параметр | Описание |
| --------- | ------------------------------------------------------- |
| `url` | **Обязательно.** URL внешнего файла с кодом. |
| `type` | Тип кода для подсветки синтаксиса. |
| `startLine` | **Опционально.** Начальная строка импорта. |
| `endLine` | **Опционально.** Конечная строка импорта. |

**Пример:**

```md
{{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" */>}}

```

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}

```md
{{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18" */>}}

```

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18">}}

<br/><br/>

## Codeberg Card

`codeberg` — карточка репозитория Codeberg через API. Показывает актуальную статистику: звёзды, форки.

| Параметр | Описание |
| --------- | ----------------------------------------------------- |
| `repo` | [String] Репозиторий в формате `username/repo` |

**Пример:**

```md
{{</* codeberg repo="forgejo/forgejo" */>}}
```

{{< codeberg repo="forgejo/forgejo" >}}

<br/><br/><br/>

## Figure

`figure` — вставка изображений. Заменяет базовый Hugo figure, добавляет оптимизацию производительности.

Если изображение — page resource, Hugo Pipes оптимизирует и масштабирует его под разные разрешения. Статические ассеты и внешние URL вставляются как есть.

| Параметр | Описание |
| --- | --- |
| `src` | **Обязательно.** Локальный путь/имя файла или URL. Порядок поиска: [page resource](https://gohugo.io/content-management/page-resources/), затем `assets/`, затем `static/`. |
| `alt` | [Альтернативный текст](https://moz.com/learn/seo/alt-text) для изображения. |
| `caption` | Markdown-подпись под изображением. |
| `class` | Дополнительные CSS-классы для изображения. |
| `figureClass` | Дополнительные CSS-классы для обёртки `<figure>`. Полезно для галерей. |
| `href` | URL для ссылки на изображении. |
| `target` | Атрибут target для `href` URL. |
| `nozoom` | `nozoom=true` отключает "зум" изображения. Полезно в сочетании с `href`. |
| `default` | Возврат к стандартному поведению Hugo `figure`. `default=true`, далее — обычный [синтаксис Hugo shortcode](https://gohugo.io/content-management/shortcodes/#figure). |

Blowfish автоматически конвертирует изображения в стандартном Markdown-синтаксисе:

```md
![Alt text](image.jpg "Image caption")
```

**Пример:**

```md
{{</* figure
    src="abstract.jpg"
    alt="Abstract purple artwork"
    caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
    */>}}

<!-- ИЛИ -->

![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")
```

{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}

<br/><br/><br/>

## Forgejo Card

`forgejo` — карточка репозитория Forgejo через API. Актуальная статистика: звёзды, форки.

| Параметр | Описание |
| --------- | ----------------------------------------------------- |
| `repo` | [String] Репозиторий в формате `username/repo` |
| `server` | [String] URL сервера, например `https://v11.next.forgejo.org` |

**Пример:**

```md
{{</* forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" */>}}
```

{{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}

<br/><br/><br/>

## Gallery

`gallery` — адаптивная галерея с разнообразными компоновками.

Для изображений используй `img` теги с классом `class="grid-wXX"` — ширина колонки. Доступные ширины: от 10% до 100% с шагом 5%. Пример: 65% → `grid-w65`. Также доступны 33% и 66% для галерей в 3 колонки. Tailwind-индикаторы для адаптивной сетки.

Для подписей — `figure` shortcode внутри gallery. Ширину задавай через `figureClass`, текст — через `caption`.

**Пример 1: Обычная галерея**

```md
{{</* gallery */>}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{</* /gallery */>}}
```

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}

<br/><br/><br/>

**Пример 2: Адаптивная галерея**

```md
{{</* gallery */>}}
  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
{{</* /gallery */>}}
```

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
{{< /gallery >}}

<br/><br/><br/>

**Пример 3: Галерея с подписями (через `figure`)**

```md
{{</* gallery */>}}
  {{</* figure src="gallery/01.jpg" alt="Gallery image 1" caption="Первая подпись" figureClass="grid-w33" */>}}
  {{</* figure src="gallery/02.jpg" alt="Gallery image 2" caption="Вторая подпись" figureClass="grid-w33" */>}}
  {{</* figure src="gallery/03.jpg" alt="Gallery image 3" caption="Третья подпись" figureClass="grid-w33" */>}}
{{</* /gallery */>}}
```

{{< gallery >}}
  {{< figure src="gallery/01.jpg" alt="Gallery image 1" caption="First caption" figureClass="grid-w33" >}}
  {{< figure src="gallery/02.jpg" alt="Gallery image 2" caption="Second caption" figureClass="grid-w33" >}}
  {{< figure src="gallery/03.jpg" alt="Gallery image 3" caption="Third caption" figureClass="grid-w33" >}}
{{< /gallery >}}

<br/><br/><br/>

## Gist

`gist` — встраивание GitHub Gist: пользователь, ID, опционально — конкретный файл.

| Параметр | Описание |
| -------------- | ------------------------------------------------------------------ |
| `[0]` | [String] GitHub username |
| `[1]` | [String] Gist ID |
| `[2]` (опционально) | [String] Имя файла в Gist |

**Пример 1: Весь Gist**

```md
{{</* gist "octocat" "6cad326836d38bd3a7ae" */>}}
````

{{< gist "octocat" "6cad326836d38bd3a7ae" >}}

**Пример 2: Конкретный файл из Gist**

```md
{{</* gist "rauchg" "2052694" "README.md" */>}}
```

{{< gist "rauchg" "2052694" "README.md" >}}

<br/><br/><br/>

## Gitea Card

`gitea` — карточка репозитория Gitea через API. Актуальная статистика: звёзды, форки.

| Параметр | Описание |
| --------- | ----------------------------------------------------- |
| `repo` | [String] Репозиторий в формате `username/repo` |
| `server` | [String] URL сервера, например `https://git.fsfe.org` |

**Пример:**

```md
{{</* gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" */>}}
```

{{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}

<br/><br/><br/>

## GitHub Card

`github` — карточка GitHub-репозитория с актуальной статистикой: звёзды, форки.

| Параметр | Описание |
|-----------------|---------------------------------------------------------------|
| `repo` | [String] Репозиторий в формате `username/repo` |
| `showThumbnail` | **Опционально** [boolean] Показывать миниатюру репозитория |

**Пример:**

```md
{{</* github repo="nunocoracao/blowfish" showThumbnail=true */>}}
```

{{< github repo="nunocoracao/blowfish" showThumbnail=true >}}

<br/><br/><br/>

## GitLab Card

`gitlab` — карточка GitLab Project (репозитория в терминологии GitLab). Актуальная статистика: звёзды, форки. В отличие от `github`, не показывает основной язык проекта. Поддерживает кастомный URL инстанса GitLab — если доступен endpoint `api/v4/projects/`, работает с self-hosted и enterprise.

| Параметр | Описание |
| ----------- | ----------------------------------------------------------------------- |
| `projectID` | [String] Числовой ProjectID GitLab |
| `baseURL` | [String] URL инстанса GitLab, по умолчанию `https://gitlab.com/` |

**Пример:**

```md
{{</* gitlab projectID="278964" */>}}
```

{{< gitlab projectID="278964" >}}

<br/><br/><br/>

## Hugging Face Card

`huggingface` — карточка модели или датасета Hugging Face. Актуальная информация: лайки, загрузки, тип и описание.

| Параметр | Описание |
|------------|----------------------------------------------------------------|
| `model` | [String] Модель в формате `username/model` |
| `dataset` | [String] Датасет в формате `username/dataset` |

**Важно:** Используй либо `model`, либо `dataset` — не оба.

**Пример 1 (Модель):**

```md
{{</* huggingface model="google-bert/bert-base-uncased" */>}}
```

{{< huggingface model="google-bert/bert-base-uncased" >}}

**Пример 2 (Датасет):**

```md
{{</* huggingface dataset="stanfordnlp/imdb" */>}}
```

{{< huggingface dataset="stanfordnlp/imdb" >}}

<br/><br/><br/>

## Icon

`icon` — SVG-иконка, масштабируется под текущий размер текста. Единственный параметр — имя иконки.

**Пример:**

```md
{{</* icon "github" */>}}
```

**Результат:** {{< icon "github" >}}

Иконки загружаются через Hugo pipelines — максимальная гибкость. Blowfish включает набор встроенных иконок для соцсетей, ссылок и прочего.

Свои иконки: положи SVG в `assets/icons/` проекта. В shortcode используй имя файла без `.svg`.

<br/><br/><br/>

## KaTeX

`katex` — математические выражения через KaTeX. Синтаксис — в [справочнике TeX-функций](https://katex.org/docs/supported.html).

Shortcode достаточно вставить один раз на странице — KaTeX автоматически отрендерит всю разметку. Поддерживаются inline и block нотации.

Inline: оберни выражение в `\(` и `\)`. Block: используй `$$`.

**Пример:**

```md
{{</* katex */>}}
\(f(a,b,c) = (a^2+b^2+c^2)^3\)
```

{{< katex >}}
\(f(a,b,c) = (a^2+b^2+c^2)^3\)

<br/><br/><br/>

## Keyword

`keyword` — визуальное выделение важных слов и фраз (например, профессиональных навыков). `keywordList` — группировка нескольких `keyword`.

| Параметр | Описание |
| --------- | --------------------------------------- |
| `icon` | Опциональная иконка для keyword |

Внутри — Markdown.

**Пример 1:**

```md
{{</* keyword */>}} *Супер* навык {{</* /keyword */>}}
```

{{< keyword >}} _Super_ skill {{< /keyword >}}

**Пример 2:**

```md
{{</* keywordList */>}}
{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
{{</* keyword icon="code" */>}} **Важный** навык {{</* /keyword */>}}
{{</* /keywordList */>}}

{{</* keyword */>}} *Отдельный* навык {{</* /keyword */>}}
```

{{< keywordList >}}
{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
{{< /keywordList >}}
{{< keyword >}} _Standalone_ skill {{< /keyword >}}

<br/><br/><br/>

## Lead

`lead` — акцент на начало статьи. Введение или важная информация. Оберни любой Markdown-контент.

**Пример:**

```md
{{</* lead */>}}
Когда жизнь даёт тебе лимоны — делай лимонад.
{{</* /lead */>}}
```

{{< lead >}}
When life gives you lemons, make lemonade.
{{< /lead >}}

<br/><br/><br/>

## List

`list` — список последних статей. Обязательный параметр `limit` ограничивает количество. `where` и `value` фильтруют статьи по параметрам. Shortcode не отображает родительскую страницу, но учитывает её в limit.

| Параметр | Описание |
| --- | --- |
| `limit` | **Обязательно.** Количество статей. |
| `title` | Заголовок списка, по умолчанию `Recent` |
| `cardView` | Карточный вид, по умолчанию `false` |
| `where` | Переменная для фильтрации, например `Type` |
| `value` | Значение для `where`, например для `Type` — `sample` |

{{< alert >}}
Значения `where` и `value` используются в запросе `where .Site.RegularPages $where $value`. Доступные параметры — в [документации Hugo](https://gohugo.io/methods/page/).
{{</ alert >}}

**Пример 1:**

```md
{{</* list limit=2 */>}}
```

{{< list limit=2 >}}

**Пример 2:**

```md
{{</* list title="Samples" cardView=true limit=6 where="Type" value="sample" */>}}
```

{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}}

<br/><br/><br/>

## LTR/RTL

`ltr` и `rtl` — смешивание направлений текста. Пользователи RTL-языков могут вставлять LTR-фрагменты. С `%` как внешним разделителем — Markdown внутри рендерится нормально (см. [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown)).

**Пример:**

```md
- Это markdown-список.
- Направление по умолчанию — LTR
{{%/* rtl */%}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
{{%/* /rtl */%}}
```

- This is an markdown list.
- Its per default a LTR direction
{{% rtl %}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
{{% /rtl %}}

<br/><br/><br/>

## Markdown Importer

Импорт markdown-файлов из внешних источников без копипасты.

| Параметр | Описание |
| --------- | ------------------------------------------------------- |
| `url` | **Обязательно.** URL внешнего markdown-файла. |

**Пример:**

```md
{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}}

```

{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}

<br/><br/>

## Mermaid

`mermaid` — диаграммы и визуализации через текст. Под капотом Mermaid — широкий набор диаграмм, графиков и форматов.

Пиши синтаксис Mermaid внутри shortcode — плагин сделает остальное.

Синтаксис и типы диаграмм — в [официальной документации Mermaid](https://mermaid-js.github.io/).

**Пример:**

```md
{{</* mermaid */>}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{</* /mermaid */>}}
```

{{< mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{< /mermaid >}}

<br/><br/><br/>

## Swatches

`swatches` — набор до трёх цветов для демонстрации палитры. Параметры — HEX-коды.

**Пример:**

```md
{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}}
```

**Результат:**
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}

<br/><br/><br/>

## Tabs

`tabs` — вкладки для вариантов одного шага. Пример: инструкции по установке VS Code на разных платформах.

| Параметр | Описание |
| --------- | -------------------------------------------------------- |
| `group` | **Опционально.** Имя группы для синхронизации. Вкладки с одинаковым `group` переключаются вместе. |
| `default` | **Опционально.** Метка активной вкладки по умолчанию. Если не задано — первая вкладка. |
| `label` | **Обязательно.** Текст на кнопке вкладки. |
| `icon` | **Опционально.** Иконка перед текстом. |

**Пример 1: Базовое использование**

`````md
{{</* tabs */>}}

    {{</* tab label="Windows" */>}}
    Установка через Chocolatey:

    ```pwsh
    choco install vscode.install
    ```

    или через WinGet

    ```pwsh
    winget install -e --id Microsoft.VisualStudioCode
    ```
    {{</* /tab */>}}

    {{</* tab label="macOS" */>}}
    ```bash
    brew install --cask visual-studio-code
    ```
    {{</* /tab */>}}

    {{</* tab label="Linux" */>}}
    См. [документацию](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
    {{</* /tab */>}}

{{</* /tabs */>}}
`````

**Результат:**

{{< tabs >}}

    {{< tab label="Windows" >}}
    Install using Chocolatey:

    ```pwsh
    choco install vscode.install
    ```

    or install using WinGet

    ```pwsh
    winget install -e --id Microsoft.VisualStudioCode
    ```
    {{< /tab >}}

    {{< tab label="macOS" >}}
    ```bash
    brew install --cask visual-studio-code
    ```
    {{< /tab >}}

    {{< tab label="Linux" >}}
    See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
    {{< /tab >}}

{{< /tabs >}}

**Пример 2: С Group, Default и Icon**

`````md
{{</* tabs group="lang" default="Python" */>}}
    {{</* tab label="JavaScript" icon="code" */>}}
    ```javascript
    console.log("Hello");
    ```
    {{</* /tab */>}}

    {{</* tab label="Python" icon="sun" */>}}
    ```python
    print("Hello")
    ```
    {{</* /tab */>}}

    {{</* tab label="Go" icon="moon" */>}}
    ```go
    fmt.Println("Hello")
    ```
    {{</* /tab */>}}
{{</* /tabs */>}}

{{</* tabs group="lang" default="Python" */>}}
    {{</* tab label="JavaScript" icon="code" */>}}
    ```javascript
    const add = (a, b) => a + b;
    ```
    {{</* /tab */>}}

    {{</* tab label="Python" icon="sun" */>}}
    ```python
    def add(a, b): return a + b
    ```
    {{</* /tab */>}}

    {{</* tab label="Go" icon="moon" */>}}
    ```go
    func add(a, b int) int { return a + b }
    ```
    {{</* /tab */>}}
{{</* /tabs */>}}
`````

**Результат:**

{{< tabs group="lang" default="Python" >}}
    {{< tab label="JavaScript" icon="code" >}}
    ```javascript
    console.log("Hello");
    ```
    {{< /tab >}}

    {{< tab label="Python" icon="sun" >}}
    ```python
    print("Hello")
    ```
    {{< /tab >}}

    {{< tab label="Go" icon="moon" >}}
    ```go
    fmt.Println("Hello")
    ```
    {{< /tab >}}
{{< /tabs >}}

{{< tabs group="lang" default="Python" >}}
    {{< tab label="JavaScript" icon="code" >}}
    ```javascript
    const add = (a, b) => a + b;
    ```
    {{< /tab >}}

    {{< tab label="Python" icon="sun" >}}
    ```python
    def add(a, b): return a + b
    ```
    {{< /tab >}}

    {{< tab label="Go" icon="moon" >}}
    ```go
    func add(a, b int) int { return a + b }
    ```
    {{< /tab >}}
{{< /tabs >}}

Обе группы вкладок имеют одинаковый `group="lang"` — клик по любой вкладке синхронизирует обе группы. `default="Python"` делает Python активной вкладкой по умолчанию, `icon="code"` добавляет иконку перед текстом.

<br/><br/><br/>

## Timeline

`timeline` — визуальная хронология: профессиональный опыт, достижения проекта и т.д. Элементы — через `timelineItem`.

| Параметр | Описание |
| ----------- | -------------------------------------------- |
| `md` | Рендерить контент как Markdown (true/false) |
| `icon` | Иконка в визуальных элементах таймлайна |
| `header` | Заголовок записи |
| `badge` | Текст в бейдже справа сверху |
| `subheader` | Подзаголовок записи |

**Пример:**

```md
{{</* timeline */>}}

{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
{{</* /timelineItem */>}}


{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}}
With html code
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
{{</* /timelineItem */>}}

{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}}
With other shortcodes
{{</* gallery */>}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{</* /gallery */>}}
{{</* /timelineItem */>}}

{{</* timelineItem icon="code" header="Another Awesome Header"*/>}}
{{</* github repo="nunocoracao/blowfish" */>}}
{{</* /timelineItem */>}}

{{</* /timeline */>}}
```

{{< timeline >}}

{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
{{</ timelineItem >}}

{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}}
With html code
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
{{</ timelineItem >}}

{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
With other shortcodes
{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}
{{</ timelineItem >}}
{{< timelineItem icon="code" header="Another Awesome Header">}}
{{< github repo="nunocoracao/blowfish" >}}
{{</ timelineItem >}}
{{</ timeline >}}

<br/><br/><br/>

## TypeIt

[TypeIt](https://www.typeitjs.com) — самый универсальный JS-инструмент для эффекта печатной машинки. Простая конфигурация: одна или несколько строк, переносы, удаление и замена, сложный HTML.

Blowfish реализует подмножество функций TypeIt через shortcode. Текст — внутри `typeit`, поведение — через параметры.

| Параметр | Описание |
| --- | --- |
| `tag` | [String] HTML-тег для рендеринга строк. |
| `classList` | [String] CSS-классы для HTML-элемента. |
| `initialString` | [String] Начальная строка, которая будет заменена. |
| `speed` | [number] Скорость печати в миллисекундах между шагами. |
| `lifeLike` | [boolean] Неравномерный темп печати, как у человека. |
| `startDelay` | [number] Задержка перед началом печати после инициализации. |
| `breakLines` | [boolean] Печатать строки друг под другом (true) или удалять и заменять (false). |
| `waitUntilVisible` | [boolean] Начинать при загрузке или когда элемент станет видимым. По умолчанию `true`. |
| `loop` | [boolean] Зацикливать строки после завершения. |

**Пример 1:**

```md
{{</* typeit */>}}
Lorem ipsum dolor sit amet 
{{</* /typeit */>}}
```

{{< typeit >}}
Lorem ipsum dolor sit amet
{{< /typeit >}}

**Пример 2:**

```md
{{</* typeit 
  tag=h1
  lifeLike=true
*/>}}
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
{{</* /typeit */>}}
```

{{< typeit
  tag=h1
  lifeLike=true
>}}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
{{< /typeit >}}

**Пример 3:**

```md
{{</* typeit 
  tag=h3
  speed=50
  breakLines=false
  loop=true
*/>}}
"Frankly, my dear, I don't give a damn." Gone with the Wind (1939)
"I'm gonna make him an offer he can't refuse." The Godfather (1972)
"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
{{</* /typeit */>}}
```

{{< typeit
  tag=h3
  speed=50
  breakLines=false
  loop=true
>}}
"Frankly, my dear, I don't give a damn." Gone with the Wind (1939)
"I'm gonna make him an offer he can't refuse." The Godfather (1972)
"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
{{< /typeit >}}

<br/><br/><br/>

## Video

`video` — встраивание локальных и внешних видео. Shortcode рендерит `<figure>` с адаптивным плеером и опциональной подписью.

| Параметр | Описание |
| --- | --- |
| `src` | **Обязательно.** URL видео или локальный путь. Порядок поиска: page resource → `assets/` → `static/`. |
| `poster` | Опциональный URL или путь к постеру. Если не задан — ищет изображение с тем же именем в page bundle. |
| `caption` | Опциональная Markdown-подпись под видео. |
| `autoplay` | `true`/`false`. Автовоспроизведение. По умолчанию `false`. |
| `loop` | `true`/`false`. Зацикливание. По умолчанию `false`. |
| `muted` | `true`/`false`. Без звука. По умолчанию `false`. |
| `controls` | `true`/`false`. Стандартные элементы управления браузера. По умолчанию `true`. |
| `playsinline` | `true`/`false`. Встроенное воспроизведение на мобильных. По умолчанию `true`. |
| `preload` | `metadata` (загрузить инфо), `none` (экономить трафик), `auto` (предзагрузка). По умолчанию `metadata`. |
| `start` | Опциональное время начала в секундах. |
| `end` | Опциональное время окончания в секундах. |
| `ratio` | Зарезервированное соотношение сторон. `16/9`, `4/3`, `1/1` или кастомное `W/H`. По умолчанию `16/9`. |
| `fit` | Как видео вписывается в соотношение: `contain` (без обрезки), `cover` (обрезка до заполнения), `fill` (растянуть). По умолчанию `contain`. |

Если браузер не воспроизводит видео — плеер покажет fallback-сообщение со ссылкой на скачивание.

**Пример:**

```md
{{</* video
    src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
    poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg"
    caption="**Public domain demo** — CC0 video and poster."
    loop=true
    muted=true
*/>}}
```

{{< video
  src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg"
  caption="**Public domain demo** — CC0 video and poster."
  loop=true
  muted=true
>}}

<br/><br/><br/>

## Youtube Lite

Лёгкое встраивание YouTube через [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed). Библиотека быстрее и эффективнее стандартных embed.

| Параметр | Описание |
| --------- | -------------------------------------------- |
| `id` | [String] ID YouTube-видео |
| `label` | [String] Метка видео |
| `params` | [String] Дополнительные параметры воспроизведения |

**Пример 1:**

```md
{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}}
```

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}

**Пример 2:**

Все [параметры плеера YouTube](https://developers.google.com/youtube/player_parameters#Parameters) для `params`:

> Это видео начнётся с 130 секунды (2м10с)

```md
{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130" */>}}
```

> Это видео без элементов управления, начнётся с 130 секунды и остановится через 10 секунд.

Для объединения нескольких параметров — символ `&` между ними:

```md
{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" */>}}
```

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}}

Подробнее — в [репозитории youtubeLite](https://github.com/paulirish/lite-youtube-embed/blob/master/readme.md#custom-player-parameters) и на странице [параметров плеера YouTube](https://developers.google.com/youtube/player_parameters#Parameters).
