>Zina: /* 2 вариант - с помощью brew */

2023-01-17T08:11:34Z

2 вариант - с помощью brew

Нова сторінка

Hugo — самый быстрый генератор статических сайтов.

{|cellpadding="10"
|- valign="top"
|
* [https://gohugo.io/ Официальный сайт]
* [https://gohugo.io/documentation/ Документация]
||
* [https://discourse.gohugo.io/ Форум]
* [https://www.google.com.ua/search?q=site%3Agohugo.io Google site:gohugo.io]
||
* [https://github.com/spf13/hugo/releases Последние релизы]
* [https://gohugo.io/maintenance/ Обновления официального сайта]
* [https://github.com/gohugoio/hugo/issues/8343 Статус задачи совместимости Hugo с Tailwind 3 JIT]
|}

{|cellpadding="10"
|- valign="top"
|
* [[:Категория:Hugo]]
* [[Hugo + Bootstrap]]
* [[Hugo и Tailwind]]
* [[Hugo Pipes]]
* [[Hugo Minimal Bootstrap Theme]]
* [[Hugo Zina]]
||
* [[Файлы шаблонов Hugo]]
* [[Минимальный комплект шаблонов Hugo]]
* [[Параметры страниц в шаблонах Hugo]]
* [[Списки страниц Hugo]]
* [[Списки таксономии Hugo]]
* [[Hugo ShortCodes]]
* [[Hugo SEO]]
||
* [[Комплект шаблонов со стандартными переменными Hugo]]
* [[Подсветка синтаксиса в Hugo]]
* [[Hugo-on-Steroids]] ([https://github.com/zinadesign/hugo github])
* [[Hugo + Gulp]]
* [[Hugo Modules]]
* [[Hugo Tips & Tricks]]
* [https://it-gro.github.io/HugoTemplateCodePlyGnd/ Hugo Template Coding Playground]
* [https://gist.github.com/sjml/e0d99474b9869490cd5ccf464cd656c5 Compare hugo output across versions]
|}

== Преимущества Hugo ==

* Очень быстрый ([https://www.youtube.com/watch?v=CdiDYZ51a2o видео] генерации 5000 страниц за 6 секунд).
* Содержимое сайта хранится в виде простых текстовых файлов с расширением <code>.md</code> и редактируется в форматах [[Markdown]] и HTML.
* Простая и логичная [https://gohugo.io/getting-started/directory-structure/ структура папок и файлов] контента:
<source lang="bash">
content
├── _index.md
├── categories
│ ├── _index.md
│ └── photo
│ └── _index.md
├── post
│ ├── _index.md
│ ├── firstpost.md
│ └── secondpost.md
└── tags
├── _index.md
└── hugo
└── _index.md
</source>

== Установка Hugo ==

Сначала нужно скачать и установить Go:

* https://golang.org/dl/

Проверить версию Go:

go version

=== Linux ===

==== 1 вариант - с помощью snap ====

snap install hugo --channel=extended

==== 2 вариант - с помощью brew ====

Установить <code>brew</code> командой с официального сайта: https://brew.sh/

Установить Hugo (будет установлена extended версия):

brew install hugo

==== 3 вариант - компиляция ====

Сначала установить последнюю версию Go:

sudo add-apt-repository ppa:longsleep/golang-backports
sudo apt install golang

Затем следовать [https://gohugo.io/getting-started/installing#fetch-from-github официальной инструкции]:

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended

=== Windows ===

Запустить Power Shell:

<kbd>Win</kbd>-<kbd>R</kbd> — <code>powershell</code> — <kbd>Enter</kbd>

Проверить версию — должна быть не ниже 5:

$PSVersionTable

Установить Scoop:

iwr -useb get.scoop.sh | iex

Установить Hugo и Git:

scoop install hugo git

== Обновление Hugo ==

Проверить версию Hugo:

hugo version

Обновить:

brew upgrade hugo

== Использование Hugo ==

=== Создание сайта ===

Перейдите в папку с проектами (типа <code>~/Sites</code>) и выполните команду:

hugo new site site-name

Будет создана папка <code>site-name</code> и внутри структура из папок и файлов ([https://gohugo.io/getting-started/directory-structure/ Directory Structure]):

<pre>
site-name
├── archetypes # шаблоны типов материалов
│   └── default.md # шаблон по умолчанию
├── content # страницы сайта (файлы .md и .html) и разделы (папки)
├── data # хранилище дополнительных данных
├── layouts # шаблоны (если нет темы)
├── resources # кеш ресурсов
├── static # статичные файлы типа .css, .js, изображений и т.п.
├── themes # темы
└── config.toml # основной конфигурационный файл сайта
</pre>

Добавьте в конфиг <code>config.toml</code> параметр, отключающий создание файлов <code>.xml</code> для RSS:

<source lang="javascript">disableKinds = ["RSS","sitemap"]</source>

Создайте первую черновую страницу контента:

hugo new posts/my-first-post.md

Текстовый файл этой страницы в формате Markdown появится в папке контента:

<pre>
site-name
└── content
└── posts
└── my-first-post.md
</pre>

Запустите сервер с параметром <code>-D</code>, включающим отображение черновых страниц (потому что в созданном файле <code>my-first-post.md</code> по умолчанию добавлен параметр черновика <code>draft: true</code>):

hugo server -D

Откройте в браузере http://localhost:1313/posts/my-first-post

В режиме сервера Hugo следит за изменениями в файлах контента и темы и автоматически обновляет сайт и окно браузера.

Страницы пока что сгенерированы в памяти, без записи файлов на диск. Чтобы сохранить их, запустите Hugo без сервера:

hugo -D

Файлы сайта будут записаны в папку <code>public</code>.

=== Создание темы (шаблонов) ===

Находясь в корневой папке сайта, создайте новую тему:

hugo new theme theme-name

В папке <code>themes</code> будет создана структура:

<pre>
site-name
└── themes
└── theme-name
├── archetypes
│   └── default.md
├── layouts
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── partials
│   │   ├── footer.html
│   │   ├── header.html
│   │   └── head.html
│   ├── 404.html
│   └── index.html
├── static
│   ├── css
│   └── js
├── LICENSE
└── theme.toml
</pre>

Добавьте новую тему в основной конфиг <code>config.toml</code>:

<source lang="javascript">theme = "theme-name"</source>

Можно это сделать одной командой:

<source lang="bash">echo 'theme = "theme-name"' >> config.toml</source>

При настройке темы можно ограничиться минимальным набором файлов:

<pre>
site-name
└── themes
└── theme-name
└── layouts
├── _default
│ ├── baseof.html
│ ├── list.html
│ └── single.html
└── index.html
</pre>

== Параметры сайта — config.toml ==

Настройки сайта на Hugo хранятся в корне проекта в файле <code>config.toml</code> (или <code>config.yaml</code>).

<source lang="yaml">
baseurl: "http://www.example.com/"
title: "Название сайта"
languageCode: "ru-ru"
</source>

Все параметры: https://gohugo.io/overview/configuration/

Проверить все действующие параметры сайта:

hugo config

Отфильтровать — например, найти все параметры директорий:

hugo config | grep -i dir

Помимо стандартных параметров можно создавать собственные.

Например, добавим в конфиг два параметра:

* <code>devMode</code> — чтобы включать и выключать отображение на сайте служебной информации;
* <code>description</code> — чтобы использовать как стандартный description, если не заполнен description страницы.

Добавьте в файл <code>config.toml</code> строки:

<source lang="javascript">
[params]
description = "Описание сайта"
devMode = true
</source>

Добавьте в шаблон <code>layouts/_default/single.html</code> код:

<source lang="go">
{{ if eq .Site.Params.devmode "yes" }}
{{ if .Params.note }}
<div>{{ .Params.note }}</div>
{{ end }}
{{ end }}
</source>

Теперь можно добавлять во <code>front matter</code> страниц (см. подробнее ниже) заметки типа <code>note: Не забыть поправить…</code> и во время разработки сайта с включенным параметром <code>showTechInfo</code> эти заметки будут отображаться, а с выключенным или отсутствующим — нет.

Другой пример - подстановка номера счетчика Google Analytics из параметра в <code>config.toml</code> в шаблон:

<source lang="javascript">
[params]
googleAnalytics = "UA-123456789-1"
</source>

Код счетчика в шаблоне:

<source lang="JavaScript">
{{ if not .Site.IsServer }}
{{ with .Site.Params.googleAnalytics }}
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', '{{ . }}', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
{{ end }}
{{ end }}
</source>

Здесь используется функция [https://gohugo.io/functions/with/ with] — если параметр не задан, то весь блок не будет показан.

И заодно здесь показан пример с переменной [https://gohugo.io/variables/site/ .Site.IsServer] — если сайт тестируется на встроенном сервере Hugo, то блок тоже не будет показан.

== Параметры страниц — front matter ==

Hugo позволяет на лету создавать новые параметры страницы (поля), просто добавляя во <code>front matter</code> (верхняя часть файла страницы <code>.md</code>) название параметра и его значение.

Например, добавим в страницу параметр <code>showOnHomepage</code>, в котором будем писать <code>yes</code>, если нужно показать эту страницу в блоке на главной странице.

Сначала определите параметр во <code>front matter</code> страницы:

<source lang="yaml">
---
showOnHomepage: "yes"
---
</source>

Чтобы вывести параметр <code>showOnHomepage</code> прямо на странице, в которую он добавлен, добавьте следующую строку в соответствующий шаблон (для большинства страниц подойдет шаблон <code>layouts/_default/single.html</code>):

<source lang="go">
{{ .Params.showonhomepage }}
</source>

Обратите внимание: имя параметра пишется в нижнем регистре, независимо от того, как он был написан во <code>front matter</code>.

Если мы хотим видеть параметр на странице только в том случае, если он определен (заполнен), то используем такой код:

<source lang="go">
{{ if .Params.showonhomepage }}
<div>{{ .Params.showonhomepage }}</div>
{{ end }}
</source>

А функция <code>isset</code> проверяет, существует ли вообще параметр <code>showOnHomepage</code>:

<source lang="go">
{{ if isset .Params "showonhomepage" }}
<div>{{ .Params.showonhomepage }}</div>
{{ end }}
</source>

== Контент страницы и Summary ==

По умолчанию контент страницы можно вывести такой переменной:

<source lang="go">
{{ .Content }}
</source>

Чтобы выделить верхнюю часть текста страницы в отдельный параметр <code>.Summary</code>, достаточно вставить в текст разделитель (всё, что выше него, пойдет в <code>.Summary</code>):

<source lang="html5">

</source>

Важно писать <code><nowiki></nowiki></code> именно в таком виде — без пробелов и в нижнем регистре.

Если вывести текст страницы с расширением <code>.md</code> переменной <code>.Content</code>, то в ней будет и <code>.Summary</code>, и остальной текст. (В файлах страниц с расширением <code>.html</code> почему-то не так — <code>.Content</code> выводится без <code>.Summary</code>.) Если нужно вывести контент отдельно от <code>.Summary</code>:

<source lang="go">
<div class="page-summary">
{{ .Summary }}
</div>

<div class="page-content">
{{ $body := replace .Content .Summary "" }}
{{ $body | safeHTML }}
</div>
</source>

Чтобы убрать лишние тэги <nowiki><p></nowiki> вокруг .<code>Summary</code> ([https://github.com/spf13/hugo/issues/1217 см. также]):

<source lang="go">
{{ .Summary | replaceRE "^<p>|<p></p>$" "" | safeHTML }}
</source>

== Типы страниц — archetypes ==

Типы страниц Hugo хранятся в папке <code>archetypes</code> в виде шаблонов в формате <code>.md</code>.

Для примера создадим тип страниц <code>work.md</code>.

Скопируйте <code>default.md</code>:

cp archetypes/default.md archetypes/work.md

Добавьте в заголовке шаблона <code>work.md</code> нужные параметры (поля), например:

<source lang="yaml">
---
draft: true
description: ""
slug: ""
categories:
- Site
- Shop
- Corporate ID
tags:
- Drupal
- Bootstap
years: 2016
---
</source>

В шаблон можно не добавлять поля <code>title</code> и <code>date</code>, они в любом случае будут добавлены автоматически при создании страницы.

Поля, содержащие несколько значений, можно записывать или как показан пример с <code>categories</code> — в строку в квадратных скобках, или как пример с <code>tags</code> — списком. По умолчанию Hugo использует второй вариант.

Два способа создать страницу нужного типа:

1) написать путь, который совпадает с именем типа страниц:

hugo new work/new_page.md

2) использовать параметр <code>--kind</code> или <code>-k</code> — тогда можно создать страницу с любым путем:

hugo new -k work any_path/new_page.md

=== Расширенный шаблон archetypes для таксономии ===

Шаблон для создания страниц для терминов таксономии типа <code><taxonomy>/<term>/_index.md</code>

Создайте новый файл с именем термина таксономии: <code>archetypes/<taxonomy>.md</code> (например, <code>archetypes/brands.md</code>)

<source lang="json">
---
title: {{ $term := index ( split .File.Dir "/") 1 }}"{{ replace $term "-" " " | title }}"
description: "This is the description for {{ $term | title }}"
website: "http://{{ $term }}.com"
logo: "/images/{{ $term }}.jpg"
date: {{ .Date }}
draft: false
---
</source>

Протестируйте:

hugo new brands/test/_index.md

Результат:

<source lang="json">
---
title: "Test"
description: "This is the description for Test"
website: "http://test.com"
logo: "/images/test.jpg"
date: 2017-08-07T12:04:03-06:00
draft: false
---
</source>

== Таксономия ==

* '''Taxonomy''' (таксономия, словари терминов) — категоризация
* '''Term''' (термин) — ключ внутри словаря таксономии
* '''Value''' — часть контента, назначенного термину

Таксономия для сайта определяется в файле <code>config.toml</code>.

Формат имени каждого словаря: <code>singular key: "plural value"</code>, т.е. имени словаря в единственном числе назначается значение в виде множественного числа этого же имени.

По умолчанию есть два словаря — <code>tags</code> и <code>categories</code>. Если других словарей не будет, то можно эти не упоминать в конфиге. Если будут дополнительные словари, то нужно упомянуть в конфиге все словари.

Например, добавим словарь <code>years</code>:

<source lang="yaml">
taxonomies:
tag: "tags"
category: "categories"
year: "years"
</source>

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

<source lang="yaml">
taxonomies:
category: "portfolio/categories"
</source>

Поскольку словари таксономии определяются на уровне всего сайта, то любая часть контента может быть отнесена к таксономии, невзирая на тип контента или раздел сайта.

Назначение контента таксономии делается во <code>front matter</code> страницы. Просто добавьте переменную с именем словаря таксономии во ''множественном числе'':

<source lang="yaml">
---
categories:
- Corporate ID
tags:
- Drupal
- Адаптивная верстка
years:
- 2016
---
</source>

Список терминов словаря таксономии можно посмотреть по адресу типа <code>/PLURAL/</code> (<code>/categories/</code>), а список материалов, относящихся к термину, по адресу <code>/PLURAL/TERM/</code> (<code>/categories/corporate-id/</code>).

== Шаблоны ==

* [https://gohugo.io/templates/introduction/ Introduction to Hugo Templating]
* [https://gohugo.io/templates/lookup-order/ Hugo's Lookup Order]

* [[Списки страниц Hugo]]
* [[Списки таксономии Hugo]]
* [[ShortCodes — шаблоны Hugo внутри текста страниц]]
* [[Параметры страниц в шаблонах Hugo]]

<div class="note">
Устарело, обновить:
* [[Файлы шаблонов Hugo]]
* [[Минимальный комплект шаблонов Hugo]]
* [[Комплект шаблонов со стандартными переменными Hugo]]
* [[Подсветка синтаксиса в Hugo]]
</div>

=== Комментарии ===

Команды шаблонизатора пишутся внутри фигурных скобок.
<br>Комментарии — как в CSS, но тоже внутри фигурных скобок:

<source lang="go">
{{/*
{{ . }}
*/}}
</source>

Шаблонизатор Go убирает все HTML комментарии, оставляя пустые строки.
<br>Чтобы комментарии остались в итоговом HTML, нужно их писать так:

<source lang="go">
{{ "" | safeHTML }}
</source>

=== Hugo и Vue.js ===

И Hugo, и Vue используют синтаксис с двойными фигурными скобками <code><nowiki>{{ counter }}</nowiki></code>, из-за чего Hugo возвращает ошибку.

Можно использовать так ([https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159/3 обсуждение]):

<source lang="html">
{{ safeHTML `
Счётчик: {{ counter }}
` }}
</source>

Либо изменить синтаксис Vue - вместо фигурных скобок использовать квадратные ([https://www.michaelgodeck.com/how-to/vue-in-hugo/ статья]):

<source lang="javascript">
new Vue({
delimiters: ["[[", "]]"],
</source>

<source lang="html">
Счётчик: [[ counter ]]
</source>

=== Условия ===

Примеры простых условий:

<source lang="go">
{{ if .IsHome }}
Это главная страница
{{ end }}

{{ if not .IsHome }}
Это внутренняя страница.
{{ end }}

{{ if ne .IsHome true }}
Это внутренняя страница.
{{ end }}

{{ if and (eq .Section "dictionary") (eq .Kind "page") }}
Это страница раздела dictionary, но не главная его страница.
{{ end }}

</source>

Больше примеров: [https://kodify.net/hugo/functions/hugo-cond-function/ Hugo's cond template function explained]

== Мультиязычность ==

<source lang="yaml">
defaultContentLanguage: "ru"
defaultContentLanguageInSubdir = true
languageCode: "ru-ru"
</source>

Все <code>languageCode</code>: http://www.lingoes.net/en/translator/langcode.htm.
<br>Чаще всего используемые:

en-us
ru-ru
uk-ua

В <code>config.toml</code> добавить:

<source lang="javascript">
[languages]
[languages.ru]
title = "Название сайта"
weight = 1
languageName = "Рус"
languageCode = "ru-ru"
[languages.ru.params]
Locale = "ru_RU" # В т.ч. нужно для Facebook
[languages.uk]
title = "Назва сайту"
weight = 2
languageName = "Укр"
languageCode = "uk-ua"
[languages.uk.params]
Locale = "uk_UA"
</source>

Файлы контента создавать с таким же префиксом, как у параметра languages:

_index.ru.md
_index.uk.md
page.ru.md
page.uk.md

Шаблон тэга <code>hreflang</code> (который ссылается на версии этой же страницы на других языках):

<source lang="html">
{{ if .IsTranslated }}
{{ range .Translations }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}" />
{{ end }}
{{ end }}
</source>

=== Перевод в шаблоне без использования <code>i18n</code> ===

<source lang="go">
{{ if eq .Lang "uk" }}
Створення сайту
{{ else if eq .Lang "ru" }}
Создание сайта
{{ end }}
</source>

=== Перевод в ShortCodes ===

<source lang="go">
{{ if eq $.Site.Language.Lang "uk" }}
Створення сайту
{{ else if eq $.Site.Language.Lang "ru" }}
Создание сайта
{{ end }}
</source>

=== Перевод для числового склонения ===

* [https://vendelin.org/geeky/hugo/create-multilingual-content-hugo/ Multilingual Content With Hugo]

Создать страницу:

hugo new numerals/test.ru.md

Создать шаблон:

layouts/numerals/single.html

<source lang="html">
<ul>
<li>0 {{i18n "year" 0}}</li>
<li>1 {{i18n "year" 1}}</li>
<li>2 {{i18n "year" 2}}</li>
<li>3 {{i18n "year" 3}}</li>
<li>4 {{i18n "year" 4}}</li>
<li>5 {{i18n "year" 5}}</li>
<li>6 {{i18n "year" 6}}</li>
<li>7 {{i18n "year" 7}}</li>
<li>8 {{i18n "year" 8}}</li>
<li>9 {{i18n "year" 9}}</li>
<li>10 {{i18n "year" 10}}</li>
<li>11 {{i18n "year" 11}}</li>
<li>12 {{i18n "year" 12}}</li>
<li>13 {{i18n "year" 13}}</li>
<li>14 {{i18n "year" 14}}</li>
<li>15 {{i18n "year" 15}}</li>
<li>16 {{i18n "year" 16}}</li>
<li>17 {{i18n "year" 17}}</li>
<li>18 {{i18n "year" 18}}</li>
<li>19 {{i18n "year" 19}}</li>
<li>20 {{i18n "year" 20}}</li>
<li>21 {{i18n "year" 21}}</li>
<li>22 {{i18n "year" 22}}</li>
<li>23 {{i18n "year" 23}}</li>
<li>24 {{i18n "year" 24}}</li>
<li>25 {{i18n "year" 25}}</li>
<li>26 {{i18n "year" 26}}</li>
<li>101171 {{i18n "year" 101171}} </li>
</ul>
</source>

Добавить переводы:

i18n/ru.yaml

<source lang="yaml">
- id: year
translation:
zero: ни одного года
one: год
few: года
many: лет
other: года
</source>

i18n/uk.yaml

<source lang="yaml">
- id: year
translation:
zero: жодного року
one: рік
few: роки
many: років
other: роки
</source>

Открыть: http://localhost:1313/ru/numerals/test/ — будуть правильно просклоненные в множественном числе года:

* 0 лет
* 1 год
* 2 года
* ...
* 5 лет
* ...
* 20 лет
* 21 год
* 22 года
* ...
* 25 лет
* ...
* 101171 год

=== Проверка отсутствующих переводов ===

<source lang="bash">
hugo --i18n-warnings | grep i18n
</source>

Начиная с версии v0.93.0:

<source lang="bash">
hugo --printI18nWarnings | grep i18n
</source>

== Проверка ==

Показать отсутствующие переводы:

hugo --printI18nWarnings

Показать дублирующиеся пути и т.п.:

hugo --printPathWarnings

Показать неиспользуемые шаблоны:

hugo --printUnusedTemplates

Найти наиболее медленные шаблоны:

hugo --templateMetrics --templateMetricsHints

Те шаблоны, у которых в столбце "cache potential" стоит 100 или близкое к 100 значение, можно подключить не через <code>partial</code>, а через <code>partialCached</code>.

== Deploy ==

* https://circleci.com/pricing/ — CircleCI бесплатно
** [https://forestry.io/blog/automate-deploy-w-circle-ci/ Automate Your Static Site Deployment | CircleCI]
** [https://circleci.com/orbs/registry/orb/circleci/hugo CircleCI Orb Registry - circleci/hugo]

== Использование с VS Code ==

1. Установить плагин [https://marketplace.visualstudio.com/items?itemName=jinliming2.vscode-go-template Go Template Support]

2. Добавить в <code>settings.json</code>:

<source lang="json">{
"files.associations": {
"*.html": "gohtml"
}
}</source>

== Ссылки ==

2020

* [https://martijnvanvreeden.nl/tags/hugo/ hugo related blogposts | Martijn van Vreeden]
* [https://zwbetz.com/convert-your-plain-old-html-site-to-hugo/ Convert your plain old HTML site to Hugo]
* [https://kodify.net/hugo-static-site-tutorials/ Hugo static site tutorials]
* [https://zwbetz.com/override-a-hugo-theme/ Override a Hugo theme]
* [https://zwbetz.com/syntax-highlighting-in-hugo-with-chroma/ Syntax highlighting in Hugo with Chroma]

Old

* [https://medium.com/@jeffmcmorris/tips-and-tricks-for-building-a-theme-in-hugo-4806bdd747d7 Tips and tricks for building a theme in Hugo]
* [[Статичные сайты]]
* [http://tjm.io/grunt-hugo/ Grunt and Hugo: A Fast Iteration Cookbook]
* [http://npf.io/series/hugo-101/ Hugo 101 series]
* [https://github.com/ktmud/huggle ktmud/huggle] — Hugo theme boilerplate with Gulp and multiple-language support (''глючит, потому что под Mac'')

Пример сайта с кодом:

* https://robertbasic.com/ — https://github.com/robertbasic/robertbasic.com-hugo
* https://jamescampbell.us/ — https://github.com/jamesacampbell/causes-and-effects-hugo

⚡ AMP starter theme:

* https://gohugo-amp.gohugohq.com/
* https://github.com/wildhaber/gohugo-amp

[[Категория:Hugo]]

Hugo - Історія редагувань

>Zina: /* 2 вариант - с помощью brew */