oakazanin/index.md at dc532ca592e289a8e3fa0d473e53b035c78555d3

47 KiB

Raw Blame History

title

weight

draft

description

slug

Alert

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

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

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

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

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

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

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

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

{{< alert "twitter" >}} Don't forget to follow me on Twitter. {{< /alert >}}

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

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

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

Admonition

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

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

> [!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 и Obsidian callout types. Регистр не важен.

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.

Accordion

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

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

Параметры accordionItem:

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

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

{{</* 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 md=false:

{{< alert >}}This is an inline alert.{{< /alert >}} {{< /accordionItem >}} {{< /accordion >}}

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

{{</* 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:

One
Two
Three {{< /accordionItem >}}

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

Article

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

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

Пример:

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

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

Badge

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

Пример:

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

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

Button

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

Пример:

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

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

Carousel

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

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

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

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

{{</* 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 для изображений

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

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

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

{{</* 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}" >}}

Chart

chart — графики через библиотеку Chart.js. Поддерживает разные типы диаграмм. Параметры — между тегами shortcode, Chart.js делает остальное.

Синтаксис и типы диаграмм — в официальной документации Chart.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

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

Line chart

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

Doughnut chart

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

Code Importer

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

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

Пример:

{{</* 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" >}}

{{</* 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">}}

Codeberg Card

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

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

Пример:

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

Figure

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

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

Параметр	Описание
`src`	Обязательно. Локальный путь/имя файла или URL. Порядок поиска: page resource, затем `assets/`, затем `static/`.
`alt`	Альтернативный текст для изображения.
`caption`	Markdown-подпись под изображением.
`class`	Дополнительные CSS-классы для изображения.
`figureClass`	Дополнительные CSS-классы для обёртки `<figure>`. Полезно для галерей.
`href`	URL для ссылки на изображении.
`target`	Атрибут target для `href` URL.
`nozoom`	`nozoom=true` отключает "зум" изображения. Полезно в сочетании с `href`.
`default`	Возврат к стандартному поведению Hugo `figure`. `default=true`, далее — обычный синтаксис Hugo shortcode.

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

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

Пример:

{{</* 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 on Unsplash" >}}

Forgejo Card

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

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

Пример:

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

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

Gallery

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

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

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

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

{{</* 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 */>}}

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

{{</* 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 */>}}

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

{{</* 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 >}}

Gist

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

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

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

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

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

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

Gitea Card

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

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

Пример:

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

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

GitHub Card

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

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

Пример:

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

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

Пример:

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

Hugging Face Card

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

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

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

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

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

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

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

Icon

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

Пример:

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

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

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

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

KaTeX

katex — математические выражения через KaTeX. Синтаксис — в справочнике TeX-функций.

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

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

Пример:

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

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

Keyword

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

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

Внутри — Markdown.

Пример 1:

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

{{< keyword >}} Super skill {{< /keyword >}}

Пример 2:

{{</* 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 >}}

Lead

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

Пример:

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

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

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. {{</ alert >}}

Пример 1:

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

Пример 2:

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

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

LTR/RTL

ltr и rtl — смешивание направлений текста. Пользователи RTL-языков могут вставлять LTR-фрагменты. С % как внешним разделителем — Markdown внутри рендерится нормально (см. Hugo shortcodes).

Пример:

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

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

Markdown Importer

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

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

Пример:

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

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

Mermaid

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

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

Синтаксис и типы диаграмм — в официальной документации Mermaid.

Пример:

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

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

Swatches

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

Пример:

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

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

Tabs

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

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

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

{{</* 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 */>}}

Результат:

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

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

{{</* 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 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 >}}

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

Timeline

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

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

Пример:

{{</* 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 */>}}

{{< 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

Coffee
Tea
Milk

{{}}

{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}} With other shortcodes {{< gallery >}} {{< /gallery >}} {{</ timelineItem >}} {{< timelineItem icon="code" header="Another Awesome Header">}} {{< github repo="nunocoracao/blowfish" >}} {{</ timelineItem >}} {{</ timeline >}}

TypeIt

TypeIt — самый универсальный 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:

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

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

Пример 2:

{{</* 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:

{{</* 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 >}}

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-сообщение со ссылкой на скачивание.

Пример:

{{</* 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

}}

Youtube Lite

Лёгкое встраивание YouTube через lite-youtube-embed. Библиотека быстрее и эффективнее стандартных embed.

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

Пример 1:

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

Пример 2:

Все параметры плеера YouTube для params:

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

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

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

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

{{</* 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 и на странице параметров плеера YouTube.

47 KiB Raw Blame History Unescape Escape

Alert

Admonition

Accordion

Article

Badge

Button

Carousel

Chart

Bar chart

Line chart

Doughnut chart

Code Importer

Codeberg Card

Figure

Forgejo Card

Gallery

Gist

Gitea Card

GitHub Card

GitLab Card

Hugging Face Card

Icon

KaTeX

Keyword

Lead

List

LTR/RTL

Markdown Importer

Mermaid

Swatches

Tabs

Timeline

TypeIt

Video

Youtube Lite

47 KiB

Raw Blame History