Параметр draft: true у заголовку сторінки означає, що створювані ресурси за замовчуванням є чернетками і не будуть згенеровані в /public. Ключ -D включає чернетки в зборку:
$ hugo -D --logLevel info
Ключ logLevel (debug|info|warn|error) відповідає за повноту виведення інформації.
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 є два типи ресурсів:
Докладніше:
Зображення не можуть зберігатись у каталозі /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
Створюємо в 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" >}}
Для вставки в markdown-файл фрагменту html-розмітки, слід використати shortcodes:
# /layouts/shortcodes/rawhtml.html
{{.Inner}}
# ... index.md
{{< rawhtml >}}
<div> ... </div>
{{< /rawhtml >}}
Для того аби уникнути рендеру сторінки на основі шаблонів сайту і завантажити у вигляді 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 >}}
# ... 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 >}}
# /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"]}` >}}
Для того, щоб вставити текстовий файл в 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" >}}
# confog.toml
...
[outputs]
page = ["HTML"]
home = ["HTML", "RSS"]
section = ["HTML"]
taxonomyTerm = ["HTML"]
taxonomy = ["HTML"]
[outputFormats]
[outputFormats.RSS]
mediatype = "application/rss"
baseName = "rss"
...
Приклад налаштування див. на сторінці Nginx