oakazanin/public/cheatsheets/shortcodes/index.html

7534 lines
286 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html
lang="ru"
dir="ltr"
class="scroll-smooth"
data-default-appearance="dark"
data-auto-appearance="false"><head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8">
<meta http-equiv="content-language" content="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color">
<title>Shortcodes &middot; Олег Казанин</title>
<meta name="title" content="Shortcodes &middot; Олег Казанин">
<meta name="description" content="Все shortcodes темы Blowfish — справочник для практиков.">
<meta name="keywords" content="shortcodes,mermaid,icon,lead,docs,">
<link rel="canonical" href="http://192.168.11.190:1313/cheatsheets/shortcodes/">
<meta name="author" content="Олег Казанин">
<link href="https://t.me/oa_msk" rel="me">
<link href="https://oakazanin.ru/" rel="me">
<link href="https://git.jn4.ru/astronit" rel="me">
<link href="https://obrtv.ru/a/chiefengineer" rel="me">
<meta property="og:url" content="http://192.168.11.190:1313/cheatsheets/shortcodes/">
<meta property="og:site_name" content="Олег Казанин">
<meta property="og:title" content="Shortcodes">
<meta property="og:description" content="Все shortcodes темы Blowfish — справочник для практиков.">
<meta property="og:locale" content="ru">
<meta property="og:type" content="article">
<meta property="article:section" content="cheatsheets">
<meta property="article:tag" content="Shortcodes">
<meta property="article:tag" content="Mermaid">
<meta property="article:tag" content="Icon">
<meta property="article:tag" content="Lead">
<meta property="article:tag" content="Docs">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Shortcodes">
<meta name="twitter:description" content="Все shortcodes темы Blowfish — справочник для практиков.">
<link
type="text/css"
rel="stylesheet"
href="/css/main.bundle.min.8bef0953ac7ae43aab1ba235d4df9cb29be7107c6f8de2fc281d504cc77d40bd80183fe93e6c8d96480fb0065184b63f24c8b33974ce850cbe070cafcf9dc107.css"
integrity="sha512-i&#43;8JU6x65DqrG6I11N&#43;cspvnEHxvjeL8KB1QTMd9QL2AGD/pPmyNlkgPsAZRhLY/JMizOXTOhQy&#43;Bwyvz53BBw==">
<script
type="text/javascript"
src="/js/appearance.min.a0c4d367419d691bf95fc98ffcaf55ce81db3412c3dfbd6c4fbe968f56f77347f5a8512b0916a65a5f496dbec1ef0590dbadcf2fbd0de3c919e525f11c32d0e3.js"
integrity="sha512-oMTTZ0GdaRv5X8mP/K9VzoHbNBLD371sT76Wj1b3c0f1qFErCRamWl9Jbb7B7wWQ263PL70N48kZ5SXxHDLQ4w=="></script>
<script src="/lib/zoom/zoom.min.umd.a527109b68c082a70f3697716dd72a9d5aa8b545cf800cecbbc7399f2ca6f6e0ce3e431f2062b48bbfa47c9ea42822714060bef309be073f49b9c0e30d318d7b.js" integrity="sha512-pScQm2jAgqcPNpdxbdcqnVqotUXPgAzsu8c5nyym9uDOPkMfIGK0i7&#43;kfJ6kKCJxQGC&#43;8wm&#43;Bz9JucDjDTGNew=="></script>
<script
defer
type="text/javascript"
id="script-bundle"
src="/js/main.bundle.min.858f7f82734cfae08d59fcf8d0eb186f01706a84e2f7d20d39edfd7bc8bed6166e02d5c65ecce1de82b1ac52d1e01d77bd1a82d19186fdae5fe6e12d867fcf68.js"
integrity="sha512-hY9/gnNM&#43;uCNWfz40OsYbwFwaoTi99INOe39e8i&#43;1hZuAtXGXszh3oKxrFLR4B13vRqC0ZGG/a5f5uEthn/PaA=="
data-copy="Копировать"
data-copied="Скопировано"></script>
<script
defer
type="text/javascript"
src="/js/mermaid.bundle.c63c50c6884d5e5a17085b7ea24a2ef1f2c96af692b3e243dfab2ab9ef6e6c045a111b16d5cd3ce4d3f1a4919e6a86c4d49c16f5cf9b44db6dd7f6ffbc8d4b49.js"
integrity="sha512-xjxQxohNXloXCFt&#43;okou8fLJavaSs&#43;JD36sque9ubARaERsW1c085NPxpJGeaobE1JwW9c&#43;bRNtt1/b/vI1LSQ=="></script>
<script
defer
type="text/javascript"
src="/js/chart.bundle.05282608efd9e901cba5f63634aa16e9c8534061c66889d3312cba36ccbd4c1f242e1c7704fc80aaf81408d19f359afb73618d76021ef9bb3604c124941dc18c.js"
integrity="sha512-BSgmCO/Z6QHLpfY2NKoW6chTQGHGaInTMSy6Nsy9TB8kLhx3BPyAqvgUCNGfNZr7c2GNdgIe&#43;bs2BMEklB3BjA=="></script>
<link
type="text/css"
rel="stylesheet"
href="/lib/katex/katex.min.8165100d4e41db6506cffac421025eebc765641d721cafd22814d4f11dd1da51dbdf6b6de56d5f986eb215db71c32019a2e6b1eaa0d57c6196d23da6ccfd659c.css"
integrity="sha512-gWUQDU5B22UGz/rEIQJe68dlZB1yHK/SKBTU8R3R2lHb32tt5W1fmG6yFdtxwyAZouax6qDVfGGW0j2mzP1lnA==">
<script
defer
type="text/javascript"
src="/js/katex.bundle.be2373409b7a64f041b7eb28ad641e31c67e6761bacac7cc4d75baf9ba55611e373f28a8d91bb3719d2d3543a1312acefdb54a3e24858a157fd1569c942cc76c.js"
integrity="sha512-viNzQJt6ZPBBt&#43;sorWQeMcZ&#43;Z2G6ysfMTXW6&#43;bpVYR43Pyio2RuzcZ0tNUOhMSrO/bVKPiSFihV/0VaclCzHbA=="
id="katex-render"></script>
<script defer src="/lib/typeit/typeit.umd.57f9bc6e047efc875cb4f2e9ca74c802de33638d2c3aff6d9b7eb3c7588c24649b6c3e51cd45f49c0ed0cf72aedbd694bf2d35f358a34076d63f9febabc0bd6f.js" integrity="sha512-V/m8bgR&#43;/IdctPLpynTIAt4zY40sOv9tm36zx1iMJGSbbD5RzUX0nA7Qz3Ku29aUvy0181ijQHbWP5/rq8C9bw=="></script>
<link
type="text/css"
rel="stylesheet"
href="/css/components/gallery.5ecf2cf593db008f5b1a9adc1bac0f07fd02452d9b9f3b024618673e799cb2090cbf655712937b710dfe6422e08e163234b64b43ddae4b41642e6b560c46418d.css"
integrity="sha512-Xs8s9ZPbAI9bGprcG6wPB/0CRS2bnzsCRhhnPnmcsgkMv2VXEpN7cQ3&#43;ZCLgjhYyNLZLQ92uS0FkLmtWDEZBjQ==">
<script
defer
type="text/javascript"
src="/lib/packery/packery.pkgd.min.8b0cbb30a72acb6a0188f690a3768e9c531f056dcf18df8d739ececb994387d28137ed684b2f23da6df5a0c416eb4f8818d5db4493419a9b97c7452ac602fbd4.js"
integrity="sha512-iwy7MKcqy2oBiPaQo3aOnFMfBW3PGN&#43;Nc57Oy5lDh9KBN&#43;1oSy8j2m31oMQW60&#43;IGNXbRJNBmpuXx0UqxgL71A=="></script>
<script
type="text/javascript"
src="/js/shortcodes/gallery.min.0f214e323c6e8797755a37bef9324e195612b47f71b5f6192b197a68c86b089182cdde4d803cb6978ad9e2092e9f1d78a86d94a143a59c398c600745fe12764e.js"
integrity="sha512-DyFOMjxuh5d1Wje&#43;&#43;TJOGVYStH9xtfYZKxl6aMhrCJGCzd5NgDy2l4rZ4gkunx14qG2UoUOlnDmMYAdF/hJ2Tg=="></script>
<link
type="text/css"
rel="stylesheet"
href="/css/components/carousel.8e65f2c27285218feed8ca2a6e12a80ec2fb4be8f774b7c74d9642f1bc528a3352288a700a64a0e1e3c38a40b74c978b5dbbeb38346202b5f7613d8fc023e3c9.css"
integrity="sha512-jmXywnKFIY/u2MoqbhKoDsL7S&#43;j3dLfHTZZC8bxSijNSKIpwCmSg4ePDikC3TJeLXbvrODRiArX3YT2PwCPjyQ==">
<script
defer
type="text/javascript"
src="/lib/tw-elements/index.min.5ffccf337b773ee831515cdde152c8039e972dd479f7dffb0532a79de9a6de5926154ae2587f181ed6c06a99aee25667096bcf6495da5aa86e235d98baee5943.js"
integrity="sha512-X/zPM3t3PugxUVzd4VLIA56XLdR599/7BTKnnemm3lkmFUriWH8YHtbAapmu4lZnCWvPZJXaWqhuI12Yuu5ZQw=="></script>
<link
type="text/css"
rel="stylesheet"
href="/lib/lite-youtube-embed/lite-yt-embed.9316c068f6459dd9838069f812a91772f6eba68957a6c0517bc827936c6a3883384a6303d4ee49ff129d20773b1566d8b1d0693b9b67697e1af6fdf81e0380ca.css"
integrity="sha512-kxbAaPZFndmDgGn4EqkXcvbrpolXpsBRe8gnk2xqOIM4SmMD1O5J/xKdIHc7FWbYsdBpO5tnaX4a9v34HgOAyg==">
<script
type="text/javascript"
src="/lib/lite-youtube-embed/lite-yt-embed.7cded41daf98143e07df8cc0dc018ccf6e59d20063687609740707b153da7a52a93fb7e030a92507d60c27ebf490778693a4ea8947ac69ce4b213a89eb55af7d.js"
integrity="sha512-fN7UHa&#43;YFD4H34zA3AGMz25Z0gBjaHYJdAcHsVPaelKpP7fgMKklB9YMJ&#43;v0kHeGk6TqiUesac5LITqJ61WvfQ=="></script>
<link rel="stylesheet" href="/css/repo-cards.min.baaf512416b3dfd1e3a95a3f3d8d49e978f267c0efded75be3635a9fd4655746757c1277a3a67d77c541de80b862394f6aacc26b32d3c09fb016a071661253e9.css" integrity="sha512-uq9RJBaz39HjqVo/PY1J6XjyZ8Dv3tdb42Nan9RlV0Z1fBJ3o6Z9d8VB3oC4YjlPaqzCazLTwJ&#43;wFqBxZhJT6Q==">
<script src="/js/shortcodes/tabs.min.b9b8a6b2cf6c81163025e44a18c0ccce600efe2dfc29d2d11515fe41b8e1e8e00896759b9e55eab7032ab15d1bec124c32e8996685e563de84ad243eb61ec236.js" integrity="sha512-ubimss9sgRYwJeRKGMDMzmAO/i38KdLRFRX&#43;Qbjh6OAIlnWbnlXqtwMqsV0b7BJMMuiZZoXlY96ErSQ&#43;th7CNg==" crossorigin="anonymous"></script>
<script type="module" src="/js/firebase.min.cad74e0625f72f359ec6d6fed579b87733749de70400e7614048050ed08832ee3f58983d5d139fb1ddc5f7f2f5047d45ed80ec923534a3660fc3a7965f936866.js" integrity="sha512-ytdOBiX3LzWextb&#43;1Xm4dzN0necEAOdhQEgFDtCIMu4/WJg9XROfsd3F9/L1BH1F7YDskjU0o2YPw6eWX5NoZg=="></script>
<script id="firebase-config"
type="application/json"
data-views="views_cheatsheets/blowfish-shortcodes/index.md"
data-likes="likes_cheatsheets/blowfish-shortcodes/index.md">
{
"config": {
"apiKey": "AIzaSyBBfzADrGgnwTIyW67gfZSrAtkoybxvmdI",
"authDomain": "oakazanin-hugo-blowfish.firebaseapp.com",
"projectId": "oakazanin-hugo-blowfish",
"storageBucket": "oakazanin-hugo-blowfish.firebasestorage.app",
"messagingSenderId": "945151844512",
"appId": "1:945151844512:web:22602cc010f5b7e0cca9c5",
"measurementId": ""
}
}
</script>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<script type="application/ld+json">
[{
"@context": "https://schema.org",
"@type": "Article",
"articleSection": "Шпаргалки",
"name": "Shortcodes",
"headline": "Shortcodes",
"description": "Все shortcodes темы Blowfish — справочник для практиков.",
"inLanguage": "ru",
"url" : "http://192.168.11.190:1313/cheatsheets/shortcodes/",
"author" : {
"@type": "Person",
"name": "Олег Казанин"
},
"keywords": ["shortcodes","mermaid","icon","lead","docs"],
"mainEntityOfPage": "true",
"wordCount": "3441"
}]
</script>
</head>
<body class="flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32 text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral bf-scrollbar">
<div id="the-top" class="absolute flex self-center">
<a
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
href="#main-content">
<span class="font-bold text-primary-600 pe-2 dark:text-primary-400">&darr;</span>
Перейти к основному содержимому
</a>
</div>
<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 z-100">
<div
id="menu-blur"
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl bg-neutral/25 dark:bg-neutral-800/25"></div>
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
<div class="main-menu flex items-center w-full gap-2 p-1 pl-0">
<div>
<a href="/" class="flex">
<span class="sr-only">Олег Казанин</span>
<img
src="/img/logo.png"
width="285"
height="175"
class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
alt="">
</a>
</div>
<div class="flex items-center ms-auto">
<div class="hidden md:flex">
<nav class="flex items-center gap-x-5 h-12">
<a
href="/about/"
class="flex items-center bf-icon-color-hover"
aria-label="Об авторе"
title="Кто это пишет и зачем">
<span class="text-base font-medium break-normal">
Об авторе
</span>
</a>
<a
href="/posts/"
class="flex items-center bf-icon-color-hover"
aria-label="Статьи"
title="Статьи">
<span class="text-base font-medium break-normal">
Статьи
</span>
</a>
<a
href="/cheatsheets/"
class="flex items-center bf-icon-color-hover"
aria-label="Шпаргалки"
title="Шпаргалки">
<span class="text-base font-medium break-normal">
Шпаргалки
</span>
</a>
<button
id="search-button"
aria-label="Search"
class="text-base bf-icon-color-hover"
title="Поиск (/)">
<span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
</span>
</button>
<div class="flex items-center">
<button
id="appearance-switcher"
aria-label="Dark mode switcher"
type="button"
class="text-base bf-icon-color-hover">
<div class="flex items-center justify-center dark:hidden">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"/></svg>
</span>
</div>
<div class="items-center justify-center hidden dark:flex">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"/></svg>
</span>
</div>
</button>
</div>
</nav>
</div>
<div class="flex md:hidden">
<div class="flex items-center h-14 gap-4">
<button
id="search-button-mobile"
aria-label="Search"
class="flex items-center justify-center bf-icon-color-hover"
title="Поиск (/)">
<span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
</span>
</button>
<button
id="appearance-switcher-mobile"
type="button"
aria-label="Dark mode switcher"
class="flex items-center justify-center text-neutral-900 hover:text-primary-600 dark:text-neutral-200 dark:hover:text-primary-400">
<div class="dark:hidden">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"/></svg>
</span>
</div>
<div class="hidden dark:block">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"/></svg>
</span>
</div>
</button>
<input type="checkbox" id="mobile-menu-toggle" autocomplete="off" class="hidden peer">
<label for="mobile-menu-toggle" class="flex items-center justify-center cursor-pointer bf-icon-color-hover">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg>
</span>
</label>
<div
role="dialog"
aria-modal="true"
style="scrollbar-gutter: stable;"
class="fixed inset-0 z-50 invisible overflow-y-auto px-6 py-20 opacity-0 transition-[opacity,visibility] duration-300 peer-checked:visible peer-checked:opacity-100 bg-neutral-50/97 dark:bg-neutral-900/99
bf-scrollbar">
<label
for="mobile-menu-toggle"
class="fixed end-8 top-5 flex items-center justify-center z-50 h-12 w-12 cursor-pointer select-none rounded-full bf-icon-color-hover border bf-border-color bf-border-color-hover bg-neutral-50 dark:bg-neutral-900">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
</span>
</label>
<nav class="mx-auto max-w-md space-y-6">
<div class="px-2">
<a
href="/about/"
aria-label="Об авторе"
class="flex items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
<span title="Кто это пишет и зачем" class="text-2xl font-bold tracking-tight">
Об авторе
</span>
</a>
</div>
<div class="px-2">
<a
href="/posts/"
aria-label="Статьи"
class="flex items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
<span title="Статьи" class="text-2xl font-bold tracking-tight">
Статьи
</span>
</a>
</div>
<div class="px-2">
<a
href="/cheatsheets/"
aria-label="Шпаргалки"
class="flex items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
<span title="Шпаргалки" class="text-2xl font-bold tracking-tight">
Шпаргалки
</span>
</a>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
type="text/javascript"
src="/js/background-blur.min.605b3b942818f0ab5a717ae446135ec46b8ee5a2ad12ae56fb90dc2a76ce30c388f9fec8bcc18db15bd47e3fa8a09d779fa12aa9c184cf614a315bc72c6c163d.js"
integrity="sha512-YFs7lCgY8KtacXrkRhNexGuO5aKtEq5W&#43;5DcKnbOMMOI&#43;f7IvMGNsVvUfj&#43;ooJ13n6EqqcGEz2FKMVvHLGwWPQ=="
data-blur-id="menu-blur"></script>
<div class="relative flex flex-col grow">
<main id="main-content" class="grow">
<article>
<div id="hero" class="h-[150px] md:h-[200px]"></div>
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
<img
id="background-image"
src="/img/background_hu_42f1c83933308119.png"
role="presentation"
loading="eager"
decoding="async"
fetchpriority="high"
class="absolute inset-0 w-full h-full object-cover"
>
<div
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
<div
class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal"></div>
</div>
<div
id="background-blur"
class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-xl bg-neutral-100/75 dark:bg-neutral-800/60"></div>
<script
type="text/javascript"
src="/js/background-blur.min.605b3b942818f0ab5a717ae446135ec46b8ee5a2ad12ae56fb90dc2a76ce30c388f9fec8bcc18db15bd47e3fa8a09d779fa12aa9c184cf614a315bc72c6c163d.js"
integrity="sha512-YFs7lCgY8KtacXrkRhNexGuO5aKtEq5W&#43;5DcKnbOMMOI&#43;f7IvMGNsVvUfj&#43;ooJ13n6EqqcGEz2FKMVvHLGwWPQ=="
data-blur-id="background-blur"
data-image-id="background-image"
data-image-url="/img/background_hu_42f1c83933308119.png"></script>
<header id="single_header" class="mt-5 max-w-prose">
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
Shortcodes
</h1>
<div class="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
<div class="flex flex-row flex-wrap items-center">
<time datetime="0001-01-01T00:00:00&#43;00:00">1 января 0001</time><span class="px-2 text-primary-500">&middot;</span><span title="Время чтения">17 минут</span><span class="px-2 text-primary-500">&middot;</span><span>
<span
id="views_cheatsheets/blowfish-shortcodes/index.md"
class="animate-pulse inline-block text-transparent max-h-3 rounded-full -mt-[2px] align-middle bg-neutral-300 dark:bg-neutral-400"
title="views"
>loading</span
>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg></span></span>
</span>
<span class="px-2 text-primary-500">&middot;</span><span>
<span
id="likes_cheatsheets/blowfish-shortcodes/index.md"
class="animate-pulse inline-block text-transparent max-h-3 rounded-full -mt-[2px] align-middle bg-neutral-300 dark:bg-neutral-400"
title="likes"
>loading</span
>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span></span>
</span>
<span class="px-2 text-primary-500">&middot;</span><span>
<button
id="button_likes"
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
<span id="button_likes_heart" class="inline-block align-text-bottom hidden"
><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span>
</span>
<span id="button_likes_emtpty_heart" class="inline-block align-text-bottom"
><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"/></svg></span></span
>
<span id="button_likes_text">&nbsp;Like</span>
</button>
</span>
<span class="ps-2"><span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Черновик
</span>
</span>
</span>
</div>
<div class="flex flex-row flex-wrap items-center">
<a class="relative mt-[0.5rem] me-2" href="/tags/shortcodes/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Shortcodes
</span>
</span>
</a>
<a class="relative mt-[0.5rem] me-2" href="/tags/mermaid/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Mermaid
</span>
</span>
</a>
<a class="relative mt-[0.5rem] me-2" href="/tags/icon/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Icon
</span>
</span>
</a>
<a class="relative mt-[0.5rem] me-2" href="/tags/lead/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Lead
</span>
</span>
</a>
<a class="relative mt-[0.5rem] me-2" href="/tags/docs/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Docs
</span>
</span>
</a>
</div>
</div>
<div class="flex author">
<img
class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4"
width="96"
height="96"
alt="Олег Казанин"
src="/img/profile_hu_9cb3a1ec5563cd7f.png"
data-zoom-src="/img/profile_hu_1a9fbd8177a94ed5.png">
<div class="place-self-center">
<div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
Автор
</div>
<div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
Олег Казанин
</div>
<div class="text-sm text-neutral-700 dark:text-neutral-400">Строю полезную инфраструктуру на Open Source стеке. Документирую грабли, чтобы вы на них не наступали.</div>
<div class="text-2xl sm:text-lg">
<div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
<a
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
href="mailto:oakazanin@ya.ru"
target="_blank"
aria-label="Email"
title="Email"
rel="me noopener noreferrer"
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
</span></span></a
>
<a
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
href="https://t.me/oa_msk"
target="_blank"
aria-label="Telegram"
title="Telegram"
rel="me noopener noreferrer"
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
</span></span></a
>
<a
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
href="https://oakazanin.ru/"
target="_blank"
aria-label="Link"
title="Link"
rel="me noopener noreferrer"
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>
</span></span></a
>
<a
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
href="https://git.jn4.ru/astronit"
target="_blank"
aria-label="Gitea"
title="Gitea"
rel="me noopener noreferrer"
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="5.67 143.05 628.65 387.55"><path fill="currentColor" d="M115.912 143.075c-6.462 0-13.762.525-22.012 2.325-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.267.3-26.433.597-39.5.697l.1 117.002s57.4 24.202 83.1 40.102c3.7 2.3 10.2 6.798 12.9 14.398 2.1 6.1 2 13.101-1 19.301l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8a5290.322 5290.322 0 0 0 27 12.954c0-36.449-.1-109.053-.1-109.053-29 .4-89.2-2.201-89.2-2.201s-141.4-7.1-156.8-8.5c-4.9-.3-10.525-.825-16.988-.825zm12.188 48.026s7.1 59.399 15.7 94.199c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1z"/><path fill="currentColor" d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/></svg></span></span></a
>
<a
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
href="https://obrtv.ru/a/chiefengineer"
target="_blank"
aria-label="Peertube"
title="Peertube"
rel="me noopener noreferrer"
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365 486.53"><path fill="currentColor" d="M0,243.26V0l182.5,121.63L0,243.26Z"/><path fill="currentColor" d="M0,486.53v-243.26l182.5,121.63L0,486.53Z"/><path fill="currentColor" d="M182.5,364.9V121.63l182.5,121.63-182.5,121.63Z"/></svg></span></span></a
>
</div>
</div>
</div>
</div>
<div class="mb-5"></div>
</header>
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
<div class="order-first lg:ms-auto px-0 lg:order-last lg:ps-8 lg:max-w-2xs">
<div class="toc ps-5 print:hidden lg:sticky lg:top-[140px]">
<details
open
id="TOCView"
class="toc-right mt-0 overflow-y-auto overscroll-contain bf-scrollbar rounded-lg -ms-5 ps-5 pe-2 hidden lg:block">
<summary
class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 -ms-5 ps-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
Оглавление
</summary>
<div
class="min-w-[220px] py-2 border-dotted border-s-1 -ms-5 ps-5 dark:border-neutral-600">
<nav id="TableOfContents">
<ul>
<li><a href="#alert">Alert</a></li>
<li><a href="#admonition">Admonition</a></li>
<li><a href="#accordion">Accordion</a></li>
<li><a href="#article">Article</a></li>
<li><a href="#badge">Badge</a></li>
<li><a href="#button">Button</a></li>
<li><a href="#carousel">Carousel</a></li>
<li><a href="#chart">Chart</a></li>
<li><a href="#bar-chart">Bar chart</a></li>
<li><a href="#line-chart">Line chart</a></li>
<li><a href="#doughnut-chart">Doughnut chart</a></li>
<li><a href="#code-importer">Code Importer</a></li>
<li><a href="#codeberg-card">Codeberg Card</a></li>
<li><a href="#figure">Figure</a></li>
<li><a href="#forgejo-card">Forgejo Card</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#gist">Gist</a></li>
<li><a href="#gitea-card">Gitea Card</a></li>
<li><a href="#github-card">GitHub Card</a></li>
<li><a href="#gitlab-card">GitLab Card</a></li>
<li><a href="#hugging-face-card">Hugging Face Card</a></li>
<li><a href="#icon">Icon</a></li>
<li><a href="#katex">KaTeX</a></li>
<li><a href="#keyword">Keyword</a></li>
<li><a href="#lead">Lead</a></li>
<li><a href="#list">List</a></li>
<li><a href="#ltrrtl">LTR/RTL</a></li>
<li><a href="#markdown-importer">Markdown Importer</a></li>
<li><a href="#mermaid">Mermaid</a></li>
<li><a href="#swatches">Swatches</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#timeline">Timeline</a></li>
<li><a href="#typeit">TypeIt</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#youtube-lite">Youtube Lite</a></li>
</ul>
</nav>
</div>
</details>
<details class="toc-inside mt-0 overflow-hidden rounded-lg -ms-5 ps-5 lg:hidden">
<summary
class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 -ms-5 ps-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
Оглавление
</summary>
<div
class="py-2 border-dotted border-neutral-300 border-s-1 -ms-5 ps-5 dark:border-neutral-600">
<nav id="TableOfContents">
<ul>
<li><a href="#alert">Alert</a></li>
<li><a href="#admonition">Admonition</a></li>
<li><a href="#accordion">Accordion</a></li>
<li><a href="#article">Article</a></li>
<li><a href="#badge">Badge</a></li>
<li><a href="#button">Button</a></li>
<li><a href="#carousel">Carousel</a></li>
<li><a href="#chart">Chart</a></li>
<li><a href="#bar-chart">Bar chart</a></li>
<li><a href="#line-chart">Line chart</a></li>
<li><a href="#doughnut-chart">Doughnut chart</a></li>
<li><a href="#code-importer">Code Importer</a></li>
<li><a href="#codeberg-card">Codeberg Card</a></li>
<li><a href="#figure">Figure</a></li>
<li><a href="#forgejo-card">Forgejo Card</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#gist">Gist</a></li>
<li><a href="#gitea-card">Gitea Card</a></li>
<li><a href="#github-card">GitHub Card</a></li>
<li><a href="#gitlab-card">GitLab Card</a></li>
<li><a href="#hugging-face-card">Hugging Face Card</a></li>
<li><a href="#icon">Icon</a></li>
<li><a href="#katex">KaTeX</a></li>
<li><a href="#keyword">Keyword</a></li>
<li><a href="#lead">Lead</a></li>
<li><a href="#list">List</a></li>
<li><a href="#ltrrtl">LTR/RTL</a></li>
<li><a href="#markdown-importer">Markdown Importer</a></li>
<li><a href="#mermaid">Mermaid</a></li>
<li><a href="#swatches">Swatches</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#timeline">Timeline</a></li>
<li><a href="#typeit">TypeIt</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#youtube-lite">Youtube Lite</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-fit">
<details
class="mt-2 mb-5 overflow-hidden rounded-lg ms-0 ps-5"
open>
<summary
class="py-1 text-lg font-semibold cursor-pointer bg-primary-200 text-neutral-800 -ms-5 ps-5 dark:bg-primary-800 dark:text-neutral-100">
Документация -
Эта статья — часть серии.
</summary>
<div
class="py-1 border-dotted border-neutral-300 border-s-1 -ms-5 ps-5 dark:border-neutral-600">
Часть 8:
Ты уже здесь
</div>
</details>
<div class="article-content max-w-prose mb-20">
<p>Hugo даёт <a href="https://gohugo.io/content-management/shortcodes/" target="_blank" rel="noreferrer">стандартные shortcodes</a>. Blowfish добавляет свои — для типичных задач блога.</p>
<h2 class="relative group">Alert
<div id="alert" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#alert" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>alert</code> выводит стилизованный блок-уведомление. Нужен когда важную информацию нельзя пропустить.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>icon</code></td>
<td><strong>Опционально.</strong> Иконка слева.<br><strong>По умолчанию:</strong> <code>triangle-exclamation</code> (см. <a href="/cheatsheets/shortcodes/#icon" >icon</a>)</td>
</tr>
<tr>
<td><code>iconColor</code></td>
<td><strong>Опционально.</strong> Цвет иконки в CSS-формате.<br>Hex (<code>#FFFFFF</code>) или имя цвета (<code>white</code>).<br>По умолчанию — из текущей темы.</td>
</tr>
<tr>
<td><code>cardColor</code></td>
<td><strong>Опционально.</strong> Цвет фона карточки в CSS-формате.<br>Hex (<code>#FFFFFF</code>) или имя цвета (<code>white</code>).<br>По умолчанию — из текущей темы.</td>
</tr>
<tr>
<td><code>textColor</code></td>
<td><strong>Опционально.</strong> Цвет текста в CSS-формате.<br>Hex (<code>#FFFFFF</code>) или имя цвета (<code>white</code>).<br>По умолчанию — из текущей темы.</td>
</tr>
</tbody>
</table>
<p>Внутри — Markdown, форматируй как угодно.</p>
<p><strong>Пример 1:</strong> Без параметров</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; alert &gt;}}
</span></span><span class="line"><span class="cl"><span class="gs">**Внимание!**</span> Это действие необратимо!
</span></span><span class="line"><span class="cl">{{&lt; /alert &gt;}}</span></span></code></pre></div></div>
<div
class="flex px-4 py-3 rounded-md shadow bg-primary-100 dark:bg-primary-900"
>
<span
class="text-primary-400 pe-3 flex items-center"
>
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>
</span>
</span>
<span
class="dark:text-neutral-300"
><strong>Warning!</strong> This action is destructive!</span>
</div>
<p><strong>Пример 2:</strong> Безымянный параметр</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; alert &#34;twitter&#34; &gt;}}
</span></span><span class="line"><span class="cl">Не забудь [<span class="nt">подписаться</span>](<span class="na">https://twitter.com/nunocoracao</span>) в Twitter.
</span></span><span class="line"><span class="cl">{{&lt; /alert &gt;}}</span></span></code></pre></div></div>
<div
class="flex px-4 py-3 rounded-md shadow bg-primary-100 dark:bg-primary-900"
>
<span
class="text-primary-400 pe-3 flex items-center"
>
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</span>
</span>
<span
class="dark:text-neutral-300"
>Don&rsquo;t forget to <a href="https://twitter.com/nunocoracao" target="_blank" rel="noreferrer">follow me</a> on Twitter.</span>
</div>
<p><strong>Пример 3:</strong> Именованные параметры</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; alert icon=&#34;fire&#34; cardColor=&#34;<span class="ni">#e63946</span>&#34; iconColor=&#34;<span class="ni">#1d3557</span>&#34; textColor=&#34;<span class="ni">#f1faee</span>&#34; &gt;}}
</span></span><span class="line"><span class="cl">Это ошибка!
</span></span><span class="line"><span class="cl">{{&lt; /alert &gt;}}</span></span></code></pre></div></div>
<div
class="flex px-4 py-3 rounded-md shadow" style="background-color: #e63946"
>
<span
class="pe-3 flex items-center" style="color: #1d3557"
>
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-2.8-5.6-5.6-11.2-9.8-16.8l-50.6 58.8s-81.4-103.6-87.1-110.6C133.1 243.8 112 273.2 112 306.8C112 375.4 162.6 416 225.7 416z"/></svg></span>
</span>
<span
style="color: #f1faee"
>This is an error!</span>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">Admonition
<div id="admonition" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#admonition" aria-label="Якорь">#</a>
</span>
</h2>
<p>Admonition — визуальные блоки-выноски для акцентирования внимания.</p>
<p>Работает как alert, но через render hooks Hugo. Ключевое отличие — синтаксис Markdown, переносимый между платформами. Shortcodes — специфика Hugo. Синтаксис похож на GitHub alerts:</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!TIP]
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">Admonition типа Tip.
</span></span></span><span class="line"><span class="cl"><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!TIP]+ Свой заголовок + Своя иконка
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">Сворачиваемый admonition с кастомным заголовком.
</span></span></span><span class="line"><span class="cl">{icon=&#34;twitter&#34;}</span></span></code></pre></div></div>
<div class="admonition relative overflow-hidden rounded-lg border-l-4 my-3 px-4 py-3 shadow-sm" data-type="tip">
<div class="flex items-center gap-2 font-semibold text-inherit">
<div class="flex shrink-0 h-5 w-5 items-center justify-center text-lg"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM191.4 .0132C89.44 .3257 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.61 288.9-.2837 191.4 .0132zM192 96.01c-44.13 0-80 35.89-80 79.1C112 184.8 104.8 192 96 192S80 184.8 80 176c0-61.76 50.25-111.1 112-111.1c8.844 0 16 7.159 16 16S200.8 96.01 192 96.01z"/></svg>
</span></div>
<div class="grow">
Tip
</div>
</div><div class="admonition-content mt-3 text-base leading-relaxed text-inherit"><p>A Tip type admonition.</p></div></div><details
class="admonition relative overflow-hidden rounded-lg border-l-4 my-3 px-4 py-3 shadow-sm group"
data-type="tip"
open>
<summary class="flex items-center gap-2 font-semibold text-inherit cursor-pointer">
<div class="flex shrink-0 h-5 w-5 items-center justify-center text-lg"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</span></div>
<div class="grow">
Custom Title + Custom Icon
</div>
<div
class="ms-auto flex h-5 w-5 items-center justify-center transition-transform ease-in-out -rotate-90 group-open:rotate-0 print:hidden"><span class="relative block icon"><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</span></div>
</summary><div class="admonition-content mt-3 text-base leading-relaxed text-inherit"><p>A collapsible admonition with custom title.</p></div></details><p>Знак alert (<code>+</code> или <code>-</code>) — опционален, управляет сворачиванием. Работает только в Obsidian.</p>
<details
class="admonition relative overflow-hidden rounded-lg border-l-4 my-3 px-4 py-3 shadow-sm group"
data-type="info"
>
<summary class="flex items-center gap-2 font-semibold text-inherit cursor-pointer">
<div class="flex shrink-0 h-5 w-5 items-center justify-center text-lg"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"/></svg>
</span></div>
<div class="grow">
Поддерживаемые типы
</div>
<div
class="ms-auto flex h-5 w-5 items-center justify-center transition-transform ease-in-out -rotate-90 group-open:rotate-0 print:hidden"><span class="relative block icon"><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</span></div>
</summary><div class="admonition-content mt-3 text-base leading-relaxed text-inherit"><p>Допустимые типы: <a href="https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/" target="_blank" rel="noreferrer">GitHub alert types</a> и <a href="https://help.obsidian.md/callouts" target="_blank" rel="noreferrer">Obsidian callout types</a>. Регистр не важен.</p>
<p><strong>GitHub:</strong> <code>NOTE</code>, <code>TIP</code>, <code>IMPORTANT</code>, <code>WARNING</code>, <code>CAUTION</code>\</p>
<p><code>NOTE</code>: <code>Заметка</code>: Полезная информация — даже при беглом чтении.<br>
<code>TIP</code>: <code>Совет</code>: Как сделать проще или лучше.<br>
<code>IMPORTANT</code>: <code>Важно</code>: Ключевое для достижения цели.<br>
<code>WARNING</code>: <code>Внимание</code>: Срочно — иначе будут проблемы.<br>
<code>CAUTION</code>: <code>Осторожно</code>: Риски и последствия этого действия.\</p>
<p><strong>Obsidian:</strong> <code>note</code>, <code>abstract</code>, <code>info</code>, <code>todo</code>, <code>tip</code>, <code>success</code>, <code>question</code>, <code>warning</code>, <code>failure</code>, <code>danger</code>, <code>bug</code>, <code>example</code>, <code>quote</code></p></div></details><details
class="admonition relative overflow-hidden rounded-lg border-l-4 my-3 px-4 py-3 shadow-sm group"
data-type="info"
>
<summary class="flex items-center gap-2 font-semibold text-inherit cursor-pointer">
<div class="flex shrink-0 h-5 w-5 items-center justify-center text-lg"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"/></svg>
</span></div>
<div class="grow">
Кастомизация admonition
</div>
<div
class="ms-auto flex h-5 w-5 items-center justify-center transition-transform ease-in-out -rotate-90 group-open:rotate-0 print:hidden"><span class="relative block icon"><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</span></div>
</summary><div class="admonition-content mt-3 text-base leading-relaxed text-inherit"><p>См. <a href="https://github.com/nunocoracao/blowfish/blob/main/layouts/_default/_markup/render-blockquote.html" target="_blank" rel="noreferrer">руководство по кастомизации admonition</a>.</p></div></details>
<h2 class="relative group">Accordion
<div id="accordion" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#accordion" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>accordion</code> — сворачиваемые панели. Элементы задаются через <code>accordionItem</code>. Параметр <code>mode</code> управляет одновременным открытием нескольких элементов.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mode</code></td>
<td><strong>Опционально.</strong> <code>collapse</code> (один открыт) или <code>open</code> (несколько открыты). По умолчанию <code>collapse</code>.</td>
</tr>
<tr>
<td><code>separated</code></td>
<td><strong>Опционально.</strong> <code>true</code> — каждый элемент как отдельная карточка. По умолчанию <code>false</code> (единый список).</td>
</tr>
</tbody>
</table>
<p>Параметры <code>accordionItem</code>:</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>title</code></td>
<td><strong>Обязательно.</strong> Заголовок в шапке элемента.</td>
</tr>
<tr>
<td><code>open</code></td>
<td><strong>Опционально.</strong> <code>true</code> — элемент открыт по умолчанию.</td>
</tr>
<tr>
<td><code>header</code></td>
<td><strong>Опционально.</strong> Алиас для <code>title</code>, для совместимости.</td>
</tr>
<tr>
<td><code>icon</code></td>
<td><strong>Опционально.</strong> Иконка перед заголовком.</td>
</tr>
</tbody>
</table>
<p><strong>Пример 1: <code>mode=&quot;open&quot;</code> (несколько элементов открыты) + <code>separated=true</code></strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; accordion mode=&#34;open&#34; separated=true &gt;}}
</span></span><span class="line"><span class="cl"> {{&lt; accordionItem title=&#34;Пример Markdown&#34; icon=&#34;code&#34; open=true &gt;}}
</span></span><span class="line"><span class="cl"> Этот элемент демонстрирует рендеринг Markdown:
</span></span><span class="line"><span class="cl"> <span class="k">-</span> **Жирный текст**
</span></span><span class="line"><span class="cl"> <span class="k">-</span> Списки
</span></span><span class="line"><span class="cl"> <span class="k">-</span> <span class="sb">`inline code`</span>
</span></span><span class="line"><span class="cl"> {{&lt; /accordionItem &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> {{&lt; accordionItem title=&#34;Пример shortcode&#34; md=false &gt;}}
</span></span><span class="line"><span class="cl"> Этот элемент демонстрирует рендеринг shortcode с &lt;code&gt;md=false&lt;/code&gt;:
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> {{&lt; alert &gt;}}Это inline alert.{{&lt; /alert &gt;}}
</span></span><span class="line"><span class="cl"> {{&lt; /accordionItem &gt;}}
</span></span><span class="line"><span class="cl">{{&lt; /accordion &gt;}}</span></span></code></pre></div></div>
<div
id="accordion-0394f397651b25ea961824ce3322d6af"
class="space-y-2"
data-accordion="open"
data-accordion-separated="true"
>
<details
class="rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden"
data-accordion-item
open
>
<summary class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-lg font-semibold text-neutral-900 dark:text-neutral-100">
<span class="flex items-center gap-2">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg></span>
<span>Markdown example</span>
</span>
<span>
<span class="relative block icon"><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</span>
</span>
</summary>
<div class="px-4 pb-4 text-neutral-700 dark:text-neutral-300">
<p>This item demonstrates Markdown rendering:</p>
<ul>
<li><strong>Bold text</strong></li>
<li>Lists</li>
<li><code>inline code</code></li>
</ul>
</div>
</details>
<details
class="rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden"
data-accordion-item
>
<summary class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-lg font-semibold text-neutral-900 dark:text-neutral-100">
<span class="flex items-center gap-2">
<span>Shortcode example</span>
</span>
<span>
<span class="relative block icon"><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</span>
</span>
</summary>
<div class="px-4 pb-4 text-neutral-700 dark:text-neutral-300">
This item demonstrates shortcode rendering with <code>md=false</code>:
<div
class="flex px-4 py-3 rounded-md shadow bg-primary-100 dark:bg-primary-900"
>
<span
class="text-primary-400 pe-3 flex items-center"
>
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>
</span>
</span>
<span
class="dark:text-neutral-300"
>This is an inline alert.</span>
</div>
</div>
</details>
</div>
<style>
#accordion-0394f397651b25ea961824ce3322d6af > details + details {
margin-top: 0.5rem;
}
</style>
<p><strong>Пример 2: <code>mode=&quot;collapse&quot;</code> (только один элемент открыт)</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; accordion mode=&#34;collapse&#34; &gt;}}
</span></span><span class="line"><span class="cl"> {{&lt; accordionItem title=&#34;Первый элемент&#34; open=true &gt;}}
</span></span><span class="line"><span class="cl"> Этот элемент использует Markdown с коротким списком:
</span></span><span class="line"><span class="cl"> <span class="k">1.</span> Один
</span></span><span class="line"><span class="cl"> <span class="k">2.</span> Два
</span></span><span class="line"><span class="cl"> <span class="k">3.</span> Три
</span></span><span class="line"><span class="cl"> {{&lt; /accordionItem &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> {{&lt; accordionItem title=&#34;Второй элемент&#34; md=false &gt;}}
</span></span><span class="line"><span class="cl"> Этот элемент включает другой shortcode:
</span></span><span class="line"><span class="cl"> {{&lt; badge &gt;}}Tip{{&lt; /badge &gt;}}
</span></span><span class="line"><span class="cl"> {{&lt; /accordionItem &gt;}}
</span></span><span class="line"><span class="cl">{{&lt; /accordion &gt;}}</span></span></code></pre></div></div>
<div
id="accordion-ae4c18055ee572a39f7223f778485993"
class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden"
data-accordion="collapse"
data-accordion-separated="false"
>
<details
class="border-none"
data-accordion-item
open
>
<summary class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-lg font-semibold text-neutral-900 dark:text-neutral-100">
<span class="flex items-center gap-2">
<span>First item</span>
</span>
<span>
<span class="relative block icon"><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</span>
</span>
</summary>
<div class="px-4 pb-4 text-neutral-700 dark:text-neutral-300">
<p>This item uses Markdown with a short list:</p>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</div>
</details>
<details
class="border-none"
data-accordion-item
>
<summary class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-lg font-semibold text-neutral-900 dark:text-neutral-100">
<span class="flex items-center gap-2">
<span>Second item</span>
</span>
<span>
<span class="relative block icon"><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</span>
</span>
</summary>
<div class="px-4 pb-4 text-neutral-700 dark:text-neutral-300">
This item includes another shortcode:
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Tip
</span>
</span>
</div>
</details>
</div>
<style>
#accordion-ae4c18055ee572a39f7223f778485993 > details + details {
border-top: 1px solid rgb(var(--color-neutral-200));
}
.dark #accordion-ae4c18055ee572a39f7223f778485993 > details + details {
border-top-color: rgb(var(--color-neutral-700));
}
</style>
<script>
(() => {
const root = document.getElementById("accordion-ae4c18055ee572a39f7223f778485993");
if (!root) return;
const items = root.querySelectorAll("details[data-accordion-item]");
items.forEach((item) => {
item.addEventListener("toggle", () => {
if (!item.open) return;
items.forEach((other) => {
if (other !== item) other.removeAttribute("open");
});
});
});
})();
</script>
<p><br/><br/><br/></p>
<h2 class="relative group">Article
<div id="article" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#article" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>article</code> встраивает статью в markdown-файл. Параметр <code>link</code><code>.RelPermalink</code> встраиваемой статьи. Shortcode не отображает родительскую страницу. <em>Важно: если сайт в подпапке (например, /blowfish/), включай этот путь в ссылку.</em></p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>link</code></td>
<td><strong>Обязательно.</strong> <code>.RelPermalink</code> целевой статьи.</td>
</tr>
<tr>
<td><code>showSummary</code></td>
<td><strong>Опционально.</strong> Показывать краткое описание статьи. По умолчанию — из конфигурации сайта.</td>
</tr>
<tr>
<td><code>compactSummary</code></td>
<td><strong>Опционально.</strong> Компактный режим отображения описания. По умолчанию <code>false</code>.</td>
</tr>
</tbody>
</table>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; article link=&#34;/docs/welcome/&#34; showSummary=true compactSummary=true &gt;}}</span></span></code></pre></div></div>
<p><br/><br/><br/></p>
<h2 class="relative group">Badge
<div id="badge" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#badge" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>badge</code> — стилизованный бейдж для метаданных.</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; badge &gt;}}
</span></span><span class="line"><span class="cl">Новая статья!
</span></span><span class="line"><span class="cl">{{&lt; /badge &gt;}}</span></span></code></pre></div></div>
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
New article!
</span>
</span>
<p><br/><br/><br/></p>
<h2 class="relative group">Button
<div id="button" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#button" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>button</code> — стилизованная кнопка для основного действия. Три опциональных параметра: <code>href</code>, <code>target</code>, <code>rel</code> — URL, target и relation ссылки.</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; button href=&#34;<span class="ni">#button</span>&#34; target=&#34;_self&#34; &gt;}}
</span></span><span class="line"><span class="cl">Призыв к действию
</span></span><span class="line"><span class="cl">{{&lt; /button &gt;}}</span></span></code></pre></div></div>
<a
class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
href="#button"
target="_self"
role="button">
Call to action
</a>
<p><br/><br/><br/></p>
<h2 class="relative group">Carousel
<div id="carousel" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#carousel" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>carousel</code> — интерактивная карусель изображений. Адаптивная, занимает место одного изображения по вертикали. Все изображения на полную ширину родительского контейнера с заданным соотношением сторон (по умолчанию <code>16:9</code>).</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>images</code></td>
<td><strong>Обязательно.</strong> Regex-строка для поиска изображений или URL.</td>
</tr>
<tr>
<td><code>captions</code></td>
<td><strong>Опционально.</strong> Список пар <code>ключ:подпись</code>. Ключи — имена файлов (локальные) или полные URL (внешние). Подписи поддерживают Markdown.</td>
</tr>
<tr>
<td><code>aspectRatio</code></td>
<td><strong>Опционально.</strong> Соотношение сторон. По умолчанию <code>16-9</code>.</td>
</tr>
<tr>
<td><code>interval</code></td>
<td><strong>Опционально.</strong> Интервал автопрокрутки в миллисекундах. По умолчанию <code>2000</code> (2с).</td>
</tr>
</tbody>
</table>
<p>Подписи сопоставляются по ключу. Для локальных — имя файла (например, <code>01.jpg</code>). Для внешних — полный URL.</p>
<p><strong>Пример 1:</strong> Соотношение 16:9, явный список изображений</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; carousel images=&#34;{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}&#34; &gt;}}</span></span></code></pre></div></div>
<div class="width-patch"></div>
<div
id="carousel-e7c824e207c64a6a8dfd5087178ee956-1771868958950926208"
class="relative"
data-twe-carousel-init
data-twe-ride="carousel"
data-twe-interval="2000">
<div
class="absolute right-0 bottom-0 left-0 z-2 mx-[15%] mb-10 flex list-none justify-center p-0"
data-twe-carousel-indicators>
<button
type="button"
data-twe-target="#carousel-e7c824e207c64a6a8dfd5087178ee956-1771868958950926208"
data-twe-slide-to="0"
data-twe-carousel-active aria-current="true"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 0"></button>
<button
type="button"
data-twe-target="#carousel-e7c824e207c64a6a8dfd5087178ee956-1771868958950926208"
data-twe-slide-to="1"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 1"></button>
<button
type="button"
data-twe-target="#carousel-e7c824e207c64a6a8dfd5087178ee956-1771868958950926208"
data-twe-slide-to="2"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 2"></button>
<button
type="button"
data-twe-target="#carousel-e7c824e207c64a6a8dfd5087178ee956-1771868958950926208"
data-twe-slide-to="3"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 3"></button>
</div>
<div
class="relative w-full after:clear-both after:block after:content-['']"
style="overflow-x: clip; overflow-y: visible;">
<div
class="relative float-left -mr-[100%] w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
data-twe-carousel-active>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/03.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 1">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/01.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 2">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/02.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 3">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/04.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 4">
</div>
</div>
</div>
<button
class="absolute top-0 bottom-0 left-0 z-2 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carousel-e7c824e207c64a6a8dfd5087178ee956-1771868958950926208"
data-twe-slide="prev">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="4.5"
stroke="currentColor"
class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Previous</span
>
</button>
<button
class="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carousel-e7c824e207c64a6a8dfd5087178ee956-1771868958950926208"
data-twe-slide="next">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="4.5"
stroke="currentColor"
class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Next</span
>
</button>
</div>
<p><strong>Пример 2:</strong> Соотношение 21:9, regex для изображений</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; carousel images=&#34;gallery/*&#34; aspectRatio=&#34;21-9&#34; interval=&#34;2500&#34; &gt;}}</span></span></code></pre></div></div>
<div class="width-patch"></div>
<div
id="carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
class="relative"
data-twe-carousel-init
data-twe-ride="carousel"
data-twe-interval="2500">
<div
class="absolute right-0 bottom-0 left-0 z-2 mx-[15%] mb-10 flex list-none justify-center p-0"
data-twe-carousel-indicators>
<button
type="button"
data-twe-target="#carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
data-twe-slide-to="0"
data-twe-carousel-active aria-current="true"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 0"></button>
<button
type="button"
data-twe-target="#carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
data-twe-slide-to="1"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 1"></button>
<button
type="button"
data-twe-target="#carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
data-twe-slide-to="2"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 2"></button>
<button
type="button"
data-twe-target="#carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
data-twe-slide-to="3"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 3"></button>
<button
type="button"
data-twe-target="#carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
data-twe-slide-to="4"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 4"></button>
<button
type="button"
data-twe-target="#carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
data-twe-slide-to="5"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 5"></button>
<button
type="button"
data-twe-target="#carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
data-twe-slide-to="6"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 6"></button>
</div>
<div
class="relative w-full after:clear-both after:block after:content-['']"
style="overflow-x: clip; overflow-y: visible;">
<div
class="relative float-left -mr-[100%] w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2500ms;"
data-twe-carousel-active>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 21 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/01.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 1">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2500ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 21 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/02.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 2">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2500ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 21 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/03.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 3">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2500ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 21 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/04.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 4">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2500ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 21 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/05.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 5">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2500ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 21 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/06.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 6">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2500ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 21 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/07.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 7">
</div>
</div>
</div>
<button
class="absolute top-0 bottom-0 left-0 z-2 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
data-twe-slide="prev">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="4.5"
stroke="currentColor"
class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Previous</span
>
</button>
<button
class="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carousel-ed2cdb60e610d38f928eeae9583a3bd8-1771868958951561315"
data-twe-slide="next">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="4.5"
stroke="currentColor"
class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Next</span
>
</button>
</div>
<p><strong>Пример 3:</strong> Подписи к изображениям</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; carousel images=&#34;gallery/*&#34; captions=&#34;{01.jpg:Первое изображение с <span class="ge">*форматированием*</span>,02.jpg:Второе изображение со [<span class="nt">ссылкой</span>](<span class="na">https://example.com</span>)}&#34; &gt;}}</span></span></code></pre></div></div>
<div class="width-patch"></div>
<div
id="carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
class="relative"
data-twe-carousel-init
data-twe-ride="carousel"
data-twe-interval="2000">
<div
class="absolute right-0 bottom-0 left-0 z-2 mx-[15%] mb-10 flex list-none justify-center p-0"
data-twe-carousel-indicators>
<button
type="button"
data-twe-target="#carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
data-twe-slide-to="0"
data-twe-carousel-active aria-current="true"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 0"></button>
<button
type="button"
data-twe-target="#carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
data-twe-slide-to="1"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 1"></button>
<button
type="button"
data-twe-target="#carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
data-twe-slide-to="2"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 2"></button>
<button
type="button"
data-twe-target="#carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
data-twe-slide-to="3"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 3"></button>
<button
type="button"
data-twe-target="#carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
data-twe-slide-to="4"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 4"></button>
<button
type="button"
data-twe-target="#carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
data-twe-slide-to="5"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 5"></button>
<button
type="button"
data-twe-target="#carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
data-twe-slide-to="6"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 6"></button>
</div>
<div
class="relative w-full after:clear-both after:block after:content-['']"
style="overflow-x: clip; overflow-y: visible;">
<div
class="relative float-left -mr-[100%] w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
data-twe-carousel-active>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/01.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 1">
</div>
<figcaption
class="absolute left-0 right-0"
style="top: calc(100%);"
>First image with <em>formatting</em></figcaption>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/02.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 2">
</div>
<figcaption
class="absolute left-0 right-0"
style="top: calc(100%);"
>Second image with a <a href="https://example.com" target="_blank" rel="noreferrer">link</a></figcaption>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/03.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 3">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/04.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 4">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/05.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 5">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/06.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 6">
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="transition-duration: 2000ms;"
>
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: 16 / 9;">
<img
src="/cheatsheets/shortcodes/gallery/07.jpg"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image 7">
</div>
</div>
</div>
<button
class="absolute top-0 bottom-0 left-0 z-2 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
data-twe-slide="prev">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="4.5"
stroke="currentColor"
class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Previous</span
>
</button>
<button
class="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carousel-6e40cc3e2f0f069b33fe6b34367d7801-1771868958952432783"
data-twe-slide="next">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="4.5"
stroke="currentColor"
class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Next</span
>
</button>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">Chart
<div id="chart" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#chart" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>chart</code> — графики через библиотеку Chart.js. Поддерживает <a href="https://www.chartjs.org/docs/latest/samples/" target="_blank" rel="noreferrer">разные типы диаграмм</a>. Параметры — между тегами shortcode, Chart.js делает остальное.</p>
<p>Синтаксис и типы диаграмм — в <a href="https://www.chartjs.org/docs/latest/general/" target="_blank" rel="noreferrer">официальной документации Chart.js</a>.</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">&lt;</span> <span class="nx">chart</span> <span class="o">&gt;</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"><span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">labels</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Tomato&#39;</span><span class="p">,</span> <span class="s1">&#39;Blueberry&#39;</span><span class="p">,</span> <span class="s1">&#39;Banana&#39;</span><span class="p">,</span> <span class="s1">&#39;Lime&#39;</span><span class="p">,</span> <span class="s1">&#39;Orange&#39;</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">datasets</span><span class="o">:</span> <span class="p">[{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">label</span><span class="o">:</span> <span class="s1">&#39;# of votes&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">3</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 class="o">&lt;</span> <span class="err">/chart &gt;}}</span></span></span></code></pre></div></div>
<div class="chart">
<canvas id="chart-ca863d07680c4086c38813e2d20b0e01"></canvas>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", (event) => {
const ctx = document.getElementById("chart-ca863d07680c4086c38813e2d20b0e01");
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 3],
}]
}
});
});
</script>
</div>
<p>Еще примеры диаграмм:</p>
<h2 class="relative group">Bar chart
<div id="bar-chart" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#bar-chart" aria-label="Якорь">#</a>
</span>
</h2>
<!-- prettier-ignore-start -->
<div class="chart">
<canvas id="chart-717ae8a6c29d4493d55193f589a3f5e5"></canvas>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", (event) => {
const ctx = document.getElementById("chart-717ae8a6c29d4493d55193f589a3f5e5");
const chart = new Chart(ctx, {
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
}]
}
});
});
</script>
</div>
<!-- prettier-ignore-end -->
<h2 class="relative group">Line chart
<div id="line-chart" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#line-chart" aria-label="Якорь">#</a>
</span>
</h2>
<!-- prettier-ignore-start -->
<div class="chart">
<canvas id="chart-df85252d89f40dfc072528b5648c1e29"></canvas>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", (event) => {
const ctx = document.getElementById("chart-df85252d89f40dfc072528b5648c1e29");
const chart = new Chart(ctx, {
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
}]
}
});
});
</script>
</div>
<!-- prettier-ignore-end -->
<h2 class="relative group">Doughnut chart
<div id="doughnut-chart" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#doughnut-chart" aria-label="Якорь">#</a>
</span>
</h2>
<!-- prettier-ignore-start -->
<div class="chart">
<canvas id="chart-a25e6c41ceed4c4bc06c02ccdc6239f9"></canvas>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", (event) => {
const ctx = document.getElementById("chart-a25e6c41ceed4c4bc06c02ccdc6239f9");
const chart = new Chart(ctx, {
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
}]
}
});
});
</script>
</div>
<!-- prettier-ignore-end -->
<p><br/><br/><br/></p>
<h2 class="relative group">Code Importer
<div id="code-importer" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#code-importer" aria-label="Якорь">#</a>
</span>
</h2>
<p>Импорт кода из внешних источников без копипасты.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>url</code></td>
<td><strong>Обязательно.</strong> URL внешнего файла с кодом.</td>
</tr>
<tr>
<td><code>type</code></td>
<td>Тип кода для подсветки синтаксиса.</td>
</tr>
<tr>
<td><code>startLine</code></td>
<td><strong>Опционально.</strong> Начальная строка импорта.</td>
</tr>
<tr>
<td><code>endLine</code></td>
<td><strong>Опционально.</strong> Конечная строка импорта.</td>
</tr>
</tbody>
</table>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; codeimporter url=&#34;https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html&#34; type=&#34;go&#34; &gt;}}</span></span></code></pre></div></div>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="w"> </span><span class="err">$</span><span class="nx">url</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="p">.</span><span class="nx">Get</span><span class="w"> </span><span class="s">&#34;url&#34;</span><span class="w"> </span><span class="p">}}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="w"> </span><span class="nx">with</span><span class="w"> </span><span class="nx">resources</span><span class="p">.</span><span class="nf">GetRemote</span><span class="w"> </span><span class="p">(</span><span class="nx">urls</span><span class="p">.</span><span class="nx">Parse</span><span class="w"> </span><span class="err">$</span><span class="nx">url</span><span class="p">)</span><span class="w"> </span><span class="p">}}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="p">{{</span><span class="w"> </span><span class="p">.</span><span class="nx">Content</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nx">markdownify</span><span class="w"> </span><span class="p">}}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">}}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="p">{{</span><span class="w"> </span><span class="nx">warnf</span><span class="w"> </span><span class="s">&#34;mdimporter shortcode: unable to fetch %q: %s&#34;</span><span class="w"> </span><span class="err">$</span><span class="nx">url</span><span class="w"> </span><span class="p">.</span><span class="nx">Position</span><span class="w"> </span><span class="p">}}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="w"> </span><span class="nx">end</span><span class="w"> </span><span class="p">}}</span></span></span></code></pre></div></div>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; codeimporter url=&#34;https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml&#34; type=&#34;toml&#34; startLine=&#34;11&#34; endLine=&#34;18&#34; &gt;}}</span></span></code></pre></div></div>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">enableRobotsTXT</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">summaryLength</span> <span class="p">=</span> <span class="mi">0</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nx">buildDrafts</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="nx">buildFuture</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nx">enableEmoji</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div></div>
<p><br/><br/></p>
<h2 class="relative group">Codeberg Card
<div id="codeberg-card" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#codeberg-card" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>codeberg</code> — карточка репозитория Codeberg через API. Показывает актуальную статистику: звёзды, форки.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>repo</code></td>
<td>[String] Репозиторий в формате <code>username/repo</code></td>
</tr>
</tbody>
</table>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; codeberg repo=&#34;forgejo/forgejo&#34; &gt;}}</span></span></code></pre></div></div>
<div class="codeberg-card-wrapper">
<a id="codeberg-b76d3dbfdaae5ea9688cfb16c30fe8db" target="_blank" href="https://codeberg.org/forgejo/forgejo" class="cursor-pointer">
<div
class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral me-2">
<span class="relative block icon"><?xml version="1.0" encoding="utf-8"?>
<svg fill="currentColor" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"/></svg>
</span>
</span>
<div
id="codeberg-b76d3dbfdaae5ea9688cfb16c30fe8db-full_name"
class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
forgejo/forgejo
</div>
</div>
<p id="codeberg-b76d3dbfdaae5ea9688cfb16c30fe8db-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
Beyond coding. We forge.
</p>
<div class="m-0 mt-2 flex items-center">
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="Go"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
Go
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z"/></svg></span>
</span>
<div id="codeberg-b76d3dbfdaae5ea9688cfb16c30fe8db-stars_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
3773
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M80 104c13.3 0 24-10.7 24-24s-10.7-24-24-24S56 66.7 56 80s10.7 24 24 24zm80-24c0 32.8-19.7 61-48 73.3V192c0 17.7 14.3 32 32 32H304c17.7 0 32-14.3 32-32V153.3C307.7 141 288 112.8 288 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V192c0 53-43 96-96 96H256v70.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3V288H144c-53 0-96-43-96-96V153.3C19.7 141 0 112.8 0 80C0 35.8 35.8 0 80 0s80 35.8 80 80zm208 24c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24zM248 432c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24z"/></svg></span>
</span>
<div id="codeberg-b76d3dbfdaae5ea9688cfb16c30fe8db-forks_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
648
</div>
</div>
</div>
<script
async
type="text/javascript"
src="/js/fetch-repo.min.dc5533c50cefd50405344b235937142271f26229fe39cbee27fd4960e8bb897a0beebfad77a1091ca91cd0d1fb14e70fc37cc114dd9674fb2c32e0ab512ec8a4.js"
integrity="sha512-3FUzxQzv1QQFNEsjWTcUInHyYin&#43;OcvuJ/1JYOi7iXoL7r&#43;td6EJHKkc0NH7FOcPw3zBFN2WdPssMuCrUS7IpA=="
data-repo-url="https://codeberg.org/api/v1/repos/forgejo/forgejo"
data-repo-id="codeberg-b76d3dbfdaae5ea9688cfb16c30fe8db"></script>
</a>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">Figure
<div id="figure" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#figure" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>figure</code> — вставка изображений. Заменяет базовый Hugo figure, добавляет оптимизацию производительности.</p>
<p>Если изображение — page resource, Hugo Pipes оптимизирует и масштабирует его под разные разрешения. Статические ассеты и внешние URL вставляются как есть.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>src</code></td>
<td><strong>Обязательно.</strong> Локальный путь/имя файла или URL. Порядок поиска: <a href="https://gohugo.io/content-management/page-resources/" target="_blank" rel="noreferrer">page resource</a>, затем <code>assets/</code>, затем <code>static/</code>.</td>
</tr>
<tr>
<td><code>alt</code></td>
<td><a href="https://moz.com/learn/seo/alt-text" target="_blank" rel="noreferrer">Альтернативный текст</a> для изображения.</td>
</tr>
<tr>
<td><code>caption</code></td>
<td>Markdown-подпись под изображением.</td>
</tr>
<tr>
<td><code>class</code></td>
<td>Дополнительные CSS-классы для изображения.</td>
</tr>
<tr>
<td><code>figureClass</code></td>
<td>Дополнительные CSS-классы для обёртки <code>&lt;figure&gt;</code>. Полезно для галерей.</td>
</tr>
<tr>
<td><code>href</code></td>
<td>URL для ссылки на изображении.</td>
</tr>
<tr>
<td><code>target</code></td>
<td>Атрибут target для <code>href</code> URL.</td>
</tr>
<tr>
<td><code>nozoom</code></td>
<td><code>nozoom=true</code> отключает &ldquo;зум&rdquo; изображения. Полезно в сочетании с <code>href</code>.</td>
</tr>
<tr>
<td><code>default</code></td>
<td>Возврат к стандартному поведению Hugo <code>figure</code>. <code>default=true</code>, далее — обычный <a href="https://gohugo.io/content-management/shortcodes/#figure" target="_blank" rel="noreferrer">синтаксис Hugo shortcode</a>.</td>
</tr>
</tbody>
</table>
<p>Blowfish автоматически конвертирует изображения в стандартном Markdown-синтаксисе:</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Alt text</span>](<span class="na">image.jpg &#34;Image caption&#34;</span>)</span></span></code></pre></div></div>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; figure
</span></span><span class="line"><span class="cl"> src=&#34;abstract.jpg&#34;
</span></span><span class="line"><span class="cl"> alt=&#34;Abstract purple artwork&#34;
</span></span><span class="line"><span class="cl"> caption=&#34;Photo by [<span class="nt">Jr Korpa</span>](<span class="na">https://unsplash.com/@jrkorpa</span>) on [<span class="nt">Unsplash</span>](<span class="na">https://unsplash.com/</span>)&#34;
</span></span><span class="line"><span class="cl"> &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">&lt;!-- ИЛИ --&gt;
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">![<span class="nt">Abstract purple artwork</span>](<span class="na">abstract.jpg &#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa</span>) on [<span class="nt">Unsplash</span>](<span class="na">https://unsplash.com/</span>)&#34;)</span></span></code></pre></div></div>
<figure>
<img class="my-0 rounded-md" src="abstract.jpg" alt="Abstract purple artwork" />
<figcaption>Photo by <a href="https://unsplash.com/@jrkorpa" target="_blank" rel="noreferrer">Jr Korpa</a> on <a href="https://unsplash.com/" target="_blank" rel="noreferrer">Unsplash</a></figcaption>
</figure>
<p><br/><br/><br/></p>
<h2 class="relative group">Forgejo Card
<div id="forgejo-card" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#forgejo-card" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>forgejo</code> — карточка репозитория Forgejo через API. Актуальная статистика: звёзды, форки.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>repo</code></td>
<td>[String] Репозиторий в формате <code>username/repo</code></td>
</tr>
<tr>
<td><code>server</code></td>
<td>[String] URL сервера, например <code>https://v11.next.forgejo.org</code></td>
</tr>
</tbody>
</table>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; forgejo server=&#34;https://v11.next.forgejo.org&#34; repo=&#34;a/mastodon&#34; &gt;}}</span></span></code></pre></div></div>
<div class="forgejo-card-wrapper">
<a id="forgejo-71d4712ac176dd6671a4b5c93ac6d746" target="_blank" href="https://v11.next.forgejo.org/a/mastodon" class="cursor-pointer">
<div
class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral me-2">
<span class="relative block icon"><svg viewBox="0 0 212 212" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor"><g style="opacity:.7"><path stroke-width="25" d="M64 174V76a50 50 0 0 1 50-50h20"/><circle stroke-width="15" cx="148" cy="26" r="18"/></g><path stroke-width="25" d="M64 174v-30a50 50 0 0 1 50-50h20"/><circle stroke-width="15" cx="148" cy="94" r="18"/><circle stroke-width="15" cx="64" cy="186" r="18"/></g></svg></span>
</span>
<div
id="forgejo-71d4712ac176dd6671a4b5c93ac6d746-full_name"
class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
a/mastodon
</div>
</div>
<p id="forgejo-71d4712ac176dd6671a4b5c93ac6d746-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
Your self-hosted, globally interconnected microblogging community
</p>
<div class="m-0 mt-2 flex items-center">
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="Ruby"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
Ruby
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z"/></svg></span>
</span>
<div id="forgejo-71d4712ac176dd6671a4b5c93ac6d746-stars_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
0
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M80 104c13.3 0 24-10.7 24-24s-10.7-24-24-24S56 66.7 56 80s10.7 24 24 24zm80-24c0 32.8-19.7 61-48 73.3V192c0 17.7 14.3 32 32 32H304c17.7 0 32-14.3 32-32V153.3C307.7 141 288 112.8 288 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V192c0 53-43 96-96 96H256v70.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3V288H144c-53 0-96-43-96-96V153.3C19.7 141 0 112.8 0 80C0 35.8 35.8 0 80 0s80 35.8 80 80zm208 24c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24zM248 432c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24z"/></svg></span>
</span>
<div id="forgejo-71d4712ac176dd6671a4b5c93ac6d746-forks_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
0
</div>
</div>
</div>
<script
async
type="text/javascript"
src="/js/fetch-repo.min.dc5533c50cefd50405344b235937142271f26229fe39cbee27fd4960e8bb897a0beebfad77a1091ca91cd0d1fb14e70fc37cc114dd9674fb2c32e0ab512ec8a4.js"
integrity="sha512-3FUzxQzv1QQFNEsjWTcUInHyYin&#43;OcvuJ/1JYOi7iXoL7r&#43;td6EJHKkc0NH7FOcPw3zBFN2WdPssMuCrUS7IpA=="
data-repo-url="https://v11.next.forgejo.org/api/v1/repos/a/mastodon"
data-repo-id="forgejo-71d4712ac176dd6671a4b5c93ac6d746"></script>
</a>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">Gallery
<div id="gallery" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#gallery" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>gallery</code> — адаптивная галерея с разнообразными компоновками.</p>
<p>Для изображений используй <code>img</code> теги с классом <code>class=&quot;grid-wXX&quot;</code> — ширина колонки. Доступные ширины: от 10% до 100% с шагом 5%. Пример: 65% → <code>grid-w65</code>. Также доступны 33% и 66% для галерей в 3 колонки. Tailwind-индикаторы для адаптивной сетки.</p>
<p>Для подписей — <code>figure</code> shortcode внутри gallery. Ширину задавай через <code>figureClass</code>, текст — через <code>caption</code>.</p>
<p><strong>Пример 1: Обычная галерея</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; gallery &gt;}}
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/01.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/02.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/03.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/04.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/05.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/06.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/07.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl">{{&lt; /gallery &gt;}}</span></span></code></pre></div></div>
<div class="width-patch"></div>
<div id="gallery-a01380d42bfa25f060012596a58c1575" class="gallery">
<img src="/cheatsheets/shortcodes/gallery/01.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/02.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/03.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/04.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/05.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/06.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/07.jpg" class="grid-w33" />
</div>
<p><br/><br/><br/></p>
<p><strong>Пример 2: Адаптивная галерея</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; gallery &gt;}}
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/01.jpg&#34; class=&#34;grid-w50 md:grid-w33 xl:grid-w25&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/02.jpg&#34; class=&#34;grid-w50 md:grid-w33 xl:grid-w25&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/03.jpg&#34; class=&#34;grid-w50 md:grid-w33 xl:grid-w25&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/04.jpg&#34; class=&#34;grid-w50 md:grid-w33 xl:grid-w25&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/05.jpg&#34; class=&#34;grid-w50 md:grid-w33 xl:grid-w25&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/06.jpg&#34; class=&#34;grid-w50 md:grid-w33 xl:grid-w25&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/07.jpg&#34; class=&#34;grid-w50 md:grid-w33 xl:grid-w25&#34; /&gt;
</span></span><span class="line"><span class="cl">{{&lt; /gallery &gt;}}</span></span></code></pre></div></div>
<div class="width-patch"></div>
<div id="gallery-0c57050ac464b86ba76d0f6e24555261" class="gallery">
<img src="/cheatsheets/shortcodes/gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/cheatsheets/shortcodes/gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/cheatsheets/shortcodes/gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/cheatsheets/shortcodes/gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/cheatsheets/shortcodes/gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/cheatsheets/shortcodes/gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/cheatsheets/shortcodes/gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
</div>
<p><br/><br/><br/></p>
<p><strong>Пример 3: Галерея с подписями (через <code>figure</code>)</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; gallery &gt;}}
</span></span><span class="line"><span class="cl"> {{&lt; figure src=&#34;gallery/01.jpg&#34; alt=&#34;Gallery image 1&#34; caption=&#34;Первая подпись&#34; figureClass=&#34;grid-w33&#34; &gt;}}
</span></span><span class="line"><span class="cl"> {{&lt; figure src=&#34;gallery/02.jpg&#34; alt=&#34;Gallery image 2&#34; caption=&#34;Вторая подпись&#34; figureClass=&#34;grid-w33&#34; &gt;}}
</span></span><span class="line"><span class="cl"> {{&lt; figure src=&#34;gallery/03.jpg&#34; alt=&#34;Gallery image 3&#34; caption=&#34;Третья подпись&#34; figureClass=&#34;grid-w33&#34; &gt;}}
</span></span><span class="line"><span class="cl">{{&lt; /gallery &gt;}}</span></span></code></pre></div></div>
<div class="width-patch"></div>
<div id="gallery-0a9e2f40b0dec8c385f67418d5a78335" class="gallery">
<figure class="grid-w33">
<img
class="my-0 rounded-md"
loading="lazy"
decoding="async"
fetchpriority="auto"
alt="Gallery image 1"
width="600"
height="800"
src="/cheatsheets/shortcodes/gallery/01_hu_e6f6c105d6b57937.jpg"
srcset="/cheatsheets/shortcodes/gallery/01_hu_e6f6c105d6b57937.jpg 800w,/cheatsheets/shortcodes/gallery/01_hu_bf47bed97e663322.jpg 1280w"
sizes="(min-width: 768px) 50vw, 65vw"
data-zoom-src="/cheatsheets/shortcodes/gallery/01.jpg"
/>
<figcaption>First caption</figcaption>
</figure>
<figure class="grid-w33">
<img
class="my-0 rounded-md"
loading="lazy"
decoding="async"
fetchpriority="auto"
alt="Gallery image 2"
width="640"
height="800"
src="/cheatsheets/shortcodes/gallery/02_hu_937cbe99109db42f.jpg"
srcset="/cheatsheets/shortcodes/gallery/02_hu_937cbe99109db42f.jpg 800w,/cheatsheets/shortcodes/gallery/02_hu_49f7c2691e27132e.jpg 1280w"
sizes="(min-width: 768px) 50vw, 65vw"
data-zoom-src="/cheatsheets/shortcodes/gallery/02.jpg"
/>
<figcaption>Second caption</figcaption>
</figure>
<figure class="grid-w33">
<img
class="my-0 rounded-md"
loading="lazy"
decoding="async"
fetchpriority="auto"
alt="Gallery image 3"
width="800"
height="533"
src="/cheatsheets/shortcodes/gallery/03_hu_92b84f8db8e27f72.jpg"
srcset="/cheatsheets/shortcodes/gallery/03_hu_92b84f8db8e27f72.jpg 800w,/cheatsheets/shortcodes/gallery/03_hu_56c0f9a1d3a438a3.jpg 1280w"
sizes="(min-width: 768px) 50vw, 65vw"
data-zoom-src="/cheatsheets/shortcodes/gallery/03.jpg"
/>
<figcaption>Third caption</figcaption>
</figure>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">Gist
<div id="gist" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#gist" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>gist</code> — встраивание GitHub Gist: пользователь, ID, опционально — конкретный файл.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[0]</code></td>
<td>[String] GitHub username</td>
</tr>
<tr>
<td><code>[1]</code></td>
<td>[String] Gist ID</td>
</tr>
<tr>
<td><code>[2]</code> (опционально)</td>
<td>[String] Имя файла в Gist</td>
</tr>
</tbody>
</table>
<p><strong>Пример 1: Весь Gist</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; gist &#34;octocat&#34; &#34;6cad326836d38bd3a7ae&#34; &gt;}}</span></span></code></pre></div></div>
<script src="https://gist.github.com/octocat/6cad326836d38bd3a7ae.js"></script>
<p><strong>Пример 2: Конкретный файл из Gist</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; gist &#34;rauchg&#34; &#34;2052694&#34; &#34;README.md&#34; &gt;}}</span></span></code></pre></div></div>
<script src="https://gist.github.com/rauchg/2052694.js?file=README.md"></script>
<p><br/><br/><br/></p>
<h2 class="relative group">Gitea Card
<div id="gitea-card" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#gitea-card" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>gitea</code> — карточка репозитория Gitea через API. Актуальная статистика: звёзды, форки.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>repo</code></td>
<td>[String] Репозиторий в формате <code>username/repo</code></td>
</tr>
<tr>
<td><code>server</code></td>
<td>[String] URL сервера, например <code>https://git.fsfe.org</code></td>
</tr>
</tbody>
</table>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; gitea server=&#34;https://git.fsfe.org&#34; repo=&#34;FSFE/fsfe-website&#34; &gt;}}</span></span></code></pre></div></div>
<div class="gitea-card-wrapper">
<a id="gitea-6165268cf158d5133f1b47f14c1a6d06" target="_blank" href="https://git.fsfe.org/FSFE/fsfe-website" class="cursor-pointer">
<div
class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral me-2">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="5.67 143.05 628.65 387.55"><path fill="currentColor" d="M115.912 143.075c-6.462 0-13.762.525-22.012 2.325-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.267.3-26.433.597-39.5.697l.1 117.002s57.4 24.202 83.1 40.102c3.7 2.3 10.2 6.798 12.9 14.398 2.1 6.1 2 13.101-1 19.301l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8a5290.322 5290.322 0 0 0 27 12.954c0-36.449-.1-109.053-.1-109.053-29 .4-89.2-2.201-89.2-2.201s-141.4-7.1-156.8-8.5c-4.9-.3-10.525-.825-16.988-.825zm12.188 48.026s7.1 59.399 15.7 94.199c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1z"/><path fill="currentColor" d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/></svg></span>
</span>
<div
id="gitea-6165268cf158d5133f1b47f14c1a6d06-full_name"
class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
FSFE/fsfe-website
</div>
</div>
<p id="gitea-6165268cf158d5133f1b47f14c1a6d06-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
Source files of fsfe.org, pdfreaders.org, freeyourandroid.org, ilovefs.org, drm.info, and test.fsfe.org. Contribute: <a href="https://fsfe.org/contribute/web/" target="_blank" rel="noreferrer">https://fsfe.org/contribute/web/</a>
</p>
<div class="m-0 mt-2 flex items-center">
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="HTML"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
HTML
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z"/></svg></span>
</span>
<div id="gitea-6165268cf158d5133f1b47f14c1a6d06-stars_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
33
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M80 104c13.3 0 24-10.7 24-24s-10.7-24-24-24S56 66.7 56 80s10.7 24 24 24zm80-24c0 32.8-19.7 61-48 73.3V192c0 17.7 14.3 32 32 32H304c17.7 0 32-14.3 32-32V153.3C307.7 141 288 112.8 288 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V192c0 53-43 96-96 96H256v70.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3V288H144c-53 0-96-43-96-96V153.3C19.7 141 0 112.8 0 80C0 35.8 35.8 0 80 0s80 35.8 80 80zm208 24c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24zM248 432c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24z"/></svg></span>
</span>
<div id="gitea-6165268cf158d5133f1b47f14c1a6d06-forks_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
93
</div>
</div>
</div>
<script
async
type="text/javascript"
src="/js/fetch-repo.min.dc5533c50cefd50405344b235937142271f26229fe39cbee27fd4960e8bb897a0beebfad77a1091ca91cd0d1fb14e70fc37cc114dd9674fb2c32e0ab512ec8a4.js"
integrity="sha512-3FUzxQzv1QQFNEsjWTcUInHyYin&#43;OcvuJ/1JYOi7iXoL7r&#43;td6EJHKkc0NH7FOcPw3zBFN2WdPssMuCrUS7IpA=="
data-repo-url="https://git.fsfe.org/api/v1/repos/FSFE/fsfe-website"
data-repo-id="gitea-6165268cf158d5133f1b47f14c1a6d06"></script>
</a>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">GitHub Card
<div id="github-card" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#github-card" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>github</code> — карточка GitHub-репозитория с актуальной статистикой: звёзды, форки.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>repo</code></td>
<td>[String] Репозиторий в формате <code>username/repo</code></td>
</tr>
<tr>
<td><code>showThumbnail</code></td>
<td><strong>Опционально</strong> [boolean] Показывать миниатюру репозитория</td>
</tr>
</tbody>
</table>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; github repo=&#34;nunocoracao/blowfish&#34; showThumbnail=true &gt;}}</span></span></code></pre></div></div>
<div class="github-card-wrapper">
<a id="github-4c76eaa35d780dbfed33d216d54a36e0" target="_blank" href="https://github.com/nunocoracao/blowfish" class="cursor-pointer">
<div
class="w-full md:w-auto p-0 m-0 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl"><div class="w-full nozoom">
<img
src="https://opengraph.githubassets.com/0/nunocoracao/blowfish"
alt="GitHub Repository Thumbnail"
class="nozoom mt-0 mb-0 w-full h-full object-cover">
</div><div class="w-full md:w-auto pt-3 p-5">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral me-2">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</span>
</span>
<div
id="github-4c76eaa35d780dbfed33d216d54a36e0-full_name"
class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
nunocoracao/blowfish
</div>
</div>
<p id="github-4c76eaa35d780dbfed33d216d54a36e0-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
Personal Website &amp; Blog Theme for Hugo
</p>
<div class="m-0 mt-2 flex items-center">
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="HTML"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
HTML
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z"/></svg></span>
</span>
<div id="github-4c76eaa35d780dbfed33d216d54a36e0-stargazers" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
2627
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M80 104c13.3 0 24-10.7 24-24s-10.7-24-24-24S56 66.7 56 80s10.7 24 24 24zm80-24c0 32.8-19.7 61-48 73.3V192c0 17.7 14.3 32 32 32H304c17.7 0 32-14.3 32-32V153.3C307.7 141 288 112.8 288 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V192c0 53-43 96-96 96H256v70.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3V288H144c-53 0-96-43-96-96V153.3C19.7 141 0 112.8 0 80C0 35.8 35.8 0 80 0s80 35.8 80 80zm208 24c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24zM248 432c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24z"/></svg></span>
</span>
<div id="github-4c76eaa35d780dbfed33d216d54a36e0-forks" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
684
</div>
</div>
</div>
</div>
<script
async
type="text/javascript"
src="/js/fetch-repo.min.dc5533c50cefd50405344b235937142271f26229fe39cbee27fd4960e8bb897a0beebfad77a1091ca91cd0d1fb14e70fc37cc114dd9674fb2c32e0ab512ec8a4.js"
integrity="sha512-3FUzxQzv1QQFNEsjWTcUInHyYin&#43;OcvuJ/1JYOi7iXoL7r&#43;td6EJHKkc0NH7FOcPw3zBFN2WdPssMuCrUS7IpA=="
data-repo-url="https://api.github.com/repos/nunocoracao/blowfish"
data-repo-id="github-4c76eaa35d780dbfed33d216d54a36e0"></script>
</a>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">GitLab Card
<div id="gitlab-card" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#gitlab-card" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>gitlab</code> — карточка GitLab Project (репозитория в терминологии GitLab). Актуальная статистика: звёзды, форки. В отличие от <code>github</code>, не показывает основной язык проекта. Поддерживает кастомный URL инстанса GitLab — если доступен endpoint <code>api/v4/projects/</code>, работает с self-hosted и enterprise.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>projectID</code></td>
<td>[String] Числовой ProjectID GitLab</td>
</tr>
<tr>
<td><code>baseURL</code></td>
<td>[String] URL инстанса GitLab, по умолчанию <code>https://gitlab.com/</code></td>
</tr>
</tbody>
</table>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; gitlab projectID=&#34;278964&#34; &gt;}}</span></span></code></pre></div></div>
<div class="gitlab-card-wrapper">
<a id="gitlab-f12aa42da26afad5162419ee6611a792" target="_blank" href="https://gitlab.com/gitlab-org/gitlab" class="cursor-pointer">
<div
class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral me-2">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M510.486,284.482l-27.262-83.963c.012.038.016.077.028.115-.013-.044-.021-.088-.033-.132v-.01L429.1,33.871a21.328,21.328,0,0,0-20.445-14.6A21.038,21.038,0,0,0,388.466,34L337.094,192.154H175L123.533,33.989A21.033,21.033,0,0,0,103.35,19.274h-.113A21.467,21.467,0,0,0,82.86,34L28.888,200.475l-.008.021v0c-.013.042-.019.084-.033.127.012-.038.017-.077.029-.115L1.514,284.482a30.6,30.6,0,0,0,11.117,34.283L248.893,490.427c.035.026.074.041.109.067.1.072.2.146.3.214-.1-.065-.187-.136-.282-.2l0,0c.015.012.033.02.05.031s.027.015.041.024l.006,0a11.992,11.992,0,0,0,1.137.7c.054.03.1.068.157.1l0,0c.033.016.064.038.1.054s.053.02.077.032.038.015.056.023c.044.021.092.034.136.057.205.1.421.178.633.264.2.082.389.177.592.248l.025.011c.034.012.064.028.1.04s.083.032.125.046l.05.012c.053.016.11.024.163.039.019.006.042.009.063.015.284.086.579.148.872.213.115.026.225.062.341.083.017,0,.032.009.05.012.038.008.073.021.112.027.062.011.122.031.186.04.049.007.1,0,.151.012h.033a11.918,11.918,0,0,0,1.7.136h.019a11.971,11.971,0,0,0,1.7-.136h.033c.05-.008.1,0,.153-.012s.124-.029.187-.04c.038-.006.073-.019.11-.027.017,0,.032-.009.049-.012.118-.023.231-.059.349-.084.288-.064.578-.126.861-.21.019-.006.039-.008.059-.014.055-.017.113-.024.169-.041.016-.006.035-.007.051-.012.044-.013.086-.032.129-.047s.063-.028.1-.041l.026-.01c.214-.076.417-.175.627-.261s.394-.154.584-.245c.047-.023.1-.036.142-.059.018-.009.04-.015.058-.024s.053-.02.078-.033.068-.04.1-.056l0,0c.056-.028.106-.069.161-.1a12.341,12.341,0,0,0,1.132-.695c.029-.02.062-.035.092-.056.008-.006.017-.009.024-.015.035-.026.076-.043.11-.068l236.3-171.666A30.6,30.6,0,0,0,510.486,284.482ZM408.8,49.48l46.342,142.674H362.46Zm-305.6,0,46.428,142.675H56.948ZM26.817,299.251a6.526,6.526,0,0,1-2.361-7.308l20.34-62.42L193.835,420.6Zm38.245-82.972h92.411L223.354,419.22Zm183.416,273.83c-.047-.038-.092-.079-.138-.118-.009-.008-.018-.018-.028-.026-.091-.075-.18-.152-.268-.231-.172-.15-.341-.3-.5-.462.014.012.029.022.043.035l.055.046a12.191,12.191,0,0,0,1.091.929l.012.011c.018.013.033.03.051.045C248.689,490.263,248.58,490.19,248.478,490.109Zm7.514-48.482L217.226,322.21,182.839,216.279H329.253Zm7.935,48.107c-.091.079-.178.157-.27.233l-.032.028c-.047.038-.091.079-.136.117-.1.08-.209.152-.313.229.018-.013.033-.032.053-.044l.009-.009a11.69,11.69,0,0,0,1.086-.926c.014-.013.03-.024.044-.036s.038-.03.054-.047C264.262,489.435,264.1,489.586,263.927,489.734Zm90.7-273.455h92.4l-18.91,24.23-139.468,178.7Zm130.567,82.967L318.2,420.563,467.284,229.538l20.258,62.393A6.528,6.528,0,0,1,485.189,299.246Z"/></svg>
</span>
</span>
<div
id="gitlab-f12aa42da26afad5162419ee6611a792-name_with_namespace"
class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
GitLab.org / GitLab
</div>
</div>
<p id="gitlab-f12aa42da26afad5162419ee6611a792-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
GitLab is an open source end-to-end software development platform with built-in version control, issue tracking, code review, CI/CD, and more. Self-host GitLab on your own servers, in a container, or on a cloud provider.
</p>
<div class="m-0 mt-2 flex items-center">
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z"/></svg></span>
</span>
<div id="gitlab-f12aa42da26afad5162419ee6611a792-star_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
5921
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M80 104c13.3 0 24-10.7 24-24s-10.7-24-24-24S56 66.7 56 80s10.7 24 24 24zm80-24c0 32.8-19.7 61-48 73.3V192c0 17.7 14.3 32 32 32H304c17.7 0 32-14.3 32-32V153.3C307.7 141 288 112.8 288 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V192c0 53-43 96-96 96H256v70.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3V288H144c-53 0-96-43-96-96V153.3C19.7 141 0 112.8 0 80C0 35.8 35.8 0 80 0s80 35.8 80 80zm208 24c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24zM248 432c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24z"/></svg></span>
</span>
<div id="gitlab-f12aa42da26afad5162419ee6611a792-forks_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
11861
</div>
</div>
</div>
<script
async
type="text/javascript"
src="/js/fetch-repo.min.dc5533c50cefd50405344b235937142271f26229fe39cbee27fd4960e8bb897a0beebfad77a1091ca91cd0d1fb14e70fc37cc114dd9674fb2c32e0ab512ec8a4.js"
integrity="sha512-3FUzxQzv1QQFNEsjWTcUInHyYin&#43;OcvuJ/1JYOi7iXoL7r&#43;td6EJHKkc0NH7FOcPw3zBFN2WdPssMuCrUS7IpA=="
data-repo-url="https://gitlab.com/api/v4/projects/278964"
data-repo-id="gitlab-f12aa42da26afad5162419ee6611a792"></script>
</a>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">Hugging Face Card
<div id="hugging-face-card" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#hugging-face-card" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>huggingface</code> — карточка модели или датасета Hugging Face. Актуальная информация: лайки, загрузки, тип и описание.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>model</code></td>
<td>[String] Модель в формате <code>username/model</code></td>
</tr>
<tr>
<td><code>dataset</code></td>
<td>[String] Датасет в формате <code>username/dataset</code></td>
</tr>
</tbody>
</table>
<p><strong>Важно:</strong> Используй либо <code>model</code>, либо <code>dataset</code> — не оба.</p>
<p><strong>Пример 1 (Модель):</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; huggingface model=&#34;google-bert/bert-base-uncased&#34; &gt;}}</span></span></code></pre></div></div>
<div class="huggingface-card-wrapper">
<a id="huggingface-2a888b3f5ddc7d2dc49f74c53f4c1c32" target="_blank" href="https://huggingface.co/google-bert/bert-base-uncased" class="cursor-pointer">
<div
class="w-full md:w-auto p-0 m-0 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="w-full md:w-auto pt-3 p-5">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral me-2">
<span class="relative inline-block align-text-bottom icon">
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475 439"><path d="M235.793 396.126a187.281 187.281 0 00187.285-187.284A187.283 187.283 0 00235.793 21.558 187.287 187.287 0 0048.509 208.842a187.286 187.286 0 00187.284 187.284z" fill="#FFD21E"/><path d="M423.078 208.842A187.283 187.283 0 00235.793 21.558 187.283 187.283 0 0048.509 208.842a187.283 187.283 0 00319.714 132.43 187.284 187.284 0 0054.855-132.43zm-396.127 0a208.842 208.842 0 11417.685 0 208.842 208.842 0 01-417.685 0z" fill="#FF9D0B"/><path d="M296.641 157.912c6.898 2.371 9.593 16.491 16.545 12.827a26.946 26.946 0 008.24-40.841 26.952 26.952 0 00-28.632-8.767 26.942 26.942 0 00-19.055 23.099 26.943 26.943 0 003.014 15.352c3.288 6.198 13.744-3.88 19.941-1.724l-.053.054zm-126.923 0c-6.898 2.371-9.647 16.491-16.545 12.827a26.946 26.946 0 01-8.24-40.841 26.952 26.952 0 0128.632-8.767 26.944 26.944 0 0116.041 38.451c-3.288 6.198-13.797-3.88-19.941-1.724l.053.054z" fill="#3A3B45"/><path d="M234.446 287.205c52.979 0 70.063-47.212 70.063-71.464 0-12.612-8.461-8.624-22.043-1.941-12.557 6.198-29.426 14.768-47.966 14.768-38.75 0-70.063-37.08-70.063-12.827 0 24.252 17.031 71.464 70.063 71.464h-.054z" fill="#FF323D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M193.863 274.863a46.895 46.895 0 0128.565-24.199c2.155-.646 4.365 3.072 6.682 6.899 2.156 3.665 4.42 7.384 6.683 7.384 2.426 0 4.851-3.665 7.168-7.276 2.426-3.773 4.797-7.438 7.115-6.737a46.403 46.403 0 0126.947 22.474c20.103-15.845 27.486-41.715 27.486-57.667 0-12.612-8.461-8.624-22.043-1.941l-.754.378c-12.45 6.198-29.05 14.39-47.266 14.39-18.216 0-34.762-8.192-47.266-14.39-14.012-6.953-22.797-11.318-22.797 1.563 0 16.438 7.869 43.439 29.48 59.122z" fill="#3A3B45"/><path d="M362.446 183.242a17.515 17.515 0 10.002-35.03 17.515 17.515 0 00-.002 35.03zm-250.61 0a17.515 17.515 0 100-35.03 17.515 17.515 0 000 35.03zM75.78 242.526c-8.731 0-16.492 3.557-21.935 10.079a32.173 32.173 0 00-7.168 20.264 38.275 38.275 0 00-10.456-1.617c-8.353 0-15.899 3.18-21.234 8.947a31.257 31.257 0 00-4.312 37.726 28.566 28.566 0 00-9.647 15.198 31.512 31.512 0 004.312 25.546 28.136 28.136 0 00-1.995 27.056c5.498 12.503 19.24 22.312 45.919 32.875 16.545 6.576 31.744 10.779 31.851 10.833a238.92 238.92 0 0058.907 8.623c31.583 0 54.165-9.701 67.153-28.779 20.911-30.666 17.947-58.746-9.162-85.801-14.929-14.983-24.899-37.025-26.947-41.876-4.204-14.336-15.306-30.289-33.684-30.289a30.716 30.716 0 00-24.792 13.258c-5.389-6.79-10.671-12.126-15.414-15.198a39.885 39.885 0 00-21.396-6.845zm0 21.558c2.749 0 6.144 1.186 9.809 3.503 11.533 7.33 33.684 45.434 41.822 60.255 2.695 4.958 7.384 7.06 11.534 7.06 8.353 0 14.821-8.246.808-18.755-21.127-15.792-13.743-41.607-3.665-43.17.431-.108.916-.108 1.294-.108 9.162 0 13.204 15.791 13.204 15.791s11.857 29.75 32.229 50.122c20.318 20.319 21.396 36.649 6.575 58.368-10.132 14.821-29.48 19.295-49.368 19.295-20.533 0-41.66-4.851-53.463-7.869-.593-.162-72.489-20.48-63.38-37.726 1.509-2.911 4.042-4.096 7.222-4.096 12.826 0 36.11 19.078 46.187 19.078 2.21 0 3.773-.916 4.474-3.233 4.257-15.36-64.997-21.828-59.177-44.032 1.078-3.935 3.827-5.498 7.761-5.498 16.923 0 54.973 29.804 62.95 29.804.592 0 1.077-.161 1.293-.539 3.988-6.467 1.778-10.994-26.409-28.025-28.079-17.031-47.858-27.271-36.648-39.505 1.293-1.401 3.126-2.048 5.39-2.048 17.084 0 57.451 36.756 57.451 36.756s10.887 11.318 17.516 11.318c1.509 0 2.802-.539 3.665-2.048 4.635-7.868-43.44-44.301-46.134-59.338-1.833-10.24 1.293-15.36 7.06-15.36z" fill="#FF9D0B"/><path d="M189.39 397.15c14.821-21.773 13.743-38.103-6.575-58.422-20.372-20.318-32.229-50.122-32.229-50.122s-4.419-17.246-14.498-15.629c-10.078 1.617-17.462 27.378 3.665 43.169 21.073 15.792-4.204 26.517-12.342 11.696-8.084-14.821-30.289-52.925-41.822-60.255-11.48-7.276-19.564-3.233-16.87 11.857 2.696 15.037 50.824 51.47 46.135 59.284-4.689 7.923-21.181-9.216-21.181-9.216s-51.577-46.942-62.841-34.708c-11.21 12.234 8.569 22.474 36.648 39.505 28.187 17.031 30.397 21.558 26.409 28.025-4.042 6.468-66.183-45.972-72.004-23.713-5.82 22.15 63.434 28.564 59.177 43.924-4.312 15.36-48.829-28.996-57.883-11.749-9.162 17.3 62.787 37.618 63.38 37.78 23.175 6.036 82.189 18.809 102.831-11.426z" fill="#FFD21E"/><path d="M398.502 242.526c8.731 0 16.545 3.557 21.935 10.079a32.173 32.173 0 017.168 20.264 38.272 38.272 0 0110.509-1.617c8.354 0 15.899 3.18 21.235 8.947a31.257 31.257 0 014.311 37.726 28.564 28.564 0 019.594 15.198 31.513 31.513 0 01-4.312 25.546 28.142 28.142 0 011.994 27.056c-5.497 12.503-19.24 22.312-45.864 32.875-16.6 6.576-31.798 10.779-31.906 10.833a238.914 238.914 0 01-58.907 8.623c-31.582 0-54.164-9.701-67.153-28.779-20.911-30.667-17.947-58.746 9.162-85.801 14.983-14.983 24.954-37.026 27.002-41.876 4.203-14.336 15.252-30.289 33.63-30.289a30.716 30.716 0 0124.792 13.258c5.389-6.791 10.671-12.126 15.467-15.198a39.888 39.888 0 0121.343-6.845zm0 21.558c-2.749 0-6.09 1.186-9.809 3.503-11.48 7.33-33.684 45.434-41.822 60.255a13.106 13.106 0 01-11.534 7.06c-8.3 0-14.821-8.246-.754-18.756 21.072-15.791 13.689-41.606 3.61-43.169a8.233 8.233 0 00-1.293-.108c-9.162 0-13.204 15.791-13.204 15.791s-11.857 29.75-32.175 50.122c-20.373 20.319-21.45 36.649-6.576 58.368 10.079 14.821 29.481 19.295 49.314 19.295 20.588 0 41.661-4.851 53.518-7.869.539-.162 72.488-20.48 63.38-37.726-1.563-2.911-4.042-4.096-7.222-4.096-12.827 0-36.163 19.078-46.188 19.078-2.263 0-3.826-.916-4.473-3.233-4.312-15.36 64.943-21.828 59.122-44.032-1.024-3.935-3.772-5.498-7.76-5.498-16.923 0-54.973 29.804-62.949 29.804-.539 0-1.024-.161-1.24-.539-3.988-6.467-1.832-10.994 26.301-28.025 28.187-17.031 47.966-27.271 36.648-39.505-1.24-1.401-3.072-2.048-5.282-2.048-17.138 0-57.505 36.756-57.505 36.756s-10.887 11.318-17.462 11.318a3.99 3.99 0 01-3.665-2.048c-4.689-7.868 43.385-44.301 46.08-59.338 1.832-10.24-1.294-15.36-7.06-15.36z" fill="#FF9D0B"/><path d="M284.945 397.15c-14.821-21.773-13.797-38.103 6.576-58.422 20.318-20.318 32.175-50.122 32.175-50.122s4.419-17.246 14.551-15.629c10.025 1.617 17.408 27.378-3.664 43.169-21.127 15.792 4.203 26.517 12.287 11.696 8.139-14.821 30.343-52.925 41.823-60.255 11.479-7.276 19.617-3.233 16.869 11.857-2.695 15.037-50.769 51.47-46.08 59.284 4.635 7.923 21.127-9.216 21.127-9.216s51.631-46.942 62.841-34.708c11.21 12.234-8.515 22.474-36.649 39.505-28.186 17.031-30.342 21.558-26.408 28.025 4.042 6.468 66.183-45.972 72.003-23.713 5.821 22.15-63.38 28.564-59.122 43.924 4.311 15.36 48.775-28.996 57.883-11.749 9.108 17.3-62.788 37.618-63.38 37.78-23.229 6.036-82.244 18.809-102.832-11.426z" fill="#FFD21E"/></svg>
</span>
</span>
<div
id="huggingface-2a888b3f5ddc7d2dc49f74c53f4c1c32-id"
class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
google-bert/bert-base-uncased
</div>
</div><div class="m-0 mt-2 flex items-center">
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="model"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
fill-mask
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"/></svg></span>
</span>
<div id="huggingface-2a888b3f5ddc7d2dc49f74c53f4c1c32-likes" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
2569
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zM432 456c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/></svg></span>
</span>
<div id="huggingface-2a888b3f5ddc7d2dc49f74c53f4c1c32-downloads" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
5.3047036e&#43;07
</div>
</div>
</div>
</div>
<script
async
type="text/javascript"
src="/js/fetch-repo.min.dc5533c50cefd50405344b235937142271f26229fe39cbee27fd4960e8bb897a0beebfad77a1091ca91cd0d1fb14e70fc37cc114dd9674fb2c32e0ab512ec8a4.js"
integrity="sha512-3FUzxQzv1QQFNEsjWTcUInHyYin&#43;OcvuJ/1JYOi7iXoL7r&#43;td6EJHKkc0NH7FOcPw3zBFN2WdPssMuCrUS7IpA=="
data-repo-url="https://huggingface.co/api/models/google-bert/bert-base-uncased"
data-repo-id="huggingface-2a888b3f5ddc7d2dc49f74c53f4c1c32"></script>
</a>
</div>
<p><strong>Пример 2 (Датасет):</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; huggingface dataset=&#34;stanfordnlp/imdb&#34; &gt;}}</span></span></code></pre></div></div>
<div class="huggingface-card-wrapper">
<a id="huggingface-b255fdb2a4d5d18bd21642f2c4704158" target="_blank" href="https://huggingface.co/datasets/stanfordnlp/imdb" class="cursor-pointer">
<div
class="w-full md:w-auto p-0 m-0 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="w-full md:w-auto pt-3 p-5">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral me-2">
<span class="relative inline-block align-text-bottom icon">
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475 439"><path d="M235.793 396.126a187.281 187.281 0 00187.285-187.284A187.283 187.283 0 00235.793 21.558 187.287 187.287 0 0048.509 208.842a187.286 187.286 0 00187.284 187.284z" fill="#FFD21E"/><path d="M423.078 208.842A187.283 187.283 0 00235.793 21.558 187.283 187.283 0 0048.509 208.842a187.283 187.283 0 00319.714 132.43 187.284 187.284 0 0054.855-132.43zm-396.127 0a208.842 208.842 0 11417.685 0 208.842 208.842 0 01-417.685 0z" fill="#FF9D0B"/><path d="M296.641 157.912c6.898 2.371 9.593 16.491 16.545 12.827a26.946 26.946 0 008.24-40.841 26.952 26.952 0 00-28.632-8.767 26.942 26.942 0 00-19.055 23.099 26.943 26.943 0 003.014 15.352c3.288 6.198 13.744-3.88 19.941-1.724l-.053.054zm-126.923 0c-6.898 2.371-9.647 16.491-16.545 12.827a26.946 26.946 0 01-8.24-40.841 26.952 26.952 0 0128.632-8.767 26.944 26.944 0 0116.041 38.451c-3.288 6.198-13.797-3.88-19.941-1.724l.053.054z" fill="#3A3B45"/><path d="M234.446 287.205c52.979 0 70.063-47.212 70.063-71.464 0-12.612-8.461-8.624-22.043-1.941-12.557 6.198-29.426 14.768-47.966 14.768-38.75 0-70.063-37.08-70.063-12.827 0 24.252 17.031 71.464 70.063 71.464h-.054z" fill="#FF323D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M193.863 274.863a46.895 46.895 0 0128.565-24.199c2.155-.646 4.365 3.072 6.682 6.899 2.156 3.665 4.42 7.384 6.683 7.384 2.426 0 4.851-3.665 7.168-7.276 2.426-3.773 4.797-7.438 7.115-6.737a46.403 46.403 0 0126.947 22.474c20.103-15.845 27.486-41.715 27.486-57.667 0-12.612-8.461-8.624-22.043-1.941l-.754.378c-12.45 6.198-29.05 14.39-47.266 14.39-18.216 0-34.762-8.192-47.266-14.39-14.012-6.953-22.797-11.318-22.797 1.563 0 16.438 7.869 43.439 29.48 59.122z" fill="#3A3B45"/><path d="M362.446 183.242a17.515 17.515 0 10.002-35.03 17.515 17.515 0 00-.002 35.03zm-250.61 0a17.515 17.515 0 100-35.03 17.515 17.515 0 000 35.03zM75.78 242.526c-8.731 0-16.492 3.557-21.935 10.079a32.173 32.173 0 00-7.168 20.264 38.275 38.275 0 00-10.456-1.617c-8.353 0-15.899 3.18-21.234 8.947a31.257 31.257 0 00-4.312 37.726 28.566 28.566 0 00-9.647 15.198 31.512 31.512 0 004.312 25.546 28.136 28.136 0 00-1.995 27.056c5.498 12.503 19.24 22.312 45.919 32.875 16.545 6.576 31.744 10.779 31.851 10.833a238.92 238.92 0 0058.907 8.623c31.583 0 54.165-9.701 67.153-28.779 20.911-30.666 17.947-58.746-9.162-85.801-14.929-14.983-24.899-37.025-26.947-41.876-4.204-14.336-15.306-30.289-33.684-30.289a30.716 30.716 0 00-24.792 13.258c-5.389-6.79-10.671-12.126-15.414-15.198a39.885 39.885 0 00-21.396-6.845zm0 21.558c2.749 0 6.144 1.186 9.809 3.503 11.533 7.33 33.684 45.434 41.822 60.255 2.695 4.958 7.384 7.06 11.534 7.06 8.353 0 14.821-8.246.808-18.755-21.127-15.792-13.743-41.607-3.665-43.17.431-.108.916-.108 1.294-.108 9.162 0 13.204 15.791 13.204 15.791s11.857 29.75 32.229 50.122c20.318 20.319 21.396 36.649 6.575 58.368-10.132 14.821-29.48 19.295-49.368 19.295-20.533 0-41.66-4.851-53.463-7.869-.593-.162-72.489-20.48-63.38-37.726 1.509-2.911 4.042-4.096 7.222-4.096 12.826 0 36.11 19.078 46.187 19.078 2.21 0 3.773-.916 4.474-3.233 4.257-15.36-64.997-21.828-59.177-44.032 1.078-3.935 3.827-5.498 7.761-5.498 16.923 0 54.973 29.804 62.95 29.804.592 0 1.077-.161 1.293-.539 3.988-6.467 1.778-10.994-26.409-28.025-28.079-17.031-47.858-27.271-36.648-39.505 1.293-1.401 3.126-2.048 5.39-2.048 17.084 0 57.451 36.756 57.451 36.756s10.887 11.318 17.516 11.318c1.509 0 2.802-.539 3.665-2.048 4.635-7.868-43.44-44.301-46.134-59.338-1.833-10.24 1.293-15.36 7.06-15.36z" fill="#FF9D0B"/><path d="M189.39 397.15c14.821-21.773 13.743-38.103-6.575-58.422-20.372-20.318-32.229-50.122-32.229-50.122s-4.419-17.246-14.498-15.629c-10.078 1.617-17.462 27.378 3.665 43.169 21.073 15.792-4.204 26.517-12.342 11.696-8.084-14.821-30.289-52.925-41.822-60.255-11.48-7.276-19.564-3.233-16.87 11.857 2.696 15.037 50.824 51.47 46.135 59.284-4.689 7.923-21.181-9.216-21.181-9.216s-51.577-46.942-62.841-34.708c-11.21 12.234 8.569 22.474 36.648 39.505 28.187 17.031 30.397 21.558 26.409 28.025-4.042 6.468-66.183-45.972-72.004-23.713-5.82 22.15 63.434 28.564 59.177 43.924-4.312 15.36-48.829-28.996-57.883-11.749-9.162 17.3 62.787 37.618 63.38 37.78 23.175 6.036 82.189 18.809 102.831-11.426z" fill="#FFD21E"/><path d="M398.502 242.526c8.731 0 16.545 3.557 21.935 10.079a32.173 32.173 0 017.168 20.264 38.272 38.272 0 0110.509-1.617c8.354 0 15.899 3.18 21.235 8.947a31.257 31.257 0 014.311 37.726 28.564 28.564 0 019.594 15.198 31.513 31.513 0 01-4.312 25.546 28.142 28.142 0 011.994 27.056c-5.497 12.503-19.24 22.312-45.864 32.875-16.6 6.576-31.798 10.779-31.906 10.833a238.914 238.914 0 01-58.907 8.623c-31.582 0-54.164-9.701-67.153-28.779-20.911-30.667-17.947-58.746 9.162-85.801 14.983-14.983 24.954-37.026 27.002-41.876 4.203-14.336 15.252-30.289 33.63-30.289a30.716 30.716 0 0124.792 13.258c5.389-6.791 10.671-12.126 15.467-15.198a39.888 39.888 0 0121.343-6.845zm0 21.558c-2.749 0-6.09 1.186-9.809 3.503-11.48 7.33-33.684 45.434-41.822 60.255a13.106 13.106 0 01-11.534 7.06c-8.3 0-14.821-8.246-.754-18.756 21.072-15.791 13.689-41.606 3.61-43.169a8.233 8.233 0 00-1.293-.108c-9.162 0-13.204 15.791-13.204 15.791s-11.857 29.75-32.175 50.122c-20.373 20.319-21.45 36.649-6.576 58.368 10.079 14.821 29.481 19.295 49.314 19.295 20.588 0 41.661-4.851 53.518-7.869.539-.162 72.488-20.48 63.38-37.726-1.563-2.911-4.042-4.096-7.222-4.096-12.827 0-36.163 19.078-46.188 19.078-2.263 0-3.826-.916-4.473-3.233-4.312-15.36 64.943-21.828 59.122-44.032-1.024-3.935-3.772-5.498-7.76-5.498-16.923 0-54.973 29.804-62.949 29.804-.539 0-1.024-.161-1.24-.539-3.988-6.467-1.832-10.994 26.301-28.025 28.187-17.031 47.966-27.271 36.648-39.505-1.24-1.401-3.072-2.048-5.282-2.048-17.138 0-57.505 36.756-57.505 36.756s-10.887 11.318-17.462 11.318a3.99 3.99 0 01-3.665-2.048c-4.689-7.868 43.385-44.301 46.08-59.338 1.832-10.24-1.294-15.36-7.06-15.36z" fill="#FF9D0B"/><path d="M284.945 397.15c-14.821-21.773-13.797-38.103 6.576-58.422 20.318-20.318 32.175-50.122 32.175-50.122s4.419-17.246 14.551-15.629c10.025 1.617 17.408 27.378-3.664 43.169-21.127 15.792 4.203 26.517 12.287 11.696 8.139-14.821 30.343-52.925 41.823-60.255 11.479-7.276 19.617-3.233 16.869 11.857-2.695 15.037-50.769 51.47-46.08 59.284 4.635 7.923 21.127-9.216 21.127-9.216s51.631-46.942 62.841-34.708c11.21 12.234-8.515 22.474-36.649 39.505-28.186 17.031-30.342 21.558-26.408 28.025 4.042 6.468 66.183-45.972 72.003-23.713 5.821 22.15-63.38 28.564-59.122 43.924 4.311 15.36 48.775-28.996 57.883-11.749 9.108 17.3-62.788 37.618-63.38 37.78-23.229 6.036-82.244 18.809-102.832-11.426z" fill="#FFD21E"/></svg>
</span>
</span>
<div
id="huggingface-b255fdb2a4d5d18bd21642f2c4704158-id"
class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
stanfordnlp/imdb
</div>
</div><div id="huggingface-b255fdb2a4d5d18bd21642f2c4704158-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
Large Movie Review Dataset.
This is a dataset for binary sentiment classification containing substantially more data than previous benchmark datasets. We provide a set of 25,000 highly polar movie reviews for training, and 25,000 for testing. There is additional unlabeled data for use as well.
Supported Tasks and Leaderboards
More Information Needed
Languages
More Information Needed
Dataset Structure… See the full description on the dataset page: https://huggingface.co/datasets/stanfordnlp/imdb.
</div><div class="m-0 mt-2 flex items-center">
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="default"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
dataset
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"/></svg></span>
</span>
<div id="huggingface-b255fdb2a4d5d18bd21642f2c4704158-likes" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
362
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zM432 456c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/></svg></span>
</span>
<div id="huggingface-b255fdb2a4d5d18bd21642f2c4704158-downloads" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
92543
</div>
</div>
</div>
</div>
<script
async
type="text/javascript"
src="/js/fetch-repo.min.dc5533c50cefd50405344b235937142271f26229fe39cbee27fd4960e8bb897a0beebfad77a1091ca91cd0d1fb14e70fc37cc114dd9674fb2c32e0ab512ec8a4.js"
integrity="sha512-3FUzxQzv1QQFNEsjWTcUInHyYin&#43;OcvuJ/1JYOi7iXoL7r&#43;td6EJHKkc0NH7FOcPw3zBFN2WdPssMuCrUS7IpA=="
data-repo-url="https://huggingface.co/api/datasets/stanfordnlp/imdb"
data-repo-id="huggingface-b255fdb2a4d5d18bd21642f2c4704158"></script>
</a>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">Icon
<div id="icon" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#icon" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>icon</code> — SVG-иконка, масштабируется под текущий размер текста. Единственный параметр — имя иконки.</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; icon &#34;github&#34; &gt;}}</span></span></code></pre></div></div>
<p><strong>Результат:</strong> <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></span></p>
<p>Иконки загружаются через Hugo pipelines — максимальная гибкость. Blowfish включает набор встроенных иконок для соцсетей, ссылок и прочего.</p>
<p>Свои иконки: положи SVG в <code>assets/icons/</code> проекта. В shortcode используй имя файла без <code>.svg</code>.</p>
<p><br/><br/><br/></p>
<h2 class="relative group">KaTeX
<div id="katex" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#katex" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>katex</code> — математические выражения через KaTeX. Синтаксис — в <a href="https://katex.org/docs/supported.html" target="_blank" rel="noreferrer">справочнике TeX-функций</a>.</p>
<p>Shortcode достаточно вставить один раз на странице — KaTeX автоматически отрендерит всю разметку. Поддерживаются inline и block нотации.</p>
<p>Inline: оберни выражение в <code>\(</code> и <code>\)</code>. Block: используй <code>$$</code>.</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; katex &gt;}}
</span></span><span class="line"><span class="cl">\(f(a,b,c) = (a^2+b^2+c^2)^3\)</span></span></code></pre></div></div>
<p>
\(f(a,b,c) = (a^2+b^2+c^2)^3\)</p>
<p><br/><br/><br/></p>
<h2 class="relative group">Keyword
<div id="keyword" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#keyword" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>keyword</code> — визуальное выделение важных слов и фраз (например, профессиональных навыков). <code>keywordList</code> — группировка нескольких <code>keyword</code>.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>icon</code></td>
<td>Опциональная иконка для keyword</td>
</tr>
</tbody>
</table>
<p>Внутри — Markdown.</p>
<p><strong>Пример 1:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; keyword &gt;}} <span class="ge">*Супер*</span> навык {{&lt; /keyword &gt;}}</span></span></code></pre></div></div>
<div class="flex mt-2">
<span
class="rounded-full bg-primary-500 dark:bg-primary-400 text-neutral-50 dark:text-neutral-800 px-1.5 py-[1px] text-xs font-normal">
<span class="flex flex-row items-center"><span><em>Super</em> skill</span>
</span>
</span>
</div>
<p><strong>Пример 2:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; keywordList &gt;}}
</span></span><span class="line"><span class="cl">{{&lt; keyword icon=&#34;github&#34; &gt;}} Lorem ipsum dolor. {{&lt; /keyword &gt;}}
</span></span><span class="line"><span class="cl">{{&lt; keyword icon=&#34;code&#34; &gt;}} <span class="gs">**Важный**</span> навык {{&lt; /keyword &gt;}}
</span></span><span class="line"><span class="cl">{{&lt; /keywordList &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{&lt; keyword &gt;}} <span class="ge">*Отдельный*</span> навык {{&lt; /keyword &gt;}}</span></span></code></pre></div></div>
<p><div class="flex flex-row flex-wrap items-center space-x-2">
<div class="flex mt-2">
<span
class="rounded-full bg-primary-500 dark:bg-primary-400 text-neutral-50 dark:text-neutral-800 px-1.5 py-[1px] text-xs font-normal">
<span class="flex flex-row items-center"><span class="mr-1"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</span></span><span>Lorem ipsum dolor</span>
</span>
</span>
</div>
<div class="flex mt-2">
<span
class="rounded-full bg-primary-500 dark:bg-primary-400 text-neutral-50 dark:text-neutral-800 px-1.5 py-[1px] text-xs font-normal">
<span class="flex flex-row items-center"><span class="mr-1"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg></span></span><span><strong>Important</strong> skill</span>
</span>
</span>
</div>
</div>
<div class="flex mt-2">
<span
class="rounded-full bg-primary-500 dark:bg-primary-400 text-neutral-50 dark:text-neutral-800 px-1.5 py-[1px] text-xs font-normal">
<span class="flex flex-row items-center"><span><em>Standalone</em> skill</span>
</span>
</span>
</div></p>
<p><br/><br/><br/></p>
<h2 class="relative group">Lead
<div id="lead" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#lead" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>lead</code> — акцент на начало статьи. Введение или важная информация. Оберни любой Markdown-контент.</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; lead &gt;}}
</span></span><span class="line"><span class="cl">Когда жизнь даёт тебе лимоны — делай лимонад.
</span></span><span class="line"><span class="cl">{{&lt; /lead &gt;}}</span></span></code></pre></div></div>
<div class="lead text-neutral-500 dark:text-neutral-400 !mb-9 text-xl">
When life gives you lemons, make lemonade.
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">List
<div id="list" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#list" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>list</code> — список последних статей. Обязательный параметр <code>limit</code> ограничивает количество. <code>where</code> и <code>value</code> фильтруют статьи по параметрам. Shortcode не отображает родительскую страницу, но учитывает её в limit.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>limit</code></td>
<td><strong>Обязательно.</strong> Количество статей.</td>
</tr>
<tr>
<td><code>title</code></td>
<td>Заголовок списка, по умолчанию <code>Recent</code></td>
</tr>
<tr>
<td><code>cardView</code></td>
<td>Карточный вид, по умолчанию <code>false</code></td>
</tr>
<tr>
<td><code>where</code></td>
<td>Переменная для фильтрации, например <code>Type</code></td>
</tr>
<tr>
<td><code>value</code></td>
<td>Значение для <code>where</code>, например для <code>Type</code><code>sample</code></td>
</tr>
</tbody>
</table>
<div
class="flex px-4 py-3 rounded-md shadow bg-primary-100 dark:bg-primary-900"
>
<span
class="text-primary-400 pe-3 flex items-center"
>
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>
</span>
</span>
<span
class="dark:text-neutral-300"
>Значения <code>where</code> и <code>value</code> используются в запросе <code>where .Site.RegularPages $where $value</code>. Доступные параметры — в <a href="https://gohugo.io/methods/page/" target="_blank" rel="noreferrer">документации Hugo</a>.</span>
</div>
<p><strong>Пример 1:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; list limit=2 &gt;}}</span></span></code></pre></div></div>
<h2 class="mt-20 text-2xl font-extrabold mb-10">Недавние</h2>
<section class="space-y-10 w-full mt-10 mb-10">
<article class="article-link--simple flex flex-col md:flex-row relative">
<div class="flex-none relative overflow-hidden thumbnail-shadow md:mr-7 thumbnail">
<img
src="/cheatsheets/git-workflow/featured_hu_99aef40e5d8ecaaf.png"
role="presentation"
loading="lazy"
decoding="async"
class="not-prose absolute inset-0 w-full h-full object-cover">
</div>
<div class=" mt-3 md:mt-0">
<header class="items-center text-start text-xl font-semibold">
<a
href="/cheatsheets/git-workflow/"
class="not-prose before:absolute before:inset-0 decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
<h2>
Git Workflow для Hugo блога
</h2>
</a>
</header>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2026-02-23T00:00:00&#43;00:00">23 февраля 2026</time><span class="px-2 text-primary-500">&middot;</span><span title="Время чтения">5 минут</span><span class="px-2 text-primary-500">&middot;</span><span>
<span
id="views_cheatsheets/git-workflow/index.md"
class="animate-pulse inline-block text-transparent max-h-3 rounded-full -mt-[2px] align-middle bg-neutral-300 dark:bg-neutral-400"
title="views"
>loading</span
>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg></span></span>
</span>
<span class="px-2 text-primary-500">&middot;</span><span>
<span
id="likes_cheatsheets/git-workflow/index.md"
class="animate-pulse inline-block text-transparent max-h-3 rounded-full -mt-[2px] align-middle bg-neutral-300 dark:bg-neutral-400"
title="likes"
>loading</span
>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span></span>
</span>
</div>
<div class="flex flex-row flex-wrap items-center">
<a class="relative mt-[0.5rem] me-2" href="/categories/%D1%88%D0%BF%D0%B0%D1%80%D0%B3%D0%B0%D0%BB%D0%BA%D0%B8/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Шпаргалки
</span>
</span>
</a>
<a class="relative mt-[0.5rem] me-2" href="/tags/git/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Git
</span>
</span>
</a>
<a class="relative mt-[0.5rem] me-2" href="/tags/workflow/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Workflow
</span>
</span>
</a>
<a class="relative mt-[0.5rem] me-2" href="/tags/hugo/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Hugo
</span>
</span>
</a>
<a class="relative mt-[0.5rem] me-2" href="/tags/cheatsheet/">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
Cheatsheet
</span>
</span>
</a>
</div>
</div>
</div>
<div class="px-6 pt-4 pb-2"></div>
</article>
</section>
<p><strong>Пример 2:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; list title=&#34;Samples&#34; cardView=true limit=6 where=&#34;Type&#34; value=&#34;sample&#34; &gt;}}</span></span></code></pre></div></div>
<h2 class="mt-20 text-2xl font-extrabold mb-10">Samples</h2>
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
</section>
<p><br/><br/><br/></p>
<h2 class="relative group">LTR/RTL
<div id="ltrrtl" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#ltrrtl" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>ltr</code> и <code>rtl</code> — смешивание направлений текста. Пользователи RTL-языков могут вставлять LTR-фрагменты. С <code>%</code> как внешним разделителем — Markdown внутри рендерится нормально (см. <a href="https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown" target="_blank" rel="noreferrer">Hugo shortcodes</a>).</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">-</span> Это markdown-список.
</span></span><span class="line"><span class="cl"><span class="k">-</span> Направление по умолчанию — LTR
</span></span><span class="line"><span class="cl">{{% rtl %}}
</span></span><span class="line"><span class="cl"><span class="k">-</span> هذه القائمة باللغة العربية
</span></span><span class="line"><span class="cl"><span class="k">-</span> من اليمين الى اليسار
</span></span><span class="line"><span class="cl">{{% /rtl %}}</span></span></code></pre></div></div>
<ul>
<li>This is an markdown list.</li>
<li>Its per default a LTR direction</li>
</ul>
<div dir="rtl" class="text-right">
<ul>
<li>هذه القائمة باللغة العربية</li>
<li>من اليمين الى اليسار</li>
</ul>
</div>
<p><br/><br/><br/></p>
<h2 class="relative group">Markdown Importer
<div id="markdown-importer" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#markdown-importer" aria-label="Якорь">#</a>
</span>
</h2>
<p>Импорт markdown-файлов из внешних источников без копипасты.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>url</code></td>
<td><strong>Обязательно.</strong> URL внешнего markdown-файла.</td>
</tr>
</tbody>
</table>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; mdimporter url=&#34;https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md&#34; &gt;}}</span></span></code></pre></div></div>
<h3 class="relative group">Hi there 👋
<div id="hi-there-" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#hi-there-" aria-label="Якорь">#</a>
</span>
</h3>
<p>🧠 Principal PM @ Docker (AI, agents, infra) · Creator of Blowfish · Ex-founder · Mentor &amp; advisor</p>
<p><a href="https://github.com/nunocoracao" target="_blank" rel="noreferrer"><figure><img
class="my-0 rounded-md"
loading="lazy"
decoding="async"
fetchpriority="low"
alt=""
src="https://img.shields.io/github/stars/nunocoracao"
></figure>
</a>
<a href="https://github.com/nunocoracao" target="_blank" rel="noreferrer"><figure><img
class="my-0 rounded-md"
loading="lazy"
decoding="async"
fetchpriority="low"
alt=""
src="https://img.shields.io/github/followers/nunocoracao"
></figure>
</a></p>
<p><a href="https://twitter.com/nunocoracao" target="_blank" rel="noreferrer"><figure><img
class="my-0 rounded-md"
loading="lazy"
decoding="async"
fetchpriority="low"
alt="Twitter badge"
src="https://img.shields.io/twitter/follow/nunocoracao?style=social"
></figure>
</a>
<figure><img
class="my-0 rounded-md"
loading="lazy"
decoding="async"
fetchpriority="low"
alt="LinkedIn"
src="https://img.shields.io/badge/linkedin-%230077B5.svg?style=plastic&amp;logo=linkedin&amp;logoColor=white"
></figure>
</p>
<ul>
<li>
<p>🚀 Personal blog - <a href="https://n9o.xyz" target="_blank" rel="noreferrer">n9o.xyz</a></p>
</li>
<li>
<p>🐡 Creator and maintainer of Blowfish @ <a href="https://blowfish.page" target="_blank" rel="noreferrer">Blowfish page</a></p>
</li>
<li>
<p>🐳 Principal Product Manager @ <a href="https://github.com/docker" target="_blank" rel="noreferrer">Docker</a> - working on <a href="https://github.com/docker/cagent" target="_blank" rel="noreferrer">cagent</a></p>
</li>
<li>
<p>📚 mentoring @ <a href="https://mentorcruise.com/mentor/nunocorao/" target="_blank" rel="noreferrer">mentorcruise</a></p>
</li>
</ul>
<figure><img
class="my-0 rounded-md"
loading="lazy"
decoding="async"
fetchpriority="low"
alt="Nuno&rsquo;s GitHub stats"
src="https://github-readme-stats.vercel.app/api?username=nunocoracao&amp;show_icons=true&amp;count_private=true&amp;theme=cobalt&amp;&amp;show=prs_merged_percentage"
></figure>
<!--
**nunocoracao/nunocoracao** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.
Here are some ideas to get you started:
- 🔭 Im currently working on ...
- 🌱 Im currently learning ...
- 👯 Im looking to collaborate on ...
- 🤔 Im looking for help with ...
- 💬 Ask me about ...
- 📫 How to reach me: ...
- 😄 Pronouns: ...
- ⚡ Fun fact: ...
-->
<p><a rel="me" href="https://masto.ai/@nunocoracao"></a></p>
<p><br/><br/></p>
<h2 class="relative group">Mermaid
<div id="mermaid" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#mermaid" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>mermaid</code> — диаграммы и визуализации через текст. Под капотом Mermaid — широкий набор диаграмм, графиков и форматов.</p>
<p>Пиши синтаксис Mermaid внутри shortcode — плагин сделает остальное.</p>
<p>Синтаксис и типы диаграмм — в <a href="https://mermaid-js.github.io/" target="_blank" rel="noreferrer">официальной документации Mermaid</a>.</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; mermaid &gt;}}
</span></span><span class="line"><span class="cl">graph LR;
</span></span><span class="line"><span class="cl">A[Lemons]--&gt;B[Lemonade];
</span></span><span class="line"><span class="cl">B--&gt;C[Profit]
</span></span><span class="line"><span class="cl">{{&lt; /mermaid &gt;}}</span></span></code></pre></div></div>
<pre class="not-prose mermaid">
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
</pre>
<p><br/><br/><br/></p>
<h2 class="relative group">Swatches
<div id="swatches" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#swatches" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>swatches</code> — набор до трёх цветов для демонстрации палитры. Параметры — HEX-коды.</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; swatches &#34;<span class="ni">#64748b</span>&#34; &#34;<span class="ni">#3b82f6</span>&#34; &#34;<span class="ni">#06b6d4</span>&#34; &gt;}}</span></span></code></pre></div></div>
<p><strong>Результат:</strong>
<div class="flex justify-between">
<span
class="w-full py-6 mr-3 rounded-md"
style="background-color: #64748b"></span>
<span
class="w-full py-6 mr-3 rounded-md"
style="background-color: #3b82f6"></span>
<span
class="w-full py-6 mr-3 rounded-md"
style="background-color: #06b6d4"></span>
</div>
</p>
<p><br/><br/><br/></p>
<h2 class="relative group">Tabs
<div id="tabs" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#tabs" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>tabs</code> — вкладки для вариантов одного шага. Пример: инструкции по установке VS Code на разных платформах.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>group</code></td>
<td><strong>Опционально.</strong> Имя группы для синхронизации. Вкладки с одинаковым <code>group</code> переключаются вместе.</td>
</tr>
<tr>
<td><code>default</code></td>
<td><strong>Опционально.</strong> Метка активной вкладки по умолчанию. Если не задано — первая вкладка.</td>
</tr>
<tr>
<td><code>label</code></td>
<td><strong>Обязательно.</strong> Текст на кнопке вкладки.</td>
</tr>
<tr>
<td><code>icon</code></td>
<td><strong>Опционально.</strong> Иконка перед текстом.</td>
</tr>
</tbody>
</table>
<p><strong>Пример 1: Базовое использование</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; tabs &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> {{&lt; tab label=&#34;Windows&#34; &gt;}}
</span></span><span class="line"><span class="cl"> Установка через Chocolatey:
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> ``<span class="sb">`pwsh
</span></span></span><span class="line"><span class="cl"><span class="sb"> choco install vscode.install
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb"> или через WinGet
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`pwsh
</span></span></span><span class="line"><span class="cl"><span class="sb"> winget install -e --id Microsoft.VisualStudioCode
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; /tab &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; tab label=&#34;macOS&#34; &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`bash
</span></span></span><span class="line"><span class="cl"><span class="sb"> brew install --cask visual-studio-code
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>``
</span></span><span class="line"><span class="cl"> {{&lt; /tab &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> {{&lt; tab label=&#34;Linux&#34; &gt;}}
</span></span><span class="line"><span class="cl"> См. [<span class="nt">документацию</span>](<span class="na">https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux</span>).
</span></span><span class="line"><span class="cl"> {{&lt; /tab &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{&lt; /tabs &gt;}}</span></span></code></pre></div></div>
<p><strong>Результат:</strong></p>
<div
class="tab__container w-full"
>
<div class="tab__nav" role="tablist">
<div class="flex flex-wrap gap-1"><button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 tab--active"
role="tab"
aria-selected="true"
data-tab-index="0"
data-tab-label="Windows">
<span class="flex items-center gap-1">
Windows
</span>
</button><button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 "
role="tab"
aria-selected="false"
data-tab-index="1"
data-tab-label="macOS">
<span class="flex items-center gap-1">
macOS
</span>
</button><button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 "
role="tab"
aria-selected="false"
data-tab-index="2"
data-tab-label="Linux">
<span class="flex items-center gap-1">
Linux
</span>
</button></div>
</div>
<div class="tab__content mt-4"><div class="tab__panel tab--active" data-tab-index="0">
<p>Install using Chocolatey:</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-pwsh" data-lang="pwsh"><span class="line"><span class="cl"><span class="n">choco</span> <span class="n">install</span> <span class="n">vscode</span><span class="p">.</span><span class="n">install</span></span></span></code></pre></div></div>
<p>or install using WinGet</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-pwsh" data-lang="pwsh"><span class="line"><span class="cl"><span class="n">winget</span> <span class="n">install</span> <span class="n">-e</span> <span class="p">-</span><span class="n">-id</span> <span class="n">Microsoft</span><span class="p">.</span><span class="n">VisualStudioCode</span></span></span></code></pre></div></div>
</div><div class="tab__panel " data-tab-index="1">
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">brew install --cask visual-studio-code</span></span></code></pre></div></div>
</div><div class="tab__panel " data-tab-index="2">
See <a href="https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux" target="_blank" rel="noreferrer">documentation</a>.
</div></div>
</div>
<p><strong>Пример 2: С Group, Default и Icon</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; tabs group=&#34;lang&#34; default=&#34;Python&#34; &gt;}}
</span></span><span class="line"><span class="cl"> {{&lt; tab label=&#34;JavaScript&#34; icon=&#34;code&#34; &gt;}}
</span></span><span class="line"><span class="cl"> ``<span class="sb">`javascript
</span></span></span><span class="line"><span class="cl"><span class="sb"> console.log(&#34;Hello&#34;);
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; /tab &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; tab label=&#34;Python&#34; icon=&#34;sun&#34; &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`python
</span></span></span><span class="line"><span class="cl"><span class="sb"> print(&#34;Hello&#34;)
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; /tab &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; tab label=&#34;Go&#34; icon=&#34;moon&#34; &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`go
</span></span></span><span class="line"><span class="cl"><span class="sb"> fmt.Println(&#34;Hello&#34;)
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; /tab &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb">{{&lt; /tabs &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">{{&lt; tabs group=&#34;lang&#34; default=&#34;Python&#34; &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; tab label=&#34;JavaScript&#34; icon=&#34;code&#34; &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`javascript
</span></span></span><span class="line"><span class="cl"><span class="sb"> const add = (a, b) =&gt; a + b;
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; /tab &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; tab label=&#34;Python&#34; icon=&#34;sun&#34; &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`python
</span></span></span><span class="line"><span class="cl"><span class="sb"> def add(a, b): return a + b
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; /tab &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb"> {{&lt; tab label=&#34;Go&#34; icon=&#34;moon&#34; &gt;}}
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>`<span class="sb">`go
</span></span></span><span class="line"><span class="cl"><span class="sb"> func add(a, b int) int { return a + b }
</span></span></span><span class="line"><span class="cl"><span class="sb"> `</span>``
</span></span><span class="line"><span class="cl"> {{&lt; /tab &gt;}}
</span></span><span class="line"><span class="cl">{{&lt; /tabs &gt;}}</span></span></code></pre></div></div>
<p><strong>Результат:</strong></p>
<div
class="tab__container w-full"
data-tab-group="lang"
data-default-tab="Python">
<div class="tab__nav" role="tablist">
<div class="flex flex-wrap gap-1"><button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 "
role="tab"
aria-selected="false"
data-tab-index="0"
data-tab-label="JavaScript">
<span class="flex items-center gap-1">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg></span>
JavaScript
</span>
</button><button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 tab--active"
role="tab"
aria-selected="true"
data-tab-index="1"
data-tab-label="Python">
<span class="flex items-center gap-1">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"/></svg>
</span>
Python
</span>
</button><button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 "
role="tab"
aria-selected="false"
data-tab-index="2"
data-tab-label="Go">
<span class="flex items-center gap-1">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"/></svg>
</span>
Go
</span>
</button></div>
</div>
<div class="tab__content mt-4"><div class="tab__panel " data-tab-index="0">
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Hello&#34;</span><span class="p">);</span></span></span></code></pre></div></div>
</div><div class="tab__panel tab--active" data-tab-index="1">
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">&#34;Hello&#34;</span><span class="p">)</span></span></span></code></pre></div></div>
</div><div class="tab__panel " data-tab-index="2">
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">&#34;Hello&#34;</span><span class="p">)</span></span></span></code></pre></div></div>
</div></div>
</div>
<div
class="tab__container w-full"
data-tab-group="lang"
data-default-tab="Python">
<div class="tab__nav" role="tablist">
<div class="flex flex-wrap gap-1"><button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 "
role="tab"
aria-selected="false"
data-tab-index="0"
data-tab-label="JavaScript">
<span class="flex items-center gap-1">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg></span>
JavaScript
</span>
</button><button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 tab--active"
role="tab"
aria-selected="true"
data-tab-index="1"
data-tab-label="Python">
<span class="flex items-center gap-1">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"/></svg>
</span>
Python
</span>
</button><button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 "
role="tab"
aria-selected="false"
data-tab-index="2"
data-tab-label="Go">
<span class="flex items-center gap-1">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"/></svg>
</span>
Go
</span>
</button></div>
</div>
<div class="tab__content mt-4"><div class="tab__panel " data-tab-index="0">
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span></span></span></code></pre></div></div>
</div><div class="tab__panel tab--active" data-tab-index="1">
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">add</span><span class="p">(</span><span class="n">a</span><span class="p">,</span> <span class="n">b</span><span class="p">):</span> <span class="k">return</span> <span class="n">a</span> <span class="o">+</span> <span class="n">b</span></span></span></code></pre></div></div>
</div><div class="tab__panel " data-tab-index="2">
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kd">func</span><span class="w"> </span><span class="nf">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="w"> </span><span class="kt">int</span><span class="p">)</span><span class="w"> </span><span class="kt">int</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">a</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">b</span><span class="w"> </span><span class="p">}</span></span></span></code></pre></div></div>
</div></div>
</div>
<p>Обе группы вкладок имеют одинаковый <code>group=&quot;lang&quot;</code> — клик по любой вкладке синхронизирует обе группы. <code>default=&quot;Python&quot;</code> делает Python активной вкладкой по умолчанию, <code>icon=&quot;code&quot;</code> добавляет иконку перед текстом.</p>
<p><br/><br/><br/></p>
<h2 class="relative group">Timeline
<div id="timeline" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#timeline" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>timeline</code> — визуальная хронология: профессиональный опыт, достижения проекта и т.д. Элементы — через <code>timelineItem</code>.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>md</code></td>
<td>Рендерить контент как Markdown (true/false)</td>
</tr>
<tr>
<td><code>icon</code></td>
<td>Иконка в визуальных элементах таймлайна</td>
</tr>
<tr>
<td><code>header</code></td>
<td>Заголовок записи</td>
</tr>
<tr>
<td><code>badge</code></td>
<td>Текст в бейдже справа сверху</td>
</tr>
<tr>
<td><code>subheader</code></td>
<td>Подзаголовок записи</td>
</tr>
</tbody>
</table>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; timeline &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{&lt; timelineItem icon=&#34;github&#34; header=&#34;header&#34; badge=&#34;badge test&#34; subheader=&#34;subheader&#34; &gt;}}
</span></span><span class="line"><span class="cl">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.
</span></span><span class="line"><span class="cl">{{&lt; /timelineItem &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{&lt; timelineItem icon=&#34;code&#34; header=&#34;Another Awesome Header&#34; badge=&#34;date - present&#34; subheader=&#34;Awesome Subheader&#34; &gt;}}
</span></span><span class="line"><span class="cl">With html code
</span></span><span class="line"><span class="cl">&lt;ul&gt;
</span></span><span class="line"><span class="cl"> &lt;li&gt;Coffee&lt;/li&gt;
</span></span><span class="line"><span class="cl"> &lt;li&gt;Tea&lt;/li&gt;
</span></span><span class="line"><span class="cl"> &lt;li&gt;Milk&lt;/li&gt;
</span></span><span class="line"><span class="cl">&lt;/ul&gt;
</span></span><span class="line"><span class="cl">{{&lt; /timelineItem &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{&lt; timelineItem icon=&#34;star&#34; header=&#34;Shortcodes&#34; badge=&#34;AWESOME&#34; &gt;}}
</span></span><span class="line"><span class="cl">With other shortcodes
</span></span><span class="line"><span class="cl">{{&lt; gallery &gt;}}
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/01.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/02.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/03.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/04.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/05.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/06.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl"> &lt;img src=&#34;gallery/07.jpg&#34; class=&#34;grid-w33&#34; /&gt;
</span></span><span class="line"><span class="cl">{{&lt; /gallery &gt;}}
</span></span><span class="line"><span class="cl">{{&lt; /timelineItem &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{&lt; timelineItem icon=&#34;code&#34; header=&#34;Another Awesome Header&#34;&gt;}}
</span></span><span class="line"><span class="cl">{{&lt; github repo=&#34;nunocoracao/blowfish&#34; &gt;}}
</span></span><span class="line"><span class="cl">{{&lt; /timelineItem &gt;}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{&lt; /timeline &gt;}}</span></span></code></pre></div></div>
<ol class="border-s-2 border-primary-500 dark:border-primary-300 list-none">
<li>
<div class="flex">
<div
class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full ltr:-ml-12 rtl:-mr-[79px] mt-5">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</span>
</div>
<div class="block p-6 rounded-lg shadow-2xl flex-1 ms-6 mb-10 break-words">
<div class="flex justify-between">
<h2 class="mt-0">header</h2>
<h3 class="">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
badge test
</span>
</span>
</h3>
</div>
<h4 class="mt-0">
subheader
</h4>
<div class="mb-6">
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.
</div>
</div>
</div>
</li>
<li>
<div class="flex">
<div
class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full ltr:-ml-12 rtl:-mr-[79px] mt-5">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg></span>
</div>
<div class="block p-6 rounded-lg shadow-2xl flex-1 ms-6 mb-10 break-words">
<div class="flex justify-between">
<h2 class="mt-0">Another Awesome Header</h2>
<h3 class="">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
date - present
</span>
</span>
</h3>
</div>
<h4 class="mt-0">
Awesome Subheader
</h4>
<div class="mb-6">
With html code
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="flex">
<div
class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full ltr:-ml-12 rtl:-mr-[79px] mt-5">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z"/></svg></span>
</div>
<div class="block p-6 rounded-lg shadow-2xl flex-1 ms-6 mb-10 break-words">
<div class="flex justify-between">
<h2 class="mt-0">Shortcodes</h2>
<h3 class="">
<span class="flex cursor-pointer">
<span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
AWESOME
</span>
</span>
</h3>
</div>
<div class="mb-6">
With other shortcodes
<div id="gallery-a450a0cce588b40663854dc6dbab4592" class="gallery">
<img src="/cheatsheets/shortcodes/gallery/01.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/02.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/03.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/04.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/05.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/06.jpg" class="grid-w33" />
<img src="/cheatsheets/shortcodes/gallery/07.jpg" class="grid-w33" />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="flex">
<div
class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full ltr:-ml-12 rtl:-mr-[79px] mt-5">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg></span>
</div>
<div class="block p-6 rounded-lg shadow-2xl flex-1 ms-6 mb-10 break-words">
<div class="flex justify-between">
<h2 class="mt-0">Another Awesome Header</h2>
</div>
<div class="mb-6">
<div class="github-card-wrapper">
<a id="github-18d7c30f49ef6c469c0b53c3830f3ebc" target="_blank" href="https://github.com/nunocoracao/blowfish" class="cursor-pointer">
<div
class="w-full md:w-auto p-0 m-0 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl"><div class="w-full nozoom">
<img
src="https://opengraph.githubassets.com/0/nunocoracao/blowfish"
alt="GitHub Repository Thumbnail"
class="nozoom mt-0 mb-0 w-full h-full object-cover">
</div><div class="w-full md:w-auto pt-3 p-5">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral me-2">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</span>
</span>
<div
id="github-18d7c30f49ef6c469c0b53c3830f3ebc-full_name"
class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
nunocoracao/blowfish
</div>
</div>
<p id="github-18d7c30f49ef6c469c0b53c3830f3ebc-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
Personal Website &amp; Blog Theme for Hugo
</p>
<div class="m-0 mt-2 flex items-center">
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="HTML"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
HTML
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z"/></svg></span>
</span>
<div id="github-18d7c30f49ef6c469c0b53c3830f3ebc-stargazers" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
2627
</div>
<span class="text-md mr-1 text-neutral-800 dark:text-neutral">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M80 104c13.3 0 24-10.7 24-24s-10.7-24-24-24S56 66.7 56 80s10.7 24 24 24zm80-24c0 32.8-19.7 61-48 73.3V192c0 17.7 14.3 32 32 32H304c17.7 0 32-14.3 32-32V153.3C307.7 141 288 112.8 288 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V192c0 53-43 96-96 96H256v70.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3V288H144c-53 0-96-43-96-96V153.3C19.7 141 0 112.8 0 80C0 35.8 35.8 0 80 0s80 35.8 80 80zm208 24c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24zM248 432c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24z"/></svg></span>
</span>
<div id="github-18d7c30f49ef6c469c0b53c3830f3ebc-forks" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
684
</div>
</div>
</div>
</div>
<script
async
type="text/javascript"
src="/js/fetch-repo.min.dc5533c50cefd50405344b235937142271f26229fe39cbee27fd4960e8bb897a0beebfad77a1091ca91cd0d1fb14e70fc37cc114dd9674fb2c32e0ab512ec8a4.js"
integrity="sha512-3FUzxQzv1QQFNEsjWTcUInHyYin&#43;OcvuJ/1JYOi7iXoL7r&#43;td6EJHKkc0NH7FOcPw3zBFN2WdPssMuCrUS7IpA=="
data-repo-url="https://api.github.com/repos/nunocoracao/blowfish"
data-repo-id="github-18d7c30f49ef6c469c0b53c3830f3ebc"></script>
</a>
</div>
</div>
</div>
</div>
</li>
</ol>
<p><br/><br/><br/></p>
<h2 class="relative group">TypeIt
<div id="typeit" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#typeit" aria-label="Якорь">#</a>
</span>
</h2>
<p><a href="https://www.typeitjs.com" target="_blank" rel="noreferrer">TypeIt</a> — самый универсальный JS-инструмент для эффекта печатной машинки. Простая конфигурация: одна или несколько строк, переносы, удаление и замена, сложный HTML.</p>
<p>Blowfish реализует подмножество функций TypeIt через shortcode. Текст — внутри <code>typeit</code>, поведение — через параметры.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>tag</code></td>
<td>[String] HTML-тег для рендеринга строк.</td>
</tr>
<tr>
<td><code>classList</code></td>
<td>[String] CSS-классы для HTML-элемента.</td>
</tr>
<tr>
<td><code>initialString</code></td>
<td>[String] Начальная строка, которая будет заменена.</td>
</tr>
<tr>
<td><code>speed</code></td>
<td>[number] Скорость печати в миллисекундах между шагами.</td>
</tr>
<tr>
<td><code>lifeLike</code></td>
<td>[boolean] Неравномерный темп печати, как у человека.</td>
</tr>
<tr>
<td><code>startDelay</code></td>
<td>[number] Задержка перед началом печати после инициализации.</td>
</tr>
<tr>
<td><code>breakLines</code></td>
<td>[boolean] Печатать строки друг под другом (true) или удалять и заменять (false).</td>
</tr>
<tr>
<td><code>waitUntilVisible</code></td>
<td>[boolean] Начинать при загрузке или когда элемент станет видимым. По умолчанию <code>true</code>.</td>
</tr>
<tr>
<td><code>loop</code></td>
<td>[boolean] Зацикливать строки после завершения.</td>
</tr>
</tbody>
</table>
<p><strong>Пример 1:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; typeit &gt;}}
</span></span><span class="line"><span class="cl">Lorem ipsum dolor sit amet
</span></span><span class="line"><span class="cl">{{&lt; /typeit &gt;}}</span></span></code></pre></div></div>
<div id="typeit-fff32410ffda3f88078adeeacdd9130f"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var strings = ["","Lorem ipsum dolor sit amet",""];
new TypeIt("#typeit-fff32410ffda3f88078adeeacdd9130f", {
strings: strings,
speed: 100 ,
lifeLike: false ,
startDelay: 0 ,
breakLines: true ,
waitUntilVisible: true ,
loop: false
}).go();
});
</script>
<p><strong>Пример 2:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; typeit
</span></span><span class="line"><span class="cl"> tag=h1
</span></span><span class="line"><span class="cl"> lifeLike=true
</span></span><span class="line"><span class="cl">&gt;}}
</span></span><span class="line"><span class="cl">Lorem ipsum dolor sit amet,
</span></span><span class="line"><span class="cl">consectetur adipiscing elit.
</span></span><span class="line"><span class="cl">{{&lt; /typeit &gt;}}</span></span></code></pre></div></div>
<h1 id="typeit-baceb2ade7a9c8ed6bd280bc69caf732"></h1>
<script>
document.addEventListener("DOMContentLoaded", function () {
var strings = ["","Lorem ipsum dolor sit amet,","consectetur adipiscing elit.",""];
new TypeIt("#typeit-baceb2ade7a9c8ed6bd280bc69caf732", {
strings: strings,
speed: 100 ,
lifeLike: true ,
startDelay: 0 ,
breakLines: true ,
waitUntilVisible: true ,
loop: false
}).go();
});
</script>
<p><strong>Пример 3:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; typeit
</span></span><span class="line"><span class="cl"> tag=h3
</span></span><span class="line"><span class="cl"> speed=50
</span></span><span class="line"><span class="cl"> breakLines=false
</span></span><span class="line"><span class="cl"> loop=true
</span></span><span class="line"><span class="cl">&gt;}}
</span></span><span class="line"><span class="cl">&#34;Frankly, my dear, I don&#39;t give a damn.&#34; Gone with the Wind (1939)
</span></span><span class="line"><span class="cl">&#34;I&#39;m gonna make him an offer he can&#39;t refuse.&#34; The Godfather (1972)
</span></span><span class="line"><span class="cl">&#34;Toto, I&#39;ve a feeling we&#39;re not in Kansas anymore.&#34; The Wizard of Oz (1939)
</span></span><span class="line"><span class="cl">{{&lt; /typeit &gt;}}</span></span></code></pre></div></div>
<h3 id="typeit-d46519c0cfd4af9cb6b3d18002306a49"></h3>
<script>
document.addEventListener("DOMContentLoaded", function () {
var strings = ["","\"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)",""];
new TypeIt("#typeit-d46519c0cfd4af9cb6b3d18002306a49", {
strings: strings,
speed: 50 ,
lifeLike: false ,
startDelay: 0 ,
breakLines: false ,
waitUntilVisible: true ,
loop: true
}).go();
});
</script>
<p><br/><br/><br/></p>
<h2 class="relative group">Video
<div id="video" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#video" aria-label="Якорь">#</a>
</span>
</h2>
<p><code>video</code> — встраивание локальных и внешних видео. Shortcode рендерит <code>&lt;figure&gt;</code> с адаптивным плеером и опциональной подписью.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>src</code></td>
<td><strong>Обязательно.</strong> URL видео или локальный путь. Порядок поиска: page resource → <code>assets/</code><code>static/</code>.</td>
</tr>
<tr>
<td><code>poster</code></td>
<td>Опциональный URL или путь к постеру. Если не задан — ищет изображение с тем же именем в page bundle.</td>
</tr>
<tr>
<td><code>caption</code></td>
<td>Опциональная Markdown-подпись под видео.</td>
</tr>
<tr>
<td><code>autoplay</code></td>
<td><code>true</code>/<code>false</code>. Автовоспроизведение. По умолчанию <code>false</code>.</td>
</tr>
<tr>
<td><code>loop</code></td>
<td><code>true</code>/<code>false</code>. Зацикливание. По умолчанию <code>false</code>.</td>
</tr>
<tr>
<td><code>muted</code></td>
<td><code>true</code>/<code>false</code>. Без звука. По умолчанию <code>false</code>.</td>
</tr>
<tr>
<td><code>controls</code></td>
<td><code>true</code>/<code>false</code>. Стандартные элементы управления браузера. По умолчанию <code>true</code>.</td>
</tr>
<tr>
<td><code>playsinline</code></td>
<td><code>true</code>/<code>false</code>. Встроенное воспроизведение на мобильных. По умолчанию <code>true</code>.</td>
</tr>
<tr>
<td><code>preload</code></td>
<td><code>metadata</code> (загрузить инфо), <code>none</code> (экономить трафик), <code>auto</code> (предзагрузка). По умолчанию <code>metadata</code>.</td>
</tr>
<tr>
<td><code>start</code></td>
<td>Опциональное время начала в секундах.</td>
</tr>
<tr>
<td><code>end</code></td>
<td>Опциональное время окончания в секундах.</td>
</tr>
<tr>
<td><code>ratio</code></td>
<td>Зарезервированное соотношение сторон. <code>16/9</code>, <code>4/3</code>, <code>1/1</code> или кастомное <code>W/H</code>. По умолчанию <code>16/9</code>.</td>
</tr>
<tr>
<td><code>fit</code></td>
<td>Как видео вписывается в соотношение: <code>contain</code> (без обрезки), <code>cover</code> (обрезка до заполнения), <code>fill</code> (растянуть). По умолчанию <code>contain</code>.</td>
</tr>
</tbody>
</table>
<p>Если браузер не воспроизводит видео — плеер покажет fallback-сообщение со ссылкой на скачивание.</p>
<p><strong>Пример:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; video
</span></span><span class="line"><span class="cl"> src=&#34;https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm&#34;
</span></span><span class="line"><span class="cl"> poster=&#34;https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg&#34;
</span></span><span class="line"><span class="cl"> caption=&#34;**Public domain demo** — CC0 video and poster.&#34;
</span></span><span class="line"><span class="cl"> loop=true
</span></span><span class="line"><span class="cl"> muted=true
</span></span><span class="line"><span class="cl">&gt;}}</span></span></code></pre></div></div>
<figure>
<video
class="w-full rounded-md aspect-video object-contain"preload="metadata" poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg" loop muted controls playsinline>
<source src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm">
<p>Your browser cannot play this video. <a href="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm">Download video</a>.</p>
</video><figcaption><strong>Public domain demo</strong> — CC0 video and poster.</figcaption>
</figure>
<p><br/><br/><br/></p>
<h2 class="relative group">Youtube Lite
<div id="youtube-lite" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#youtube-lite" aria-label="Якорь">#</a>
</span>
</h2>
<p>Лёгкое встраивание YouTube через <a href="https://github.com/paulirish/lite-youtube-embed" target="_blank" rel="noreferrer">lite-youtube-embed</a>. Библиотека быстрее и эффективнее стандартных embed.</p>
<table>
<thead>
<tr>
<th>Параметр</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>id</code></td>
<td>[String] ID YouTube-видео</td>
</tr>
<tr>
<td><code>label</code></td>
<td>[String] Метка видео</td>
</tr>
<tr>
<td><code>params</code></td>
<td>[String] Дополнительные параметры воспроизведения</td>
</tr>
</tbody>
</table>
<p><strong>Пример 1:</strong></p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; youtubeLite id=&#34;SgXhGb-7QbU&#34; label=&#34;Blowfish-tools demo&#34; &gt;}}</span></span></code></pre></div></div>
<lite-youtube videoid="SgXhGb-7QbU" playlabel="SgXhGb-7QbU" params=""></lite-youtube>
<p><strong>Пример 2:</strong></p>
<p>Все <a href="https://developers.google.com/youtube/player_parameters#Parameters" target="_blank" rel="noreferrer">параметры плеера YouTube</a> для <code>params</code>:</p>
<blockquote><p>Это видео начнётся с 130 секунды (2м10с)</p>
</blockquote><div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; youtubeLite id=&#34;SgXhGb-7QbU&#34; label=&#34;Blowfish-tools demo&#34; params=&#34;start=130&#34; &gt;}}</span></span></code></pre></div></div>
<blockquote><p>Это видео без элементов управления, начнётся с 130 секунды и остановится через 10 секунд.</p>
</blockquote><p>Для объединения нескольких параметров — символ <code>&amp;</code> между ними:</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{&lt; youtubeLite id=&#34;SgXhGb-7QbU&#34; label=&#34;Blowfish-tools demo&#34; params=&#34;start=130&amp;end=10&amp;controls=0&#34; &gt;}}</span></span></code></pre></div></div>
<lite-youtube videoid="SgXhGb-7QbU" playlabel="SgXhGb-7QbU" params="start=130&amp;end=10&amp;controls=0"></lite-youtube>
<p>Подробнее — в <a href="https://github.com/paulirish/lite-youtube-embed/blob/master/readme.md#custom-player-parameters" target="_blank" rel="noreferrer">репозитории youtubeLite</a> и на странице <a href="https://developers.google.com/youtube/player_parameters#Parameters" target="_blank" rel="noreferrer">параметров плеера YouTube</a>.</p>
</div>
<details class="mt-2 mb-5 overflow-hidden rounded-lg ms-0 ps-5">
<summary
class="py-1 text-lg font-semibold cursor-pointer bg-primary-200 text-neutral-800 -ms-5 ps-5 dark:bg-primary-800 dark:text-neutral-100">
Документация -
Эта статья — часть серии.
</summary>
<div
class="py-1 border-dotted border-neutral-300 border-s-1 -ms-5 ps-5 dark:border-neutral-600">
Часть 8:
Ты уже здесь
</div>
</details>
</div>
</section>
<footer class="pt-8 max-w-prose print:hidden">
<div class="pt-8">
<hr class="border-dotted border-neutral-300 dark:border-neutral-600">
<div class="flex justify-between pt-3">
<span class="flex flex-col">
<a
class="flex text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
href="/cheatsheets/git-workflow/">
<span class="leading-6">
<span class="inline-block rtl:rotate-180">&larr;</span>&ensp;Git Workflow для Hugo блога
</span>
</a>
<span class="ms-6 mt-1 text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2026-02-23T00:00:00&#43;00:00">23 февраля 2026</time>
</span>
</span>
<span class="flex flex-col items-end">
</span>
</div>
</div>
</footer>
</article>
<div
id="scroll-to-top"
class="fixed bottom-6 end-6 z-50 transform translate-y-4 opacity-0 duration-200">
<a
href="#the-top"
class="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
aria-label="Пролистать наверх"
title="Пролистать наверх">
&uarr;
</a>
</div>
</main><footer id="site-footer" class="py-10 print:hidden">
<nav class="flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400 ">
<ul class="flex list-none flex-col sm:flex-row">
<li class=" flex mb-1 text-end sm:mb-0 sm:me-7 sm:last:me-0 ">
<a
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2 flex items-center"
href="/tags/"
title="Теги">
Теги
</a>
</li>
<li class=" flex mb-1 text-end sm:mb-0 sm:me-7 sm:last:me-0 ">
<a
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2 flex items-center"
href="/categories/"
title="Категории">
Категории
</a>
</li>
</ul>
</nav>
<div class="flex items-center justify-between">
<p class="text-sm text-neutral-500 dark:text-neutral-400">
&copy;
2026
Олег Казанин
</p>
<p class="text-xs text-neutral-500 dark:text-neutral-400">
Работает на <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a> &amp; <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
href="https://blowfish.page/" target="_blank" rel="noopener noreferrer">Blowfish</a>
</p>
</div>
<script>
mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
margin: 24,
background: "rgba(0,0,0,0.5)",
scrollOffset: 0,
});
</script>
</footer>
<div
id="search-wrapper"
class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh] z-500"
data-url="http://192.168.11.190:1313/">
<div
id="search-modal"
class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800">
<header class="relative z-10 flex items-center justify-between flex-none px-2">
<form class="flex items-center flex-auto min-w-0">
<div class="flex items-center justify-center w-8 h-8 text-neutral-400">
<span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
</span>
</div>
<input
type="search"
id="search-query"
class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent"
placeholder="Поиск"
tabindex="0">
</form>
<button
id="close-search-button"
class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
title="Закрыть (Esc)">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
</span>
</button>
</header>
<section class="flex-auto px-2 overflow-auto">
<ul id="search-results">
</ul>
</section>
</div>
</div>
</div>
</body>
</html>