Wprowadzenie
W poprzedniej lekcji poznaliśmy podstawy pracy z Publii. Po zainstalowaniu oprogramowania na komputerze mogliśmy tworzyć w nim podstawową strukturę strony, uzupełniać treści, dodać menu i usunąć niepotrzebne elementy (takie jak np. automatycznie dodawane informacje o autorach wpisów).
Witryna naszej konferencji to tylko kilka podstron. Nie ma sensu, żebyśmy do jej udostępnienia wykorzystywali tak duże i potrzebujące tak wielu zasobów narzędzie jak WordPress. W takim przypadku lepiej wykorzystać rozwiązania minimalistyczne i skorzystać z generatorów stron statycznych.
Cele lekcji
W tej części lekcji poświęconej Publii nauczymy się dodawać i edytować motywy Publii.
Efekty
Bezpośrednim efektem pracy będzie nowy wygląd witryny - interesują nas jednak nie tyle szczegóły estetyczne, ale metoda pracy z motywami Publii.
Wymagania
Aby skorzystać z lekcji musimy mieć Publii na własnym komputerze i przygotować podstawową strukturę strony. Do edycji motywów przydać się może dowolny edytor programistyczny (można skorzystać np. z darmowego Visual Stuido Code) lub nawet systemowego notatnika, chociaż w takim przypadku najprawdopodobniej utracimy możliwość wyróżniania składni. Do edycji motywów w naszej lekcji potrzebna jest też podstawowa wiedza na temat HTML i CSS.
Pamiętajmy, że pracujemy na darmowych motywach i na własnym komputerze. Nic się nie stanie, jeśli w trakcie pracy zepsujemy działanie motywu lub ostateczny efekt estetyczny będzie inny niż zakładaliśmy 🥲. Możemy eksperymentować do woli.
Część merytoryczna
Na stronie domowej Publii znajdziemy katalog motywów. Nie jest ich tak wiele jak w przypadku WordPressa, ale to dobry start do budowy własnego projektu.
Spróbujmy pobrać na dysk jeden z motywów i zobaczyć, co jest w środku. Wybierzmy motyw Square, dostępny w darmowej opcji. Pobrane archiwum *.zip rozpakowujemy do katalogu roboczego na dysku:
Znajdziemy tam pliki json z konfiguracją motywu i ustawieniami wyświetlania danych, pliki js i css, które definiują interakcje na stronie i jej wygląd oraz pliki hbs (handlebars), pozwalające na łączenie struktury HTML z dynamicznie ładowanymi danymi.
Zanim zajmiemy się edycją motywu, spróbujmy zainstalować go i użyć w naszej witrynie Publii.
Instalacja motywu
Do Publii zaimportować możemy dowolną liczbę motywów. Ponieważ jednak jedną z głównych koncepcji Publii jest szybkie ładowanie strony i jej niewielka waga na serwerze, warto usunąć wszystkie nieużywane motywy przed wygenerowaniem ostatecznej postaci witryny.
Zainstalowane motywy dostępne są w zakładce Site settings:
Aby nowy motyw pojawił się na tej liście, musimy umieścić paczkę z jego plikami w Publii. Paczki *.zip dodajemy w module Themes, do którego możemy dostać się przez menu otwierane w prawym górnym rogu ekranu Publii. Tutaj także możemy odinstalować nieużywane motywy:
Jeśli pobraliśmy z katalogu motywów motyw Square, na dysku mamy plik square_3.0.0.0.zip. Jeśli umieścimy go w Publii, będziemy mogli aktywować nowy motyw.
Dopracowanie wyglądu witryny
Dodaliśmy nowy motyw, ale nasza witryna nadal nie wygląda najlepiej.
Spróbujmy uporządkować ją za pomocą ustawień, jeszcze bez bezpośredniego edytowania plików motywu.
Fotografia przedstawiająca skaner możemy z powodzeniem przenieść do lewej kolumny i usunąć ją z naszej strony startowej. Zdjęcie pojawiać się będzie na każdej podstronie, co zapewni jakąś podstawową integralność naszego projektu.
Aby ustawić zdjęcie w lewej kolumnie, edytujemy ustawienia szablonu - Theme:
Warto zwrócić uwagę na ustawienia parametru Overlay. Wartość rgb(1,1,1,0.7) to zapis koloru w modelu RGB (Red, Green, Blue) z dodatkowo definiowaną przezroczystością (formar RGBA). Trzy pierwsze liczby (w skali od 0 do 1) to wartości dla kolorów czerwonego, zielonego i niebieskiego. Czwarty - w naszym przypadku 0.7 - oznacza przezroczystość na poziomie 70 proc.
Ustawienie Overlay z odpowiednią przezroczystością pozwoli nałożyć na nasz obrazek dodatkową warstwę - dzięki niej treść zdjęcia nie będzie ingerowała w tytuł strony.
Bezpośrednie edytowanie motywu
W naszej witrynie mamy mały kłopot z tytułem strony - na stronie głównej nie jest konieczny (dubluje tytuł strony ustawionej jako główna), na podstronach powinien się pojawiać. Nie możemy tego ustawić w panelu zarządzania motywem, dlatego spróbujmy bezpośrednio zmienić jego pliki.
Podobnie jak w pracy z motywami WordPressa, też w Publii zalecane jest, aby w celu wprowadzenia zmian do motywu stworzyć jego motyw potomny. Jak czytamy w dokumentacji, pliki motywu potomnego
są zasadniczo kopiami istniejących plików motywu, przechowywanymi osobno, i „nadpisują” lub zastępują oryginalny plik. W skrócie: gdy Publii tworzy układ strony z użyciem plików motywu, sprawdza, czy w lokalizacji motywu potomnego znajdują się jakieś pliki i, jeśli tak, zastępuje nimi pliki oryginalnego motywu.
Aby stworzyć motyw potomny, musimy znaleźć pliki naszej witryny. Standardowo, w windowsowej instalacji, mogą znajdować się w ścieżce
C:\Users\{NAZWA_UZYTKOWNIKA}\Documents\Publii\sitesW mojej instalacji na Ubuntu, pliki znalazłem w ścieżce
/home/{NAZWA_UZYTKOWNIKA}/Dokumenty/Publii/sites/W katalogu sites znajdziemy katalog z nazwą naszej witryny, w nim - katalog input - themes. To tam znajdują się pliki motywów. Korzystamy z motywu square, dlatego nasz motyw potomny będzie nazywał się square-override.
Musimy teraz w katalogu square zlokalizować plik odpowiedzialny za wyświetlenie tytułu w nagłówku strony i następnie skopiować go do square-override. To plik
/square/partials/navbar.hbsKopiujemy go do
/square-override/partials/navbar.hbsi możemy zacząć edycję. Pliki *.hbs zawierają strukturę HTML oraz znaczniki pozwalające na dynamiczne wlewanie treści:
<div class="container js-container">
{{#if menus.mainMenu}}
{{> menu menus.mainMenu}}
{{/if}}
<div class="container__content">
<header class="top">
<div class="top__item">
<a class="logo" href="{{@website.url}}">
{{#if @website.logo}}
<img src="{{@website.logo}}" alt="{{@website.name}}" width="{{@website.logoSize.width}}" height="{{@website.logoSize.height}}">
{{else}}
{{@website.name}}
{{/if}}
</a>
</div>
<div class="top__item top__item--right">
{{#if menus.mainMenu}}
<button class="menu-toggle js-menu-toggle" aria-label="{{ translate 'partials.menu.menu' }}" aria-expanded="false">
<span class="menu-toggle-box">
<span class="menu-toggle-inner"> {{ translate 'partials.menu.menu' }}</span>
</span>
</button>
{{/if}}
</div>
</header>Uważna lektura tego kodu źródłowego podpowie nam, że zmienić musimy fragment w elemencie o klasie .logo. Jest tam instrukcja warunkowa - jeśli logo nie jest zdefiniowane, wyświetl tytuł strony.
<a class="logo" href="{{@website.url}}">
{{#if @website.logo}}
<img src="{{@website.logo}}" alt="{{@website.name}}" width="{{@website.logoSize.width}}" height="{{@website.logoSize.height}}">
{{else}}
{{#page}}
{{#checkIf id "!=" "1"}} <!-- Jeśli nie jesteśmy na stronie głównej -->
{{@website.name}}
{{else}}
<!-- Nic nie wyświetlaj na stronie głównej -->
{{/checkIf}}
{{/page}}
{{/if}}
</a>Kluczowe jest odwołanie się do danych na temat bieżącej strony i sprawdzenie (za pomocą helpera #checkIf), czy jej ID to 1.
Musiałem wypić kilka kaw, żeby napisać tę instrukcję 🥲 i problemem było właśnie przywołanie danych bieżącej strony. Na szczęście udało się i na stronie głównej tytuł konferencji nie będzie się dublował.
Generowanie i udostępnienie witryny
Kilkając Preview your changes generowaliśmy dotąd podgląd naszej witryny w przeglądarce. Aby umieścić ją online, musimy ją wygenerować i otrzymaną paczkę plików wrzucić na serwer. Samodzielne umieszczenie plików to oczywiście tylko jedna z opcji - wtedy zazwyczaj wybieramy dostęp do serwera za pomocą FTP i korzystamy z programów takich jak FileZilla.
Ważnym elementem ustawień przed wygenerowaniem takiej paczki plików jest określenie, czy chcemy udostępnić witrynę pod dowolną domeną (wybieramy wtedy Use relative URLs) czy na sztywno wpiszemy w pliki adresy poszczególnych stron witryny i innych jej elementów.
Nie tylko przed udostępnieniem witryny, ale też w trakcie pracy nad jej strukturą i treścią, warto regularnie tworzyć kopie bezpieczeństwa (szukajmy w Tools & Plugins):
W razie potrzeby możemy też łatwo zduplikować całą naszą witrynę. To opcje, których WordPress nie ma.
Podsumowanie
W tej lekcji wyszliśmy poza interfejs zarządzania ustawieniami i treścią naszej witryny generowanej w Publii. Tworzenie motywów potomnych nie jest najłatwiejszym zadaniem (szczególnie, jeśli do tej pory mieliśmy doświadczenie wyłącznie z edycją HTML), ale znacząco zwiększa nasz wpływ na to, jak wygląda i zachowuje się budowana przez nas witryna.
Edycja motywów w Publii to też możliwość bardzo dużej kontroli nad opcjami zarządzania witryny - dzięki pracy z plikiem konfiguracyjnym możemy zmieniać właściwości postów i wpisów, dostosowując je do naszych oczekiwań (np. dodać pola Dublin Core do szablonu dodawania wpisów).
Publii pozwala też na import treści z WordPressa, co może pomóc w podjęciu decyzji o migracji z tego systemu 😎.
Wykorzystanie metod
W ramach tej lekcji korzystaliśmy ze składni Handelbars. Handelbars to biblioteka, która umożliwia tworzenie dynamicznych stron poprzez łączenie składni HTML z danymi za pomocą języka JavaScript. Podobne rozwiązanie to mustache, Pug, ale do wyboru mamy naprawdę duży zestaw narzędzi. Pozwalają one oddzielić prezentację danych od logiki aplikacji (w jednym miejscu budujemy strukturę prezentacji, w innym trzymamy dane, które mają być w niej wyświetlane), umożliwiają też tworzenie wielokrotnego użytku komponentów i szablonów.
Pomysł na warsztat
Tworzenie motywów potomnych może być wartościową częścią warsztatu z Publii. Warto skorzystać z wybranych darmowych motywów, które uczestnicy mogą swobodnie edytować, dostosowując do własnych celów i używając odpowiednich znaczników.
Oświadczenie: to opracowanie nie jest płatną promocją i nie powstało w ramach jakiejkolwiek współpracy z firmą rozwijającą Publii.
