![\"Grafika](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/Jekyll_baner.jpg\" "\\"\\"")
<\/p>\n<\/p>\n
Je\u015bli planujesz stworzy\u0107 mniej rozbudowan\u0105 stron\u0119, kt\u00f3ra nie zawiera wielu element\u00f3w dynamicznych (czy to po stronie serwera czy na frontendzie) i posiadasz pewn\u0105 wiedz\u0119 techniczn\u0105, to do jej stworzenia mo\u017cesz wykorzysta\u0107 Jekylla \u2013 generator statycznych stron.<\/p>\n
Podstawow\u0105 zalet\u0105 u\u017cycia generatora b\u0119dzie uzyskanie plik\u00f3w statycznych, kt\u00f3re mog\u0105 by\u0107 bez problemu udost\u0119pniane przez ka\u017cdy serwer HTTP. Rozwi\u0105zanie takie b\u0119dzie dzia\u0142a\u0142o znacznie szybciej, ni\u017c w przypadku stron generowanych dynamicznie przez WordPressa (czy przez jakikolwiek inny CMS).<\/p>\n
Omawiane zagadnienia wymagaj\u0105:<\/p>\n
![\"opieka](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2025\/01\/baner-opieka.png\")
\r\n<\/a>\r\nKorzystaj\u0105c z niniejszego poradnika dowiesz si\u0119, jak:<\/p>\n
Wiedza ta b\u0119dzie zaprezentowana na prostym przyk\u0142adzie, kt\u00f3ry mo\u017cesz rozwija\u0107 dalej ju\u017c we w\u0142asnym zakresie.<\/p>\n
Jekyll jest najstarszym z dost\u0119pnych generator\u00f3w stron statycznych. W zwi\u0105zku z tym mo\u017cna znale\u017a\u0107 wiele tekst\u00f3w opisuj\u0105cych proces instalacji. Bez problemu znajdziesz je r\u00f3wnie\u017c na oficjalnej stronie Jekylla w dokumentacji.<\/p>\n
Wi\u0119kszo\u015b\u0107 tych opis\u00f3w (w\u0142\u0105cznie z oficjalnym) jest identyczna. Z jednej strony, trudno si\u0119 temu dziwi\u0107 wszak, na ile sposob\u00f3w mo\u017cna zainstalowa\u0107 t\u0119 sam\u0105 aplikacj\u0119? Z drugiej strony, gdy kto\u015b, kto nie zna j\u0119zyka Ruby (w kt\u00f3rym jest napisany Jekyll) i nigdy tego \u015brodowiska nie u\u017cywa\u0142, zobaczy prost\u0105 instrukcj\u0119 zawieraj\u0105c\u0105 nast\u0119puj\u0105ce polecenie:<\/p>\n
$ gem install bundler jekyll<\/code><\/pre>\n… mo\u017ce poczu\u0107 si\u0119 nieswojo. Wynika z tego, \u017ce aby u\u017cywa\u0107 Jekylla, konieczna jest instalacja dodatkowego oprogramowania (owego gema), a kto wie, co jeszcze b\u0119dzie potrzebne?<\/p>\n
Tymczasem, u\u017cywaj\u0105c Dockera, mo\u017cesz uruchomi\u0107 aplikacj\u0119 w kontenerze. W repozytorium hub.docker.com<\/a> dost\u0119pne s\u0105 gotowe obrazy (w tym oficjalne dostarczone przez tw\u00f3rc\u00f3w Jekylla). W takiej sytuacji wystarczy po prostu, \u017ce pobierzesz odpowiedni obraz z repozytorium:<\/p>\n$ docker pull jekyll\/jekyll:minimal<\/code><\/pre>\nW dalszej cz\u0119\u015bci niniejszego artyku\u0142u, skupisz si\u0119 na wykorzystaniu obrazu Dockera do pracy Jekyllem. My\u015bl\u0119, \u017ce warto pokaza\u0107 t\u0119 metod\u0119, gdy\u017c praca z Jekyllem z poziomu systemu operacyjnego (a wi\u0119c wymagaj\u0105ca instalacji \u015brodowiska j\u0119zyka Ruby) jest ju\u017c dok\u0142adnie opisana w oficjalnej dokumentacji Jekylla oraz w wielu innych tekstach. Nie ma powodu, \u017ceby powiela\u0107 te informacje. Poza tym zapewne jest wi\u0119cej u\u017cytkownik\u00f3w Dockera ni\u017c u\u017cytkownik\u00f3w Ruby.<\/p>\n
Maj\u0105c ju\u017c obraz Jekylla, mo\u017cesz go teraz wykorzysta\u0107 do pracy z aplikacj\u0105 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n
$ docker run --rm -it -v "$(pwd):\/srv\/jekyll" -p 4000:4000 jekyll\/jekyll \/bin\/bash<\/code><\/pre>\nPolecenie to powinno by\u0107 zrozumia\u0142e dla u\u017cytkownik\u00f3w Dockera, niemniej warto dok\u0142adniej je opisa\u0107 dla tych u\u017cytkownik\u00f3w, kt\u00f3rzy dopiero zaczynaj\u0105 przygod\u0119 z tym oprogramowaniem:<\/p>\n
\n- opcja -v “$(pwd):\/srv\/jekyll”<\/span> powoduje podmontowanie aktualnego katalogu roboczego (ang. current working directory) w katalogu \/srv\/jekyll<\/span> obrazu Dockera. Dzi\u0119ki temu Jekyll uruchamiany w kontenerze b\u0119dzie mia\u0142 dost\u0119p do plik\u00f3w na lokalnym dysku. Pozwoli Ci to na edytowanie tych plik\u00f3w na swoim komputerze za pomoc\u0105 dowolnego edytora tekstu, a nast\u0119pnie przetwarzanie ich za pomoc\u0105 Jekylla.<\/li>\n
- opcja -p 4000:4000<\/span> \u201ewi\u0105\u017ce\u201d ze sob\u0105 porty 4000 w systemie operacyjnym i w kontenerze Dockera. Jest to bardzo przydatne, gdy\u017c Jekyll ma wbudowany serwer HTTP, kt\u00f3ry pozwala na sprawdzenie wygenerowanej strony w przegl\u0105darce. Serwer ten dzia\u0142a domy\u015blnie w\u0142a\u015bnie na porcie 4000.<\/li>\n
- wreszcie \/bin\/bash<\/span> jest poleceniem, kt\u00f3re zostanie wykorzystane do uruchomienia procesu w kontenerze. Jest to zwyczajna pow\u0142oka systemowa, z kt\u00f3rej uruchomisz Jekylla.<\/li>\n<\/ul>\n
Aby sprawdzi\u0107, czy wszystko dzia\u0142a poprawnie, mo\u017cesz wyda\u0107 polecenie (naturalnie w uruchomionym ju\u017c kontenerze Dockera):<\/p>\n
bash-5.0# jekyll --help<\/code><\/pre>\n<\/span>Krok 2 \u2013 przygotowanie szablonu HTML\/CSS<\/span><\/h2>\nPoniewa\u017c nie jestem specjalist\u0105 od CSS (ani nawet od HTMLa), skorzystam z gotowego, darmowego szablonu, kt\u00f3ry mo\u017cna znale\u017a\u0107 \u201ew sieci\u201d. B\u0119dzie to Purple Buzz<\/a>. Rzecz jasna, korzystaj\u0105c z Jekylla mo\u017cesz wykona\u0107 stron\u0119 w oparciu o dowolny szablon.<\/p>\nPurple Buzz jest do\u015b\u0107 rozbudowany, co pozwala na wykonanie z\u0142o\u017conej strony z wieloma podstronami. Niemniej w niniejszym poradniku skupisz si\u0119 na stronie g\u0142\u00f3wnej oraz jednej podstronie. W zupe\u0142no\u015bci wystarczy to do prezentacji (oraz nauki) podstawowych funkcji Jekylla. Ewentualn\u0105 rozbudow\u0119 strony mo\u017cesz potraktowa\u0107 jako zadanie do samodzielnego wykonania.<\/p>\n
Gotowy szablon sk\u0142ada si\u0119 z kilku plik\u00f3w .html<\/span> oraz katalogu assets<\/span>, w kt\u00f3rym znajduj\u0105 si\u0119 pliki .css<\/span>, .js<\/span>, obrazy oraz czcionki wykorzystywane w dokumentach. Tak jak wspomnia\u0142em, w niniejszym poradniku skupisz si\u0119 na dw\u00f3ch stronach: stronie g\u0142\u00f3wnej (plik index.html<\/span>) oraz jednej podstronie (plik work-single.html<\/span>).<\/p>\n\nW Jekyllu stosowany jest tzw. Liquid. Jest to silnik szablon\u00f3w, kt\u00f3ry bazuje na konkretnych szablonach, fragmentach (ang. includes) oraz zmiennych. Szablon stanowi szkielet dokumentu. Mo\u017cesz w nim wykorzysta\u0107 fragmenty, kt\u00f3re s\u0105 zapisane w odr\u0119bnych plikach. Zmienne s\u0105 zazwyczaj definiowane w konkretnych dokumentach.<\/p>\n<\/div>\n
Praca z Jekyllem polega w zasadzie na zapisaniu szablonu HTML\/CSS (np. takiego, jak przyk\u0142adowy Purple Buzz) w postaci powtarzalnych szablon\u00f3w oraz r\u00f3wnie\u017c powtarzalnych fragment\u00f3w. Co prawda Jekyll mo\u017ce wygenerowa\u0107 dokument, kt\u00f3ry nie wykorzystuje \u017cadnego szablonu, w praktyce jest to jednak rzadko stosowane. G\u0142\u00f3wn\u0105 zalet\u0105 u\u017cywania Jekylla (jak r\u00f3wnie\u017c innych generator\u00f3w statycznych stron) jest stosowanie szablon\u00f3w, kt\u00f3re uzupe\u0142nione odpowiedni\u0105 tre\u015bci\u0105, daj\u0105 w efekcie konkretne strony.<\/p>\n
<\/span>Krok 3 \u2013 stworzenie strony g\u0142\u00f3wnej<\/span><\/h2>\nZacznij od wykonania strony g\u0142\u00f3wnej.<\/p>\n
Poniewa\u017c nie masz jeszcze niczego, poza szablonem HTML\/CSS, prac\u0119 rozpocznij od utworzenia katalogu na projekt.<\/p>\n
Na pocz\u0105tek warto zrobi\u0107 co\u015b naprawd\u0119 prostego: wstaw dokument index.html<\/span>, wzi\u0119ty wprost z szablonu HTML\/CSS i sprawd\u017a, jaki b\u0119dzie efekt pracy Jekylla. Plik umie\u015b\u0107 w katalogu projektu, po czym uruchom Jekylla:<\/p>\nbash-5.0# jekyll build<\/code><\/pre>\n\nJekyll dzia\u0142a w bardzo prosty spos\u00f3b: odnajduje wszystkie pliki w katalogu projektu i odpowiednio je przetwarza, je\u015bli jest taka potrzeba.<\/p>\n<\/div>\n
Dok\u0142adniej to ujmuj\u0105c, Jekyll odnajduje wszystkie pliki z pomini\u0119ciem pewnych katalog\u00f3w. Jakie to katalogi? Mi\u0119dzy innymi _layouts<\/span> (zawieraj\u0105cy szablony), _includes<\/span> (zawieraj\u0105cy fragmenty dokument\u00f3w) czy assets<\/span> (zawieraj\u0105cy pliki, kt\u00f3re r\u00f3wnie\u017c powinny nale\u017ce\u0107 do strony, a nie s\u0105 przetwarzane przez Jekylla, jak np. arkusze styl\u00f3w czy skrypty JavaScript).<\/p>\nEfektem dzia\u0142ania polecenia s\u0105 pliki zapisane w katalogu _site<\/span>. Co si\u0119 tam znajduje? Skopiowany plik .html<\/span>, kt\u00f3ry Jekyll znalaz\u0142 w g\u0142\u00f3wnym katalogu. Zawarto\u015b\u0107 tego pliku mo\u017cesz sprawdzi\u0107, otwieraj\u0105c go w przegl\u0105darce albo w edytorze tekstu.<\/p>\nWygl\u0105dem dokumentu w przegl\u0105darce zajmiesz si\u0119 za chwil\u0119. Najpierw warto skomentowa\u0107 pewien fakt: plik index.html<\/span> w katalogu _sites<\/span> jest po prostu kopi\u0105 pliku index.html<\/span> z katalogu g\u0142\u00f3wnego projektu. Wygl\u0105da na to, \u017ce Jekyll po prostu utworzy\u0142 katalog _sites<\/span>, a nast\u0119pnie skopiowa\u0142 tam plik index.html<\/span>.<\/p>\nJekyll dzia\u0142a w\u0142a\u015bnie w taki spos\u00f3b. Je\u015bli w danym pliku .html<\/span> nie zaznaczysz, \u017ce ma on zosta\u0107 odpowiednio przetworzony przez Jekylla, to plik zostanie po prostu skopiowany do katalogu _sites<\/span> (w odpowiednie miejsce, z uwzgl\u0119dnieniem struktury katalog\u00f3w w katalogu g\u0142\u00f3wnym projektu) bez \u017cadnych zmian.<\/p>\nRzecz jasna, nie po to u\u017cywasz Jekylla, \u017ceby kopiowa\u0107 pliki. Aby w\u0142\u0105czy\u0107 wspomniane przetwarzanie, musisz doda\u0107 do pliku odpowiedni nag\u0142\u00f3wek. Tym zajmiesz si\u0119 za chwil\u0119, bowiem wcze\u015bniej trzeba rozwi\u0105za\u0107 inny problem: strona nie wygl\u0105da tak, jak powinna:<\/p>\n
![\"Jekyll](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/Strona01-199x300.png\" "\\"\\"")
<\/a><\/p>\nCo si\u0119 sta\u0142o? Do\u015bwiadczenie mo\u017ce podpowiedzie\u0107 Ci, \u017ce zapewne niekt\u00f3re arkusze styl\u00f3w CSS nie zosta\u0142y za\u0142adowane. Mo\u017cesz to sprawdzi\u0107 w konsoli przegl\u0105darki:<\/p>\n
![\"grafika](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/Strona02-problem-300x300.png\" "\\"\\"")
<\/a><\/p>\nJak widzisz, podejrzenie by\u0142o s\u0142uszne! Dokument index.html<\/span> odwo\u0142uje si\u0119 do pewnych plik\u00f3w (.css<\/span>, .jpg<\/span> i .js<\/span>), kt\u00f3re nie zosta\u0142y znalezione i wczytane. Aby ten problem rozwi\u0105za\u0107, musisz:<\/p>\n\n- Skopiowa\u0107 brakuj\u0105ce pliki z szablonu do katalogu assets<\/span> w projekcie.<\/li>\n
- Upewni\u0107 si\u0119, \u017ce \u015bcie\u017cka dost\u0119pu do tych plik\u00f3w jest poprawna w dokumencie index.html<\/span>.<\/li>\n<\/ol>\n
W przypadku u\u017cywanego szablonu powinno wystarczy\u0107 umieszczenie katalogu assets<\/span> z szablonu w katalogu projektu. Po wykonaniu tych czynno\u015bci ponownie zbuduj stron\u0119:<\/p>\nbash-5.0# jekyll build<\/code><\/pre>\n… i \u201eod\u015bwie\u017c\u201d j\u0105 w przegl\u0105darce. Ko\u0144cowy efekt powinien by\u0107 taki sam, jak w oryginalnym szablonie.<\/p>\n
<\/span>Krok 4 \u2013 wyodr\u0119bnienie szablonu<\/span><\/h2>\nSkoro sprawa z brakuj\u0105cymi plikami zosta\u0142a rozwi\u0105zana, pora zabra\u0107 si\u0119 za kolejny problem: nie b\u0119dziesz przecie\u017c u\u017cywa\u0107 Jekylla do zwyk\u0142ego kopiowania plik\u00f3w.<\/p>\n
Jak zosta\u0142o ju\u017c napisane, Jekyll dzia\u0142a na bardzo prostej zasadzie: na podstawie szablonu oraz pewnych danych (np. tre\u015bci dokumentu) mo\u017ce wygenerowa\u0107 dokument HTML. W tym przypadku potrzebujesz po prostu szablonu.<\/p>\n
Zasadnicze pytanie brzmi: jaka cz\u0119\u015b\u0107 dokumentu index.html<\/span> powinna stanowi\u0107 szablon (ang. layout), a jaka cz\u0119\u015b\u0107 tre\u015b\u0107? Z definicji tych poj\u0119\u0107 wynika, \u017ce szablon powinien by\u0107 sta\u0142y, natomiast tre\u015b\u0107 mo\u017ce si\u0119 zmienia\u0107. Gdyby to by\u0142 rzeczywisty projekt, to w\u0142a\u015bnie nad takimi problemami nale\u017ca\u0142oby si\u0119 zastanowi\u0107. Na potrzeby niniejszego tekstu przyjmij, \u017ce na stronie g\u0142\u00f3wnej nie b\u0119dzie tre\u015bci, a jedynie szablon.<\/p>\nNajpro\u015bciej b\u0119dzie, gdy skopiujesz plik index.html<\/span> do katalogu _layouts<\/span> (katalog taki trzeba uprzednio utworzy\u0107), jako np. home.html<\/span>. Nast\u0119pnie ca\u0142\u0105 zawarto\u015b\u0107 pliku index.html<\/span> w katalogu g\u0142\u00f3wnym projektu podmie\u0144 na nast\u0119puj\u0105c\u0105:<\/p>\n---\nlayout: home\n---<\/code><\/pre>\nPo ponownym uruchomieniu Jekylla i sprawdzeniu wynik\u00f3w powinno si\u0119 okaza\u0107, \u017ce strona wci\u0105\u017c wygl\u0105da tak samo. To dobrze \u2013 nie powinno by\u0107 \u017cadnych zmian. Warto jednak zwr\u00f3ci\u0107 uwag\u0119 na dwie sprawy.<\/p>\n
Po pierwsze, zawarto\u015b\u0107 pliku index.html<\/span> uleg\u0142a zmianie. Cz\u0119\u015b\u0107 pomi\u0119dzy wierszami zawieraj\u0105cymi po trzy znaki \u201e-\u201d, to tzw. cz\u0119\u015b\u0107 pocz\u0105tkowa (ang. Front Matter). Zamieszczane s\u0105 tam informacje w formacie YAML opisuj\u0105ce dane dotycz\u0105ce generowanej strony. W tym przypadku jest to tylko jedna informacja dotycz\u0105ca szablonu. Dzi\u0119ki tej informacji Jekyll u\u017cyje pliku home.html<\/span> z katalogu _layouts<\/span>.<\/p>\nEwentualna tre\u015b\u0107 strony mog\u0142aby zosta\u0107 umieszczona w\u0142a\u015bnie po cz\u0119\u015bci pocz\u0105tkowej. Jak jednak zosta\u0142o ju\u017c wspomniane, tworzysz tylko szablon, bez tre\u015bci.<\/p>\n
Po drugie, praca z Jekyllem zaczyna by\u0107 nieco m\u0119cz\u0105ca. Po ka\u017cdej zmianie musisz wydawa\u0107 to samo polecenie s\u0142u\u017c\u0105ce do wygenerowania strony. By\u0142oby pro\u015bciej, gdyby Jekyll wykry\u0142, \u017ce zawarto\u015b\u0107 plik\u00f3w zosta\u0142a zmieniona, a nast\u0119pnie automatycznie wygenerowa\u0142 stron\u0119. Efekt taki mo\u017cesz uzyska\u0107, u\u017cywaj\u0105c polecenia:<\/p>\n
bash-5.0# jekyll serve<\/code><\/pre>\nStrona nie tylko b\u0119dzie wygenerowana, ale r\u00f3wnie\u017c zostanie uruchomiony serwer HTTP na porcie 4000. Je\u015bli w przegl\u0105darce wpiszesz adres http:\/\/localhost:4000<\/span>, to zobaczysz zawarto\u015b\u0107 wygenerowanego pliku index.html<\/span> z katalogu _site<\/span>.<\/p>\n\nNiezale\u017cnie od tego, czy tworzysz strony w WordPressie czy te\u017c korzystasz ze statycznych generator\u00f3w stron takich jak opisywany tu Jekyll, Elastyczny Web Hosting sprawdzi si\u0119 w ka\u017cdej sytuacji!
\n<\/strong><\/p>\nWysokie parametry gwarantowane (1 GHz CPU, 2 GB RAM oraz 50 GB SSD NVMe<\/strong>) sprostaj\u0105 zapotrzebowaniu wi\u0119kszo\u015bci stron WWW. Ponadto je\u015bli w kt\u00f3rymkolwiek momencie b\u0119dziesz potrzebowa\u0107 wi\u0119cej zasob\u00f3w, zostan\u0105 Ci one przydzielone automatycznie.
\nSkorzystaj z 14-dniowego okresu testowego i sprawd\u017a w praktyce mo\u017cliwo\u015bci EWH.<\/p>\nWYPR\u00d3BUJ HOSTING<\/strong><\/a><\/p>\n<\/div>\n<\/span>Krok 5 \u2013 tworzenie fragment\u00f3w szablonu<\/span><\/h2>\nSpr\u00f3buj teraz nieco ulepszy\u0107 szablon, wydzielaj\u0105c cz\u0119\u015b\u0107 nag\u0142\u00f3wka do osobnego pliku. Nag\u0142\u00f3wek mo\u017cna bez problemu wyszuka\u0107 w pliku home.html<\/span>. Jest wyra\u017anie zaznaczony odpowiednim komentarzem. Ca\u0142\u0105 t\u0119 cz\u0119\u015b\u0107 nag\u0142\u00f3wka skopiuj do pliku header.html<\/span>, a plik ten umie\u015b\u0107 w katalogu _includes<\/span> (katalog musisz wcze\u015bniej utworzy\u0107).<\/p>\n![\"wygl\u0105d](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/Header-300x210.png\" "\\"\\"")
<\/a><\/p>\nW katalogu _includes<\/span> znajduj\u0105 si\u0119 pliki z r\u00f3\u017cn\u0105 tre\u015bci\u0105, kt\u00f3re mo\u017cna w\u0142\u0105cza\u0107 do szablon\u00f3w. Taki nag\u0142\u00f3wek mo\u017ce by\u0107 wykorzystany na r\u00f3\u017cnych stronach, a wi\u0119c warto go wydzieli\u0107 do osobnego pliku. Przy okazji mo\u017cesz wstawi\u0107 nazw\u0119 firmy zamiast \u201ePurple Buzz\u201d oraz usun\u0105\u0107 te elementy, kt\u00f3re nie b\u0119d\u0105 wykorzystane. W Twoim przypadku b\u0119d\u0105 to odno\u015bniki do innych stron, ukryte pod ikonami z prawej strony nag\u0142\u00f3wka.<\/p>\nAby wykorzysta\u0107 plik z katalogu _includes<\/span> w szablonie, u\u017cyj polecenia:<\/p>\n{% include header.html %}<\/code><\/pre>\nPolecenie to powinno zast\u0105pi\u0107 ca\u0142\u0105 tre\u015b\u0107 nag\u0142\u00f3wka w pliku home.html<\/span>.<\/p>\n<\/span>Krok 6 \u2013 tworzenie i wykorzystywanie danych (kolekcji)<\/span><\/h2>\nWykorzystanie fragment\u00f3w w szablonach to nie koniec mo\u017cliwo\u015bci silnika Liquid u\u017cywanego przez Jekylla. Spr\u00f3buj zast\u0105pi\u0107 menu, widoczne w nag\u0142\u00f3wku, poprzez dane.<\/p>\n
Czym s\u0105 dane? W Jekyllu mo\u017cesz zapisywa\u0107 dane o r\u00f3\u017cnych kolekcjach (uporz\u0105dkowanych zbiorach) w plikach zamieszczanych w katalogu _data<\/span>, w formacie YAML. Wykorzystaj t\u0119 funkcjonalno\u015b\u0107 do uproszczenia procesu zarz\u0105dzania menu w nag\u0142\u00f3wku.<\/p>\nKa\u017cda pozycja menu posiada swoj\u0105 nazw\u0119 oraz URL, czyli adres. Utw\u00f3rz wi\u0119c w katalogu _data<\/span> plik top_menu.yaml<\/span> o nast\u0119puj\u0105cej tre\u015bci:<\/p>\n- name: Nasza firma\n url: \/\n- name: O nas\n url: \/about\n- name: Kontakt\n url: \/contact<\/code><\/pre>\nAby wykorzysta\u0107 te dane w pliku header.html<\/span>, zast\u0105p kod HTML do renderowania menu (poszczeg\u00f3lne pozycje s\u0105 renderowane jako elementy li listy) nast\u0119puj\u0105c\u0105 p\u0119tl\u0105:<\/p>\n<\/code><\/pre>\n{% for item in site.data.top_menu %}\n <li class="nav-item">\n <a class="nav-link btn-outline-primary rounded-pill px-3" href="{{ item.url }}">{{ item.name }}<\/a>\n <\/li>\n{% endfor %}<\/code><\/pre>\nKolekcja danych zapisana w pliku top_menu.yaml<\/span>\u00a0dost\u0119pna jest w szablonie jako dane (ang. data) przypisane do strony (ang. site).<\/p>\nW analogiczny spos\u00f3b mo\u017cesz zarz\u0105dza\u0107 innymi kolekcjami, np. artyku\u0142\u00f3w, do kt\u00f3rych linki b\u0119d\u0105 udost\u0119pniane na stronie. Jako dane mo\u017cesz te\u017c zapisa\u0107, np. informacje do kontaktu (adres biura firmy, numer telefonu etc.). Generalnie warto w tej postaci zapisywa\u0107 to, co mo\u017ce si\u0119 zmienia\u0107 niezale\u017cnie od szablonu (w przypadku CMSa takie dane by\u0142yby zapisywane w bazie danych).<\/p>\n
<\/span>Krok 7 \u2013 tworzenie szablonu podstrony i dodawanie tre\u015bci<\/span><\/h2>\nKolejnym etapem poznawania mo\u017cliwo\u015bci Jekylla b\u0119dzie tre\u015b\u0107 strony. Na stronie g\u0142\u00f3wnej nie ma tre\u015bci, ale s\u0105 tam odno\u015bniki do podstron. W szczeg\u00f3lno\u015bci jest odno\u015bnik do podstrony \u201eO nas\u201d. Mo\u017cesz j\u0105 wykona\u0107, wykorzystuj\u0105c wzorzec strony z tre\u015bci\u0105 dost\u0119pny w gotowym szablonie HTML\/CSS.<\/p>\n
Post\u0119puj\u0105c analogicznie, jak poprzednio, umie\u015b\u0107 w katalogu _layouts<\/span> plik o nazwie default.html<\/span>. Plik ten nale\u017cy po prostu skopiowa\u0107 (odpowiednio zmieniaj\u0105c nazw\u0119) z szablonu HTML\/CSS, z pliku work-single.html<\/span>.<\/p>\nWarto por\u00f3wna\u0107 tre\u015b\u0107 plik\u00f3w default.html<\/span> i home.html<\/span>. Robi\u0105c to zauwa\u017cysz, \u017ce s\u0105 one bardzo do siebie podobne (zawieraj\u0105 wiele podobnych fragment\u00f3w). Oznacza to, \u017ce nale\u017ca\u0142oby wszystkie te fragmenty przenie\u015b\u0107 do osobnych plik\u00f3w w katalogu _includes<\/span>, a zawarto\u015b\u0107 tych plik\u00f3w w\u0142\u0105czy\u0107 do szablon\u00f3w default.html<\/span> i home.html<\/span> przy pomocy komendy {% include %}<\/span>. Jest to niezb\u0119dne, gdy\u017c w przypadku modyfikacji kt\u00f3rego\u015b z tych fragment\u00f3w, zmiany b\u0119d\u0105 od razu \u201ewidoczne\u201d we wszystkich szablonach, w kt\u00f3rych dany fragment jest wykorzystywany. Mo\u017cesz tak post\u0105pi\u0107 z sekcj\u0105 head<\/span> oraz ze stopk\u0105 (ang. footer<\/span>):<\/p>\n
![\"por\u00f3wnanie](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/Porownanie-300x161.png\" "\\"\\"")
<\/a><\/p>\n![\"wygl\u0105d](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/ONas-300x210.png\" "\\"\\"")
<\/a><\/p>\n![\"Roman](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/08\/tomek-primke-1.png\" "\\"\\"")
<\/div>\n