Zgodnie z obietnicą złożoną w poprzednim wpisie dzisiejszy tekst będzie poświęcony kwestii mechanizmów zaimplementowanych w Hugo, które odpowiadają za prezentację treści dla tworzonej witryny, a mówiąc dokładniej: przyjrzymy się szablonom, dzięki którym nasza zawartość zostanie opakowana w przygotowany wprzódy kod HTML oraz wszystkie inne “dodatki”, które mają cieszyć oko odwiedzających naszą stronę.
Jako zasobnik szablonów w układzie charakterystycznym dla Hugo służy folder layouts, umieszczony w katalogu głównym naszego projektu. Tam też umieszczamy wymagane pliki HTML, chyba że – tak jak w naszym wypadku – zdecydowaliśmy się skorzystać z opcji użycia motywów (gwoli przypomnienia: w tym celu dodaliśmy wcześniej w pliku konfiguracji config.toml nazwę folderu, z którego w tym zakresie będziemy korzystać). Dlatego też wszystkie “materiały” w tym zakresie gromadzić będziemy w ramach folderu “cb-one”. Decyzja o takim podejściu – skorzystania z opcji motywów – podyktowana była przede wszystkim faktem, że tworząc nowy temat z poziomu CLI dla Hugo dostaniemy gotową strukturę plików i katalogów, z którymi możemy zacząć pracę. Z perspektywy czasu – przyznam się bez bicia – że chyba lepszym podejściem byłoby budowanie takiego układu we własnym zakresie. No ale skoro już powiedziało się A …
Jeśli chodzi o same szablony, to w Hugo są dwa podstawowe ich typy, czyli te dotyczące pojedynczych stron (single), czyli w naszym wypadku byłaby to strona główna (w teorii, bo za chwilę wyjawię pewne odstępstwo w tym zakresie), jak i ta o naszej witrynie (/about) oraz te wszystkie strony, które odpowiadałby poszczególnym wpisom blogowym. Drugą kategorią stron, które mają dedykowany szablon w Hugo, są te, które odwołuję się w ten czy w inny sposób do zawartości innych stron, czyli w naszym wypadku byłoby to zestawienie wpisów blogowych (/blog), ale w przypadku sklepu internetowego mogłaby to być lista produktów do kupienia.
Dodatkowo od którejś wersji dodany został jeszcze jeden rodzaj szablonu, tym razem przeznaczony dla strony głównej (to ten wspomniany wcześniej wyjątek), choć mając na uwadze dostępne mechanizmy tworzenia własnych (custom) layoutów nie bardzo dostrzegam w tym jakiś większy sens, ale może po prostu brakuje mi odpowiedniej wiedzy na ten moment o potencjalnych pożytkach z takiego rozwiązania.
Ponadto znajdziemy też szablon, który użyty jest do przygotowania strony, która powinna się wyświetlić w przypadku błędu 404 (czyli braku strony, którą próbujemy wywołać przy użyciu adresu URL). Tym niemniej zajmować się nim nie zamierzam wcale i wspominam tylko o tym gwoli kronikarskiego obowiązku.
Pora przyjrzeć się jak to wygląda nasz motyw na starcie, a właściwie jego struktura w projekcie. W tym celu należałoby zajrzeć do katalogu themes/cb-one i wówczas możemy ujrzeć coś takiego, co widać to na poniższym drzewku:.
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ ├── header.html
│ └── head.html
├── LICENSE
├── static
│ ├── css
│ └── js
└── theme.toml
Nas interesuje w tym momencie katalog “_default”, w którym znajdują się trzy pliki HTML. O pierwszym z nich (baseof.html) będzie jeszcze okazja wspomnieć, natomiast w tym momencie interesują nas dwa pozostałe, które odpowiadają dwóm kategoriom stron, o jakich pisałem wcześniej (single oraz list). Jeśli je teraz otworzymy przekonamy się od razu, że są one puste i właśnie dlatego żadna ze stron przygotowanych w katalogu “content” (nawet jeśli odpalimy server Hugo) się nam nie wyświetli.
Wracając jednak do wspomnianych wyżej szablonów warto zwrócić uwagę na nazwę folderu, w którym się one znajdują. Jego nazwa po naszemu oznacza “domyślny”, co każe nam przypuszczać, że w takim układzie prawdopodobnie istnieje możliwość rozszerzenia tego zestawienia o kolejne matryce, tym razem dedykowane pod poszczególne strony czy całe ich grupy. Jest to ze wszech miar trafna intuicja i w naszym projekcie skorzystamy z takiej opcji dla wpisów blogowych. Tym samym folderze layout utworzyć trzeba katalog “blog”, a w nim dwa nowe pliki list.html oraz single.html. Ten pierwszy będzie odpowiadał plikowi _index.md, zaś drugi wszystkim pozostałym plikom Markdown dostępnym w katalogu content/blog. Gdybyśmy jednak chcieli stworzyć – z jakiegoś niezrozumiałego powodu – dedykowany szablon dla drugiego z naszych wpisów blogowych (2-wpis.md), wówczas nazwa szablonu musiałaby odpowiadać dokładnej nazwie konkretnego pliku Markdown (oczywiście z pominięciem nazwy rozszerzenie “md”, czyli na przykład byłoby to 2-wpis.html).
O ile dopasowanie szablonu do odpowiedniego pliku w folderze “content”, które opiera się się na tożsamości nazw jest dość oczywiste, natomiast otwartym pytaniem pozostaje, w jaki sposób dochodzi do przypisania szablonów o generycznych nazwach, czyli list.html oraz single.html? Rozwiązanie jest banalne: Hugo po prostu sprawdza, czy nazwa pliku Markdown w danym katalogu to _index.md. Jeśli odpowiedź jest pozytywna wówczas wybierany jest szablon list.html, w przeciwnym razie zastosowanie ma szablon single.html. Oczywiście do tego dochodzi cała logika związana ze sprawdzaniem, czy dla tego konkretnego pliku lub całego folderu nie zostało przygotowany specjalny rodzaj szablonów, dlatego tak ważne jest wstępne zaprojektowanie struktury stron na naszej witrynie, do której później przygotujemy stosowne matryce.
Na ten moment to wszystko. W kolejnym wpisie zajmiemy się pozostałymi elementami katalogu “layout” i być może uda się nam nawet wyświetlić pierwszą stronę lub przynajmniej mocno zbliżyć do tej wiekopomnej chwili.
