Hugo


Чернетка! Стаття не завершена...

Assembly

Параметр draft: true у заголовку сторінки означає, що створювані ресурси за замовчуванням є чернетками і не будуть згенеровані в /public. Ключ -D включає чернетки в зборку:

$ hugo -D --logLevel info

Ключ logLevel (debug|info|warn|error) відповідає за повноту виведення інформації.

Init structure

hugo v0.86 linux/amd64

Якщо стаття містить лише текст у форматі Markdown, то для включення її на сайт, файл достатньо зберегти у каталог /content або його підкаталог:

content
   ├─ Section-I
   |   ├─ article-01.md
   |   ├─ article-02.md
   |   ├─ article-03
   |   |   ├─ index.md
   |   |   └─ images
   |   |       └─ ...
   |   ...
   └─ Section-II
       ├─ SubSection-a
       |       ├─ article-04.md
       |       └─ ...
       └─ SubSection-b
               ├─ article-05.md
               └─ ...

Сторінка змісту по кожній Section генерується рекурсивно у /layouts/_default/section.html (в даному дизайні сайту, у зміст винесені лише два параметри з шаблону сторінки: Title та Draft).

Якщо стаття містить зображення, включені документи або ін. файли, то всі вони разом називаються ресурси.

У Hugo є два типи ресурсів:

Докладніше:

Insert image (page bundle)

Зображення не можуть зберігатись у каталозі /static. Щоб мати можливість використовувати обробку зображень, вони мають бути ресурсом.

content
    └─ post-01
        ├─ index.md
        ├─ image-1.jpg
        ├─ images
        |   ├─ image-2.jpg
        |   └─ image-3.jpg
        └─ photo
            ├─ image-4.jpg
            └─ image-5.jpg

Для вставки зображення на сторінку, слід вказати до неї шлях та відповідне посилання:

# ... index.md

![your image 1](image-1.jpg)
![your image 2](./images/image-2.jpg)
![your image 5](/post-01/photo/image-5.jpg)

Створюємо в shortcodes скрипт list-images.html, у якому в якості параметра – назва каталога з зображеннями. Якщо параметр не вказано, за умовчанням пошук зображень виконується у каталозі images.

В циклі, за шаблоном $pattern, зображення зменшуютья до розміру 350рх, посилання на які отримуються тегом < img >, а посилання на оригінальний розмір – тегом < a >.

Мініатюри та оригінальні зображення після генерування будуть розміщені в /resources/_gen.

# /layouts/shortcodes/list-images.html

{{ $src := .Get "src" | default "images" }}
{{ $pattern := printf "%s%s" $src "/*" }}

{{ range .Page.Resources.Match $pattern }}
    {{ $original := .RelPermalink }}
    {{ $thumb := .Resize "350x" }}
    {{ with $thumb }}
        <a href="{{ $original }}" data-caption="{{ .ResourceType | title }}">
            <img src="{{ .RelPermalink }}" alt="">
        </a>
    {{ end }}
{{ end }}

Для використання в index.md вставити код:

## Gallery (default folder)
{{< list-images >}}

## Gallery (from "images")
{{< list-images src="images" >}}

## Gallery (from "photo")
{{< list-images src="photo" >}}

Insert HTML (fragment)

Для вставки в markdown-файл фрагменту html-розмітки, слід використати shortcodes:

# /layouts/shortcodes/rawhtml.html

{{.Inner}}
# ... index.md

{{< rawhtml >}}
    <div> ... </div>
{{< /rawhtml >}}

Insert HTML (full page)

Для того аби уникнути рендеру сторінки на основі шаблонів сайту і завантажити у вигляді raw-html, в ../layaouts/_default створюємо шаблон blank:

# /layouts/_default/blank.html

{{ .Content | safeHTML }}

В результаті його використання буде згенеровано сторінку, яка міститиме виключно html-код, прописаний в markdown файлі :

# ... index.md

---
layout: blank
---

{{< rawhtml >}}
<!DOCTYPE html>
<html lang="uk">
<head>
    <title>texnolog.org</title>
    <meta charset="utf-8">
    ...
</head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
        ...
        <div> ... </div>
        ...
    </body>
</html>
{{< /rawhtml >}}

Insert map (Google)

  1. Завантажити на сайт google mymaps трек у форматі GPX або KML
  2. Отримати HTML-код, щоб вставити його у вихідний код сторінки
  3. Використати shortcodes для вставки raw-html в markdown розмітку
  4. Додати код на сторінку
# ... index.md

{{< rawhtml >}}
<div class="map">
    <iframe src="https://www.google.com/maps/.... my link ...."
        width="100%" height="450" style="border:0;"
        allowfullscreen="" loading="lazy">
    </iframe>
</div>
{{< /rawhtml >}}

Insert map (Leaflet)

  1. Створити shortcodes для вставки raw-html/js в markdown розмітку
  2. Зі сторінки Preparing your page оновити останні версії бібліотек
  3. З markdown документу передати у якості параметра масив координат та назв до маркерів
# /layouts/shortcodes/insert-map.html

{{ $geo := .Get "geo" }}

<!-- Resources -->
<link   rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
        crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
        crossorigin="">
</script>

<!-- HTML -->
<div id = "map" class="map" style = "height:40rem; z-index: 0;"></div>

<script>
    var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        {
            attribution: false
        });
    var map = L.map('map',
        {
            zoomControl: true,
            layers: [tileLayer],
            maxZoom: 18,
            minZoom: 1
        }).setView([50.452459312329296, 30.523266677273984], 7);
    setTimeout(function () { map.invalidateSize() }, 800);

    // get latlng and label titles from page
    var geo = JSON.parse( {{ $geo }} );
    var markers = [];

    // add markers to map
    for (var i = 0; i < geo.latlng.length; i++) {
        var position = geo.latlng[i];
        var label = geo.name[i];
        markers[i] = L.marker(position).addTo(map).bindPopup(label);
    };

    // add colored path to map
    if (geo.latlng.length > 1){
        L.polyline(geo.latlng, {color: "#2196f3"}).addTo(map);
    }
</script>
# ... index.md

{{< insert-map geo=`{"latlng":[[50.48432989431562, 30.47201779931968],[50.45374348769153, 30.514008999801348]], "name":["xxx","yyy"]}` >}}

Insert text-file in post

Для того, щоб вставити текстовий файл в markdown-розмітку (наприклад, конфігураційні файли при описі налаштувань якогось софта), достатньо створити shortcodes:

# /layouts/shortcodes/insert-file.html

{{ $file := .Get "file" }}
{{ (printf "%s%s" .Page.File.Dir $file) | readFile | safeHTML }}

Використання:

# ... index.md

Конфигурационный файл /home/user/.tmux.conf:
{{< insert-file file=".tmux.conf" >}}

RSS

  1. Додати в confog.toml секцію outputs та outputFormats
  2. Створити шаблон /layouts/_default/rss.xml
  3. Додати в секцію head поилання на rss
  4. Додати поилання на сторінку
# confog.toml

...
[outputs]
    page = ["HTML"]
    home = ["HTML", "RSS"]
    section = ["HTML"]
    taxonomyTerm = ["HTML"]
    taxonomy = ["HTML"]

[outputFormats]
  [outputFormats.RSS]
    mediatype = "application/rss"
    baseName = "rss"
...

Access to content

Приклад налаштування див. на сторінці Nginx

Insert diagram

pie title French Words I Know "Merde" : 50 "Oui" : 35 "Alors" : 10 "Non" : 5
flowchart LR A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]