## 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" >}}
## Gallery `gallery` — адаптивная галерея с разнообразными компоновками. Для изображений используй `img` теги с классом `class="grid-wXX"` — ширина колонки. Доступные ширины: от 10% до 100% с шагом 5%. Пример: 65% → `grid-w65`. Также доступны 33% и 66% для галерей в 3 колонки. Tailwind-индикаторы для адаптивной сетки. Для подписей — `figure` shortcode внутри gallery. Ширину задавай через `figureClass`, текст — через `caption`. **Пример 1: Обычная галерея** ```md {{}}
{{}}
```
{{< gallery >}}
{{< /gallery >}}
**Пример 2: Адаптивная галерея** ```md {{}}
{{}}
```
{{< gallery >}}
{{< /gallery >}}
**Пример 3: Галерея с подписями (через `figure`)** ```md {{}} {{}} {{}} {{}} {{}} ``` {{< 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** ```md {{}} ```` {{< gist "octocat" "6cad326836d38bd3a7ae" >}} **Пример 2: Конкретный файл из Gist** ```md {{}} ``` {{< gist "rauchg" "2052694" "README.md" >}}
## 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" >}}
## GitHub Card `github` — карточка GitHub-репозитория с актуальной статистикой: звёзды, форки. | Параметр | Описание | |-----------------|---------------------------------------------------------------| | `repo` | [String] Репозиторий в формате `username/repo` | | `showThumbnail` | **Опционально** [boolean] Показывать миниатюру репозитория | **Пример:** ```md {{}} ``` {{< 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/` | **Пример:** ```md {{}} ``` {{< gitlab projectID="278964" >}}
## 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" >}} **Пример 2 (Датасет):** ```md {{}} ``` {{< huggingface dataset="stanfordnlp/imdb" >}}
## Icon `icon` — SVG-иконка, масштабируется под текущий размер текста. Единственный параметр — имя иконки. **Пример:** ```md {{}} ``` **Результат:** {{< icon "github" >}} Иконки загружаются через Hugo pipelines — максимальная гибкость. Blowfish включает набор встроенных иконок для соцсетей, ссылок и прочего. Свои иконки: положи SVG в `assets/icons/` проекта. В shortcode используй имя файла без `.svg`.
## KaTeX `katex` — математические выражения через KaTeX. Синтаксис — в [справочнике TeX-функций](https://katex.org/docs/supported.html). Shortcode достаточно вставить один раз на странице — KaTeX автоматически отрендерит всю разметку. Поддерживаются inline и block нотации. Inline: оберни выражение в `\(` и `\)`. Block: используй `$$`. **Пример:** ```md {{}} \(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:** ```md {{}} *Супер* навык {{}} ``` {{< keyword >}} _Super_ skill {{< /keyword >}} **Пример 2:** ```md {{}} {{}} Lorem ipsum dolor. {{}} {{}} **Важный** навык {{}} {{}} {{}} *Отдельный* навык {{}} ``` {{< keywordList >}} {{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}} {{< keyword icon="code" >}} **Important** skill {{< /keyword >}} {{< /keywordList >}} {{< keyword >}} _Standalone_ skill {{< /keyword >}}
## Lead `lead` — акцент на начало статьи. Введение или важная информация. Оберни любой Markdown-контент. **Пример:** ```md {{}} Когда жизнь даёт тебе лимоны — делай лимонад. {{}} ``` {{< 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](https://gohugo.io/methods/page/). {{}} **Пример 1:** ```md {{}} ``` {{< list limit=2 >}} **Пример 2:** ```md {{}} ``` {{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}}
## 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 %}}
## Markdown Importer Импорт markdown-файлов из внешних источников без копипасты. | Параметр | Описание | | --------- | ------------------------------------------------------- | | `url` | **Обязательно.** URL внешнего markdown-файла. | **Пример:** ```md {{}} ``` {{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}
## Mermaid `mermaid` — диаграммы и визуализации через текст. Под капотом Mermaid — широкий набор диаграмм, графиков и форматов. Пиши синтаксис Mermaid внутри shortcode — плагин сделает остальное. Синтаксис и типы диаграмм — в [официальной документации Mermaid](https://mermaid-js.github.io/). **Пример:** ```md {{}} graph LR; A[Lemons]-->B[Lemonade]; B-->C[Profit] {{}} ``` {{< mermaid >}} graph LR; A[Lemons]-->B[Lemonade]; B-->C[Profit] {{< /mermaid >}}
## Swatches `swatches` — набор до трёх цветов для демонстрации палитры. Параметры — HEX-коды. **Пример:** ```md {{}} ``` **Результат:** {{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
## Tabs `tabs` — вкладки для вариантов одного шага. Пример: инструкции по установке VS Code на разных платформах. | Параметр | Описание | | --------- | -------------------------------------------------------- | | `group` | **Опционально.** Имя группы для синхронизации. Вкладки с одинаковым `group` переключаются вместе. | | `default` | **Опционально.** Метка активной вкладки по умолчанию. Если не задано — первая вкладка. | | `label` | **Обязательно.** Текст на кнопке вкладки. | | `icon` | **Опционально.** Иконка перед текстом. | **Пример 1: Базовое использование** `````md {{}} {{}} Установка через Chocolatey: ```pwsh choco install vscode.install ``` или через WinGet ```pwsh winget install -e --id Microsoft.VisualStudioCode ``` {{}} {{}} ```bash brew install --cask visual-studio-code ``` {{}} {{}} См. [документацию](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux). {{}} {{}} ````` **Результат:** {{< 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 {{}} {{}} ```javascript console.log("Hello"); ``` {{}} {{}} ```python print("Hello") ``` {{}} {{}} ```go fmt.Println("Hello") ``` {{}} {{}} {{}} {{}} ```javascript const add = (a, b) => a + b; ``` {{}} {{}} ```python def add(a, b): return a + b ``` {{}} {{}} ```go func add(a, b int) int { return a + b } ``` {{}} {{}} ````` **Результат:** {{< 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"` добавляет иконку перед текстом.
## Timeline `timeline` — визуальная хронология: профессиональный опыт, достижения проекта и т.д. Элементы — через `timelineItem`. | Параметр | Описание | | ----------- | -------------------------------------------- | | `md` | Рендерить контент как Markdown (true/false) | | `icon` | Иконка в визуальных элементах таймлайна | | `header` | Заголовок записи | | `badge` | Текст в бейдже справа сверху | | `subheader` | Подзаголовок записи | **Пример:** ```md {{}} {{}} 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. {{}} {{}} With html code
- Coffee
- Tea
- Milk
{{}}
{{}}
{{}}
{{}}
{{}}
{{}}
```
{{< 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 icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}}
With html code
- Coffee
- Tea
- Milk
{{< /gallery >}}
{{}}
{{< timelineItem icon="code" header="Another Awesome Header">}}
{{< github repo="nunocoracao/blowfish" >}}
{{}}
{{}}
## 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 {{}} Lorem ipsum dolor sit amet {{}} ``` {{< typeit >}} Lorem ipsum dolor sit amet {{< /typeit >}} **Пример 2:** ```md {{}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. {{}} ``` {{< typeit tag=h1 lifeLike=true >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. {{< /typeit >}} **Пример 3:** ```md {{}} "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 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 рендерит `
## 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" >}} **Пример 2:** Все [параметры плеера YouTube](https://developers.google.com/youtube/player_parameters#Parameters) для `params`: > Это видео начнётся с 130 секунды (2м10с) ```md {{}} ``` > Это видео без элементов управления, начнётся с 130 секунды и остановится через 10 секунд. Для объединения нескольких параметров — символ `&` между ними: ```md {{}} ``` {{< 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).