Webflow: Dynamiczne dane w Menu

0:00Cześć! Witaj w kolejnej lekcji, gdzie

0:01zaczynamy dokładnie tam, gdzie skończyliśmy poprzednio.

0:04Tworzymy sobie menu i chcielibyśmy w tym

0:06menu po pierwsze wyświetlić wszystkie kategorie Software, Marketing, Mobile i Blockchain.

0:11A w momencie, gdy ktoś doda tutaj nową kategorię chcemy, żeby także automatycznie

0:15się pojawiła w menu lub jeżeli dokonamy jakichkolwiek zmian np.

0:18w nazwach tutaj też chcielibyśmy żeby pojawiło się to w menu.

0:21W związku z tym jak można takie kategorie spiąć z naszym menu?

0:26Przejdźmy do menu.

0:27Na początek będę chciał usunąć te nav linki, które już się tutaj znajdują.

0:31Nav link Blockchain, też nie będzie mi potrzebny i zrobię je poniekąd na nowo.

0:36Zrobię to w taki sposób, że dodam tutaj

0:38element, który będzie czerpał dane z CMSa. Jeśli wciśniesz A, tutaj znajdziesz sekcję

0:43CMS i znajduje się tutaj coś takiego jak Collection list. To jest najważniejszy

0:49element, który pozwoli nam dynamicznie połączyć dane z CMSa, z tym co znajduje

0:54się u nas na stronie. Więc wybieramy zawsze Collection list

0:57i dodajemy Collection list wrapper. Na początku ustawiamy jego właściwości w

1:03ten sposób, żeby wskazać, z której kolekcji chcemy w ogóle korzystać.

1:07Mamy tutaj listing wszystkich kolekcji, które stworzyliśmy. My chcemy korzystać z danych,

1:11które znajdują się w kolekcji kategorii, więc wybieram opcję Categories

1:15i teraz automatycznie powstało tyle item'ów, czyli tyle elementów ile mam w mojej

1:19kolekcji. Tutaj jest Blockchain i tu mamy Software, Marketing.

1:22Co prawda tego nie widać, ale są tutaj

1:24właśnie odwzorowane wszystkie elementy z CMSa podlinkowane właśnie w dobre miejsce, a to

1:30jak prezentuje się struktura to mamy jeden taki duży wrapper na dane.

1:33Następnie mamy listę z tej kolekcji i każdy element kolekcji, czyli osobno

1:38Software, Marketing itd jest reprezentowany przez taki szablon Collection item.

1:44To znaczy, że my ten szablon Collection item możemy ostylować.

1:48Możemy też dodawać do niego rozmaite elementy i będzie to automatycznie

1:52wyświetlane dla każdego kolejnego elementu, który tutaj się znajduje.

1:56To co możemy zrobić to nawet

1:58skorzystać z tego gotowego nav linka, który mamy i wkleić go do Collection itemu.

2:03Zobacz, że wszędzie zostało wklejone to All posts. Zaraz się tym zajmiemy, ponieważ

2:08chcemy, żeby taki nav link zawierał dane, które dynamicznie pobierają

2:13nazwę kategorii, ale chcemy też, żeby linkował w odpowiednie miejsce.

2:18Czyli w tym momencie nav link, który skopiowałem linkuje do tej strony

2:22Blog All Posts.

2:23My chcemy to zmienić i chcemy linkować do poszczególnych stron kategorii.

2:28Czyli, gdyby to był Blockchain,

2:30chcemy wyświetlić wszystkie posty, które znajdują się w kategorii Blockchain.

2:35W przypadku wszystkich postów tworzyliśmy nową stronę Blog All Posts i skonfigurujemy

2:41ją sami, a następnie tam będziemy wstrzykiwać wszystkie posty.

2:44Natomiast w przypadku gotowych kolekcji

2:47mamy pewne ułatwienie od Webflow, mianowicie w momencie, gdy tworzymy kolekcję

2:51automatycznie Webflow generuje dla nas strony połączone z tą kolekcją,

2:55czyli mamy sekcję CMS Collection Pages i w momencie, gdy stworzyliśmy Blog post, tagi,

3:00Autorów i kategorie Webflow automatycznie wygenerował dla nich strony. Te strony są

3:06puste, ale one rozumieją to jak jest skonstruowana cała kolekcja i pozwolą nam

3:12właśnie na przykład wyświetlać dane dynamicznie pochodzące tylko z tej

3:17konkretnej kategorii w ramach konkretnej kolekcji.

3:20Teraz pokażę Ci dokładnie jak to działa.

3:22Na razie przejdźmy jeszcze raz na Bloga

3:24i spróbujmy ustawić te linki do odpowiednich stron.

3:26To co moglibyśmy tutaj wykorzystać

3:28w link settings to jest URL, aczkolwiek,

3:32w tym przypadku my nie chcemy kierować na zewnętrzne URL.

3:34Co prawda jest tutaj fioletowe pole i fioletowy kolor powinieneś kojarzyć właśnie

3:38ze wszystkimi dynamicznymi danymi z CMSa, jak również tę małą ikonkę bazy danych.

3:43Natomiast ta specyficzna opcja Get URL from

3:45Categories, powodowałaby, że byłoby to linkowane do URLa, który wprowadzimy

3:52sobie w definicji jako pole w konkretnej kategorii.

3:56To znaczy, że jeśli w CMSie mielibyśmy jeszcze jedno Custom

4:00Field, które byłoby typu URL, moglibyśmy wpisać tu jakiś custom'owy adres i

4:04wtedy właśnie moglibyśmy stąd wybrać Get URL, a następnie wskazać to pole typu URL

4:09do, którego chcemy linkować i dynamicznie zostałoby to wstawione we wszystkie linki.

4:13Ale my tego nie chcemy, bo my nie mamy

4:15jakichś zewnętrznych URLi, na które chcemy przekierowywać. My chcemy przekierowywać do

4:19tych dynamicznie wygenerowanych, automatycznych stron CMSa

4:23i one pojawiają się tutaj znów oznaczone kolorem fioletowym.

4:26Tak jak wszystko z CMSa jako Collection Page. Więc nie tworzymy kolejnej strony,

4:32a linkujem do Collection Page i do jakiej strony kolekcji chcemy linkować.

4:36Jest tutaj taka opcja Current category,

4:39czyli do tej bieżącej kategorii, tutaj jest Software, Marketing itd.

4:43Będziemy mogli podlinkować i wtedy te posty zostaną na odpowiedniej stronie

4:49przefiltrowane, my jeszcze o to później zadbamy. Więc linkujemy tutaj do strony kategorii.

4:53Następnie mamy też taką opcję Get text from categories

4:57I możemy to kliknąć.

4:58Następnie Select field

5:00i wybieramy Name, czyli nazwę. Jak widzisz teraz wszystkie nazwy wskoczyły

5:05już we właściwe miejsce, czyli Software, Marketing, Mobile oraz Blockchain.

5:09To co osiągnęliśmy tym zabiegiem, to mamy skonfigurowane menu w taki sposób, że jeżeli

5:14dokonamy jakichkolwiek zmian w CMSie np.

5:16zmienimy nazwę Software na jakąś inną.

5:18Te zmiany zostaną tutaj odwzorowane.

5:20Jeśli dodamy kategorię, zostanie ona dodana do menu.

5:24Natomiast to jak menu będzie działać, to po

5:26kliknięciu w każdą z kategorii, zostaniemy przeniesieni do stron obecnej, bieżącej

5:31kategorii, czyli do tych stron, które zostały wygenerowane jako Categories template,

5:35a to co na tych stronach będzie się znajdować to

5:37oczywiście my zrobimy sami w Webflow i zdefiniujemy to w odpowiedni sposób.

5:42Na razie mamy dobrze skonfigurowane menu,

5:44tyle, że ono jeszcze nie wygląda jakoś rewelacyjnie,

5:47w związku z tym powinniśmy sam Collection list wrapper trochę zmienić, jeśli chodzi o style.

5:51Tutaj mamy zresztą do wyboru zobacz Layout. Mamy layout

5:55rozciągający się, layout w kolumnach, które możemy zrobić np.

5:59w ten sposób. Natomiast my zamiast korzystać np.

6:02z takiej opcji, wybierzemy po prostu tę wersję, ale zmienimy style, czyli wybierzemy

6:08w zasadzie nawet nie dla całego Collection list wrappera, czy tylko dla Collection list

6:12możemy wybrać Layout flex i to już będzie dobrze

6:15wypozycjonowane. Natomiast, jeśli chodzi o Nav menu też musimy zmienić Layout na flexi

6:21tutaj jeszcze upewnijmy się, że znajduje

6:24się w środku. Teraz wydaje mi się, że wszystko jest OK.

6:27Natomiast warto by było dopracować warianty responsywne menu, bo tutaj nie wyświetla się

6:31to jakoś idealnie i moim zdaniem na przykład można by było,

6:35może nawet ten kontener, ustawić na flexa i wypozycjonować go np.

6:39do prawej.

6:40Wydaje mi się, że teraz już jest naprawdę fajnie, bo w tym momencie mamy możliwość

6:45kliknięcia w tę ikonkę i zobaczmy jak wyświetla się to menu.

6:49No prawie dobrze, tylko trzeba wszystko

6:51jeszcze ustawić w jednej linii. Ewentualnie w ogóle np.

6:54dla tego wariantu tabletowego,

6:55moglibyśmy jeszcze nie pokazywać tej wersji mobilnej menu,

6:59bo prawdopodobnie tutaj się zmieszczą wszystkie te elementy.

7:03Jeżeli przejdę do nav bara, to mogę w jego

7:06ustawieniach zadecydować, że ma to się pojawiać dopiero od

7:10Mobile landscape i wygląda na to, że wszystko

7:12się mieści. Także zostawiłbym tutaj w wersji tabletowej jeszcze tak jak jest.

7:16Zwłaszcza, że to jest najwęższa wersja.

7:18Kolejno w tej wersji już mamy właśnie wersję wariant z przyciskiem i to co

7:23pozostaje nam do zrobienia, no to ostylowanie w zasadzie tego menu.

7:27Ponieważ było to robione w kursie podstawowym, już nie będę ci tego dokładnie

7:31tłumaczył i pokazywał, ale jeśli o mnie chodzi,

7:33dla navbara po prostu zrobiłbym to w ten

7:36sposób, że otwórzmy sobie menu żeby to dobrze ostylować,

7:39że tutaj oczywiście potrzebowalibyśmy jakiś

7:42większy margines. Możemy dać margines z lewej strony np.

7:4534. Potrzebowalibyśmy także umieścić te

7:48elementy, czyli całe Collection list, zmienić jego układ na Vertical i już

7:54wyglądałoby to nieźle. Jeśli chcemy na środku,

7:56możemy też zrobić to na środku i tak samo

7:58ten nav link moglibyśmy skonfigurować tak, aby tekst był wyświetlany na środku.

8:02No i już wygląda to dużo lepiej. Teraz jeśli podejrzymy sobie to, rozwiniemy menu.

8:07No to wygląda OK.

8:08Natomiast nie będę się na tym skupiał

8:10szczególnie, ponieważ wydaje mi się, że możesz spokojnie sobie to dostylować sam i

8:15ten kurs ma za zadanie pokazać Ci, jak najwięcej CMSa, a w kursie podstawowym

8:20omawialiśmy już wszelkie rzeczy związane z układem i stylowaniem, także w tej lekcji to

8:25wszystko. Udało nam się stworzyć funkcjonalne menu, które będzie dodatkowo

8:28linkpwało do odpowiednich sekcji, jeśli je skonfigurujemy.

8:31No i teraz możemy przejść do kolejnych części naszej witryny.

8:34Do usłyszenia.