Webflow: Pozostałe Kolekcje

0:00Częstym problemem dla osób początkujących

0:02jest zrozumienie w ogóle tego, jakie kolekcje powinny one stworzyć?

0:05Co w tych kolekcjach powinno się znaleźć?

0:07Dlaczego akurat stworzyłem kolekcję dla kategorii? A dlaczego np.

0:12nie będę tworzył kolekcji, aby opisać posty,

0:14które są promowane jako featured? No i to jest bardzo proste

0:19wbrew pozorom. Natomiast, jeżeli się ogląda

0:21biernie wideo, to rzeczywiście może to się wydawać skomplikowane

0:24dlaczego podjąłem taką, a nie inną decyzję. Ale jeżeli trochę głębiej się nad tym

0:28zastanowisz, to okaże się, że to wszystko jest bardzo proste i uzasadnione.

0:32Przede wszystkim powinieneś zastanowić się

0:34nad tym, jakie dane na Twojej stronie są dynamiczne. Co to znaczy, że są dynamiczne?

0:40To znaczy mniej, więcej tyle, że będziemy w stanie te dane na każdej z podstron podmienić

0:46na inne lub też wygenerować n ilość podstron np.

0:50dla blog postów, z których każda będzie inna, czyli będziemy mieli jeden

0:55ogólny Master page, jeden format strony, ale w to miejsce wstrzykniemy sobie dynamiczne dane, w

1:01to miejsce wstrzykniemy dynamiczny obrazek, w to miejsce możemy wstrzyknąć dynamiczne moduły.

1:05Więc zastanawiamy się, które z tych danych mają być dynamiczne.

1:08Następnie grupujemy. Jak je grupujemy?

1:11Jeśli weźmiemy pod uwagę strukturę posta, no to post jest w pewien sposób opisany.

1:16Zawsze taka kolekcja danych posiada szereg właściwości, które są dla niej unikalne.

1:21Na ogół najtrudniejszym dla nas rozróżnieniem jest to, co powinno się

1:24znaleźć jako element jednej kolekcji danych, versus

1:27czy powinniśmy z tego zrobić osobną kolekcję.

1:30Chciałbym wytłumaczyć Ci to na podstawie tagów oraz tego specjalnego

1:35tagu featured, który mamy dla opisania tylko niektórych postów.

1:38Chodzi o to, że każdy z naszych postów może być przyporządkowany do jakiejś kategorii np.

1:44Software, a dodatkowo może być opisany

1:47tagami, takimi jak przykładowo design, czy typography.

1:50Jeszcze dodatkowo może być

1:52może mieć ustawioną wartość, jeżeli featured, czyli, że jest promowane.

1:57Pytanie, czy ta wartość featured to właśnie np.

1:59element samego posta, czy to jest

2:01właściwość tego posta w kolekcji postów, czy to jest na przykład właściwość tego

2:06tagu w kolekcji tagów i, czy w ogóle tagi to powinny być też elementy kolekcji postów

2:12czy powinny one stanowić zupełnie odrębną kolekcję.

2:16Odpowiedź na to pytanie sprowadza się często do tego, że zastanawiamy się czy tak

2:21naprawdę poza obiektem postu te rzeczy w ogóle mają sens.

2:24Czyli przykładowo, gdybyśmy mieli tagi, stworzenie z nich osobnej kolekcji

2:28dawałoby nam tę zaletę, że mielibyśmy stworzony taki zewnętrzny słownik np.

2:33design, typography i wszystkie inne rzeczy, które moglibyśmy przypisać na naszej stronie

2:37nie tylko do blog postów.

2:39Może będziemy mieli jakieś profile autorów, którym chcemy przypisać tagi, może będziemy

2:43mieli jeszcze inne rzeczy, w których te tagi mogą zostać użyte.

2:46Na ogół listy, gdzie mamy słowniki opisane dodatkowymi właściwościami, powinny

2:52stanowić zawsze osobne kolekcje. W tym przypadku też rzeczywiście tak będzie.

2:56I wydaje mi się, że rozsądnym pomysłem jest stworzenie osobnej kolekcji na wszystkie

3:00tagi, które będą swoistym słownikiem, a dodatkowo wskazuje na to jeszcze jedna

3:05rzecz, która, co prawda nie jest ujęta w tym projekcie, który stworzyłem, ale każdy z

3:09tych tagów powinien mieć jakieś właściwości.

3:11Mianowicie chciałbym, żeby każdy z nich miał inny kolor.

3:14Jeżeli już dochodzimy do takiej zależności, że mamy element np.

3:19tag, ale on musi być opisany dodatkowo kolorem,

3:22No to jest kolejna wskazówka na to, że

3:24najlepiej jednak będzie zrobić osobną kolekcję.

3:26No bo tak, to w samej kolekcji blog postów

3:29musielibyśmy stworzyć dwie rzeczy, dwa pola.

3:32Pierwsze to by było tag, a drugie by było tag kolor.

3:35I to by było trochę bez sensu.

3:36Chodzi o to, żeby mieć właśnie w jednym miejscu tag, który już będzie opisany

3:41właściwym kolorem. Co w przypadku featured? Featured jest nawet mocniej związany z

3:46postem, niż tag. Czy powinien to być osobny tag?

3:50Czy raczej powinna to być osobna funkcja posta?

3:53W zasadzie możemy zrobić to na różne sposoby.

3:55Na pewno nie będziemy z tego tworzyć jednej odrębnej kolekcji, bo ten tag featured

3:59nawet nie jest opisany jakimiś dodatkowymi właściwościami.

4:03Moim zdaniem powinno to należeć do posta i

4:06to w poście powinniśmy zadecydować czy post jest featured, czy nie.

4:09Na ogół jeśli mamy takie rozróżnienie

4:11prawda/fałsz, to nie ma, co tworzyć na to zewnętrznej kolekcji tylko po prostu

4:16będzie to flaga dołączona, czyli takie pole, dołączona do kolekcji postów i będziemy

4:20mogli kliknąć OK ten post jest featured i w naszym przypadku chyba to jest takim

4:24najtrudniejszym rozróżnieniem, nad którym ja też się zastanawiałem jak to najlepiej

4:28zrobić. Inne rzeczy są w miarę oczywiste np.

4:31kategorie. Raczej wiemy, że trzeba było z

4:33tego zrobić osobne kolekcje, chociażby dlatego, żeby można było łatwo je

4:37rozszerzać o nowe kolejne kategorie, które dojdą i będą wtedy np.

4:40pojawiać się w menu, a my będziemy mogli przyporządkować wiele postów do jednej

4:44kategorii. Więc na pewno nasza decyzja to osobna kolekcja.

4:47Autorzy - też na pewno osobna kolekcja. No bo

4:51chcemy mieć wielu lub jednego autora przypisanego do konkretnego posta i fajną

4:56rzeczą w Webflow jest też to, że my kolekcje będziemy mogli wiązać

5:00ze sobą. One mogą mieć do siebie połączenia, czyli dane pole, takie jak autor, będzie

5:05mogło być z pomocą opcji link, czy Multi Link, podpięte do posta, co oznacza, że z

5:10postem będziemy mogli skojarzyć jednego lub wielu autorów.

5:13No i w zasadzie teraz już chyba trochę lepiej to rozumiesz.

5:17Musimy wybrać obiekty, które mają wspólne

5:19cechy i zrobić z nich po prostu osobne kolekcje.

5:21Obiekty postów, obiekty kategorii, obiekty

5:25takie jak tagi oraz takie jak autorzy. Wydaje mi się, że ta lista kolekcji jest w

5:29miarę kompletna, więc możemy przejść do ich tworzenia.

5:31To jak już sporo mówiliśmy o tagach, to może teraz przygotujemy najpierw kolekcję

5:35tagów tworzę nową kolekcję, wybieram plus. Tworzymy kolekcję, którą nazwiemy Tags

5:40i znowu wpisujemy tutaj najpierw liczbę mnogą, sprawdzamy, czy liczba pojedyncza

5:45i liczba mnoga są odpowiednie. W tym przypadku jednak Collection URL, czyli ten

5:49adres, nie został wygenerowany poprawnie. On raczej powinien być w liczbie pojedynczej,

5:53tak jak mieliśmy poprzednio, czyli mamy coś takiego jak Website, Tag i później będzie

5:57Tak Page, czyli będzie tag typu typografia, typu Design, Development itd.

6:02Ponieważ jest to liczba pojedyncza, tak samo powinien wyglądać nasz adres.

6:06Oczywiście jest to jakiś zabieg kosmetyczny, nic obowiązkowego, ale no tak

6:09to jest. Teraz mamy Name i Slug obowiązkowo. Zostawiamy i jako Custom Field,

6:13dodamy tylko jedno pole i będzie to pole Color.

6:16Możemy tutaj wstawić pole, które będzie musiało przyjąć wartość koloru

6:20i Webflow jeszcze nam pozwoli wybierać ją właśnie z fajnego color pickera jako label po

6:26prostu możemy wpisać tag kolor i nie wpisuję Help tekstu.

6:30To pole będzie wymagane, więc zaznaczamy sobie This field is

6:33required i wybieramy polecenie Save.

6:35Chciałbym, żeby każdy tag był opisany kolorem.

6:38Teraz możemy stworzyć kolekcję. Znowu nie chcę dodawać tutaj przykładowo itemów, chcę

6:42stworzyć swoje własne i może stworzymy kilka tagów np.

6:46Development.

6:47Damy mu konkretny kolor, musimy tutaj posłużyć się wartością szesnastkową.

6:51Wybieram polecenie Create, następny tag, klikam New tag i tym razem stworzymy Tag,

6:56który będzie się nazywał Design i również stworzymy dla niego kolor.

7:00Możemy ten kolor wkleić albo możemy kliknąć na color picker i wybrać z pomocą color picker'a. Ja wkleję ponieważ

7:05już mam przygotowany kolor dla tego tagu. Create i ostatni tag, który wystawimy to może być np.

7:11Typography. Skorzystamy z Typography,

7:13tak będzie wyglądała struktura linków.

7:15Jeśli chodzi o kolor dla typography, to wybierzmy jakiś kolor np.

7:19kolor czerwony jest OK. Zostawmy to.

7:23Następnie wybieramy polecenie Create i następna kolekcja jest stworzona.

7:26Teraz nauczmy się tworzyć kolekcje z szablonów. Wybieram nową kolekcję

7:30i będę chciał stworzyć autorów. Tym razem

7:32jednak wybiorę Collection Templates i jest tutaj akurat taki szablon z autorami.

7:36W momencie, gdy go dodam, zobacz, że mamy

7:38Authors w liczbie mnogiej, tak jak powinno być.

7:40Następnie Author i mamy Author\AuthorPage, te strony zostaną wygenerowane, a w nich będą

7:45mogły się znaleźć poza Name i Slug takie pola jak np.

7:49Bio, które jest typu Rich text.

7:50Później mamy podsumowanie Bio, które jest tekstem tyle, że ono ma właściwość Multi

7:55line, czyli możemy tutaj więcej linii wrzucić.

7:58Mamy Picture, czyli obrazek z autorem.

8:01Jego adres e-mail i jeszcze linki - to są

8:03pola typu link i są to linki do Twittera i do Facebooka. Wybieram polecenie Save.

8:09Zobacz wszystkie te pola były opcjonalne, w

8:11związku z tym nie będziemy musieli ich wypełniać.

8:13Jeżeli taka struktura danych w Autorze nam

8:16odpowiada to możemy po prostu przejść do sekcji Create Collection.

8:19No i znów automatyczne wypełnienie danych też pomoże nam w tym przypadku, bo jeśli

8:23wybiorę polecenie Add Five Items to w tym momencie automatycznie Webflow dla nas wypełni

8:29wszystkie te pola, które są wewnątrz kolekcji.

8:32Czyli stworzy dla nas pięć item'ów

8:34kolekcji i dla każdego z nich wypełni odpowiednie pole, czyli pole Name,

8:38Slug, następnie to pole Bio, kolejne mamy Bio summary, Picture, które też zostało wstawione.

8:45No i zobacz, że jest to na tyle sprytne, że

8:47w przypadku autorów wstawia zdjęcia ludzi i wstawia imiona ludzi. Naprawdę.

8:51te przykładowe wygenerowane dane są w tym przypadku w punkt.

8:54No to możemy teraz przejść do stworzenia kolejnej kolekcji i mamy gotowych autorów.

8:59Wybieram plus, tworzę nową kolekcję i tym razem stworzę kolekcję blog postów, więc

9:04nazwę ją Blog posts i mogę co prawda skorzystać znów z pre-definiowanego szablonu,

9:09ale w wielu przypadkach nie będziesz miał go do dyspozycji.

9:12Stwórzmy to samodzielnie.

9:13Tutaj jest liczba mnoga dobrze stworzona i

9:15dobrze stworzona liczba pojedyncza, więc zostawmy.

9:18Jeśli chodzi o Collection URL nie do końca mi się on podoba blog posts blog post page,

9:22mogłoby to być po prostu Articles Albo np.

9:25zwyczajnie blog, więc mogę to zostawić w

9:27ten sposób i poza nazwą i slugiem będziemy potrzebowali sporo różnych Custom fields'ów.

9:33Najprostsze to będą obrazki. Jak

9:35wspomniałem, nasz blog post będzie potrzebował obrazka poziomego

9:40oraz obrazka pionowego, który być może też przyda nam się na potrzeby social media.

9:44Co prawda Webflow jest w stanie przegenerować nam obrazki albo wstawić coś takiego jak

9:48Multi image i w ten sposób na przykład będą to obrazki przydatne do galerii, którą

9:53zaembedujemy, możemy wykorzystać gotowy widżet galerii.

9:55Następnie podpiąć tamten Multi image i obrazki będą rotowane w galerii.

10:00W tym przypadku jednak będziemy chcieli wstawić standardowe pole Image, więc wstawiamy

10:04sobie Image, jego label to będzie image i podamy tutaj jeden do jednego, czyli to

10:09będzie ten obrazek w proporcjach 1 do 1, kwadratowe.

10:12Wybieram Save Field, a następnie dodaję sobie kolejny image i będzie to image

10:1716 na 9, więc będziemy chcieli go mieć w tych proporcjach.

10:21Jeżeli dodalibyśmy jakiś kolejny tekst np.

10:25moglibyśmy wpisać Preffered i wpisać rozdzielczość 1600 na 900 np.

10:30w ten sposób

10:31to moglibyśmy dodatkowo te pola opisać. Wybieram polecenie Save Field.

10:35Chciałbym, żeby pole z obrazkiem, przynajmniej tym jednym, było obowiązkowe.

10:38Dlaczego? Bo on będzie wyświetlał się wszędzie

10:41tutaj w podglądzie posta, jak również w miniaturkach,

10:43więc chcę, żeby ktoś niekoniecznie zapomniał o tym jak będzie dodawał.

10:47Zapisuję to pole, a następnie przechodzę do

10:49stworzenia kolejnych pól i będą to pola właściwe dla posta.

10:52Czyli mamy w poście.

10:53Po pierwsze ten ekserpt, czyli taką skróconą wersję, która wyświetlana jest

10:58również tutaj, wyświetlana jest również w tym miejscu.

11:01I mamy też właściwą całą treść posta.

11:03Najpierw stwórzmy sobie kolejne pole, które

11:05będzie blind tekstem i będzie zawierało ten ekserpt.

11:08Możemy wstawić tutaj Multi Line i warto by było dodać minimalną i

11:13maksymalną liczbę znaków, po to żeby dobrze się to wyświetlało.

11:17Przykładowo minimalna ilość znaków, może to

11:20być 100, a maksymalną możemy zrobić na 160 znaków.

11:24I to pole będzie wymagane -

11:26required, a Label tego pola stawiamy sobie jako ekserpt.

11:29Wybieram polecenie Save Field.

11:31Teraz dodaję kolejne, najważniejsze w zasadzie dla nas pole, które będzie całą

11:35treścią posta. Można zrobić to w jednym polu mimo, że treść posta może być złożona,

11:39bo może on zawierać jakieś nagłówki, może zawierać tekst, może też zawierać obrazki.

11:43Ale pole, które jest tutaj odpowiednie jest pole typu Rich text. Możemy wstawiać tu

11:48właśnie takie artykuły, które będą zawierały zdjęcia, nagłówki, akapity tekstu.

11:53I właśnie do tego Rich text służy, więc

11:55dodajemy je jako label, wystawimy tutaj kontent po prostu.

11:59I to także będzie pole wymagane.

12:01Znów warto by było tutaj np.

12:03określić minimalną ilość znaków np.

12:05na 1000, czy coś takiego, żeby te blog posty były rzeczywiście odpowiednio długie.

12:09Nie musimy tego teraz robić. Wybieram

12:11polecenie Save field. I to by było na tyle. Jeśli chodzi o takie pola w pełni statyczne,

12:15czyli te, które są wymagane dla konkretnego posta.

12:18Natomiast to, co jeszcze chciałbym tutaj dodać, to możliwość oznaczenia danego posta,

12:22że jest on promowany, czyli, że ma włączoną opcję featured.

12:26Najprościej jest to zrobić z pomocą dodania kolejnego pola, które będzie polem

12:30Switch. To pole switch będzie nam po prostu przełączać ten featured.

12:35Oznaczymy sobie to właśnie jako featured, wybieram polecenie Save Field i przy

12:39wyborze, przy wydawaniu posta będzie to oznaczone domyślnie na NO.

12:43Ale możemy to włączyć i wtedy przełączy się ten switch na YES, a my na UI będziemy to

12:48sprawdzać i odpowiednio wyświetlać czy chować właściwe elementy graficzne, czyli

12:54to, więc zrobimy sobie to w ten prosty sposób i kolejno będziemy musieli podać

12:59pola dynamiczne, czyli takie, które będą łączyły nasz post z pozostałymi kolekcjami.

13:06Chcemy teraz móc przyporządkować do takiego posta

13:09kategorie, autorów i tagi, więc dodajemy pole i Webflow pozwala nam zrobić tutaj jeden z

13:15dwóch typów pól: Reference albo Multi-reference.

13:17Różnią się tylko tym, że tutaj będziemy

13:19mogli podlinkować jeden rekord z innej kolekcji, a tutaj wiele rekordów naraz.

13:24Klasycznym przykładem pola reference będą

13:26kategorie, ponieważ chcemy mieć przyporządkowaną tylko jedną kategorię do

13:30jednego wpisu, więc wybieramy pole reference, a następnie podajemy label i

13:34radziłbym zrobić go dokładnie takiego samego jak nazwa kolekcji, aczkolwiek w

13:38liczbie pojedynczej, czyli jeśli mamy do przypisania jedną kategorię to

13:43wpisujemy tutaj Category, a następnie wybieramy kolekcje.

13:46Ma być to podlinkowana kolekcja Categories i to pole

13:49będzie obowiązkowe. Wybieram polecenie Save Field i kolejne pole, które będę

13:53chciał stworzyć dotyczy autorów. W zasadzie decyzja nasza biznesowa, czy tworzyć pole

13:58Multi reference czy tworzyć pole reference.

14:00Ja będę miał jednego autora na jeden artykuł na blogu, więc po prostu wybiorę

14:05też pole reference i wpiszę tutaj w liczbie pojedynczej Author.

14:09To pole też będzie obowiązkowe, a kolekcja

14:11którą podlinkuję to kolekcja z autorami. Wybieram polecenie Save Field.

14:14I dodam teraz ostatnie pole Add Field i będzie to pole dotyczące tagów.

14:19I to też jest nasza decyzja czy chcemy, żeby było wiele tagów, czy jeden.

14:22Natomiast, co do zasady, raczej tagów powinno być wiele.

14:26No i twoje myślenie pewnie poszłoby w stronę dodania pola Multi reference, moje

14:30rzeczywiście też i takie pole Multi reference raczej należałoby tutaj dodać. Natomiast

14:35Webflow ma, w kontekście tych pól Multi reference, przynajmniej na razie jedno

14:39ważne ograniczenie i być może będziesz się nad tym zastanawiał,

14:42próbował to zdebugować, mi to zajęło chwilę,

14:45ale okazuje się, że pola Multi reference, przynajmniej na razie,

14:49nie mogą być podlinkowane na stronach statycznych w Webflow.

14:52Co to oznacza? Teraz przejdę do stron po to, żeby pokazać Ci, że mamy tutaj podział

14:56na strony statyczne, ale mamy też coś takiego jak CMS Collection Pages.

15:00To są strony, które Webflow wygenerował dla nas

15:02automatycznie przy tworzeniu kolekcji. Każda kolekcja dostaje w prezencie taką

15:07stronę, która jest pusta, z której możemy, ale nie musimy później skorzystać.

15:11Natomiast ta strona ma pewne wyjątkowe właściwości.

15:14Jeżeli będziemy z niej korzystać, a z niektórych tak np.

15:17ze strony kategorii, to możemy na tych stronach fioletowych, czyli CMS Collection Pages

15:21korzystać z całego dobrodziejstwa CMS, czyli w tym przypadku linkować też rekordy,

15:26które znajdują się w polach typu multi reference.

15:28Niestety, przynajmniej na czas kiedy ja nagrywam ten materiał,

15:31tych pól typu multi reference nie da się linkować na statycznych stronach. W naszym przypadku

15:36będzie to poniekąd istotne dlatego, że chciałbym, żeby na statycznych stronach np.

15:40znalazły się też linki do tagów, które będą wyświetlane na kafelkach, a w przypadku

15:45pola Multi reference na razie nie mógłbym tego zrobić.

15:47Możesz sprawdzić czy w Webflow już się to zmieniło i czy pola Multi reference można linkować na

15:51statycznych stronach. Natomiast tymczasem, w celu pokazania Ci wszystkiego co

15:56tutaj jest dostępne, po prostu stworzyłem to pole typu Single reference i teraz mamy

16:01przygotowaną całą strukturę naszej kolekcji blog postów. Wybieram Create

16:04Collection i teraz będę mógł wypełnić te posty item'ami.

16:08Akurat w tym przypadku to ogromna

16:10oszczędność czasu, w momencie, gdy będę mógł dodać sobie do takiego

16:13nowo stworzonego blog post Collection właśnie 10 przykładowych wpisów.

16:18Wszystkie pola zostaną uzupełnione.

16:19Mamy fajne tytuły, nawet dokładnie pasujące do takich tytułów blog postów

16:24The History of web design. Mamy wygenerowaną nazwę, w ogóle Webflow fajnie tutaj tę

16:28nazwę dobrał do tytułów z postów. Mamy również

16:32slug, mamy link, a także zdjęcia. Może one nie są

16:35jakoś idealnie dobrane, no, ale przynajmniej są tutaj załadowane i są nawet dwa różne

16:40zdjęcia w różnych jakościach. Mamy zdjęcie 1:1 i 16L9.

16:44Mamy ekserpt i mamy również cały kontent, a nawet w tym Rich content

16:48zostały wystawione jakieś nagłówki, jakiś cytat. W każdym poście będzie to trochę

16:52inaczej wygenerowane. Również będzie zaznaczone, bądź nie, featured.

16:56Tu akurat jest odznaczone i mamy też wybraną kategorię, autora i przypisany tag.

17:00Więc wszystko zostało fajnie wygenerowane.

17:04Ja mogę zapisać albo wybrać Cancel.

17:07Wszystkie moje kolekcje są gotowe.

17:09To znaczy, że mamy stworzone kolekcje, które

17:11ewentualnie później będziemy oczywiście mogli jeszcze edytować czy zmieniać.

17:15Będziemy mogli też je nawet usunąć, ale

17:16pamiętaj o tym, że, aby usunąć całą kolekcję, najpierw trzeba usunąć jej wszystkie itemy,

17:20więc trzeba wejść w każdy item, wybrać polecenie delete, a dopiero później można wejść we

17:24właściwości kolekcji i wybrać polecenie Delete Collection.

17:27Opcja View Collections pozwoli nam zobaczyć, gdzie one są wyświetlane na stronie, ale, ponieważ

17:30jeszcze ich nie ma, to tutaj nic nie będzie.

17:32Jednym słowem mamy to zrobione.

17:35Jeśli chodzi o wstępny setup naszych

17:37kolekcji oraz pól, które znajdują się w środku.

17:39No i teraz po to, żeby te zmiany były widoczne i byśmy mogli korzystać z tych

17:44gotowych kolekcji na stronie, po prostu musimy naszą stronę raz jeszcze

17:48opublikować lub jeśli jej nie opublikowaliśmy jeszcze nigdy no to musimy

17:51to zrobić na subdomenie Webflow albo naszej własnej domenie. Wybieram polecenie Publish.

17:56I w tym momencie są publikowane razem ze

17:58stroną pod spodem w bebechach te wszystkie kolekcje. Będziemy mogli z nich korzystać w

18:02kolejnych lekcjach, w których zaczniemy tworzyć struktury stron i je wyświetlać.

18:06Do usłyszenia.