Webflow: Kolekcja Kategorii

0:00Cześć! Witaj w kolejnej lekcji, w której zaczniemy modelowanie struktury naszej

0:03bazy danych. To jest coś, co warto dość dobrze przemyśleć, ponieważ wybory,

0:07których dokonamy teraz, będą wpływały na to jak nasze dane będą ze sobą się

0:11komunikować, a także jak będą prezentowane w obrębie naszej strony.

0:15Przechodzimy najpierw do sekcji CMS i

0:17wybieramy pierwszą kolekcję, którą dodamy. Jak wygląda struktura bazy danych?

0:21Po pierwsze taką generalną kategorią są kolekcje.

0:25Jeśli znasz strukturę bazy danych, możesz

0:27to porównać do tabel w bazie danych, a jeśli chcesz przełożyć to na jakiś prosty

0:32arkusz kalkulacyjny, to w arkuszu kalkulacyjnym także mamy tabele.

0:35Osobne arkusze, które są dostępne jako

0:37zakładki i posiadają zarówno rzędy jak i kolumny i to właśnie będą nasze kolekcje.

0:42Kolekcje danych dla bloga będą to np.

0:44wszystkie posty, ale osobno będą to też kategorie, autorzy oraz tagi.

0:48Dodajmy w związku z tym naszą pierwszą kolekcję. Kolekcję tworzymy w ten sposób,

0:53że albo bazujemy na jakimś predefiniowanym szablonie.

0:56W przypadku blogów mamy do wyboru autorów,

0:58kategorie, blog posty albo tworzymy to wszystko od podstaw. My

1:02oczywiście zrobimy to od podstaw, tak żebyś mógł się tego lepiej nauczyć.

1:05Najpierw ustawiamy Collection name, czyli nazwę kolekcji.

1:09Może to być nazwa ze stacjami np.

1:11może to być nazwa blog posty.

1:12Może to być nazwa kolekcja blog postów.

1:15Może to być, w tym przypadku akurat, kolekcja kategorii.

1:18Ja akurat jestem zwolennikiem nadawania tutaj takich prostych nazw np.

1:24typu Category, ale w tym miejscu wpiszemy sobie Categories w liczbie mnogiej.

1:29Dlaczego? Dlatego, że zaczynamy właśnie w tym

1:32momencie od liczby mnogiej, ale zobacz, że ona jest automatycznie zmieniona też na

1:37wersję singular, czyli wersję pojedynczą. Mamy plural "kategorie" i singular "kategoria".

1:42No i teraz możemy ewentualnie jeszcze

1:45kliknąć tutaj, aby dostosować nazewnictwo, ale ono jest OK.

1:48Czyli wychodzimy od liczby mnogiej. Też będziemy mieli możliwość podejrzenia

1:52jaki będzie URL strony kategorii, która zostanie

1:56automatycznie wygenerowana. Dla każdej kolekcji taka strona będzie

2:00wygenerowane i dostępna w panelu Pages, w panelu stron, a link do tej strony to

2:05będzie nasz adres, a później Slash i nazwa, która jest podana w Collection URL.

2:11Domyślnie jest to nazwa dokładnie taka jaką piszemy tutaj tylko małymi literami.

2:15No, ale gdybyśmy chcieli np.

2:17zrobić ją bardziej intuicyjną, można by było przykładowo zrobić tutaj coś takiego jak

2:21blog, czy blog posty i wtedy wyglądałoby tak: Slash blog i category page.

2:26W naszym przypadku wydaje mi się, że to

2:27jest całkiem sensowne, żeby zostawić tutaj kategorię. Nazwa Category page będzie to

2:33nazwa naszej konkretnej kategorii, która będzie znowu po Slashu.

2:36Warto mieć to na uwadze, ze względu na

2:38pozycjonowanie strony, aby tutaj te tytuły były proste, żeby nie było tutaj jakichś

2:43znaków operatorów, znaczników i, and itd. Jak również, żeby to było przyjazne w

2:49kontekście pozycjonowania i teoretycznie fajnie jakby te elementy były spójne z

2:54tym, co osoby wpisują w wyszukiwarce, jeżeli chcą znaleźć treści na naszej stronie.

2:59Więc zostawiamy tak jak jest i teraz mamy coś takiego jak Collection fields.

3:03To są pola kolekcji, z których podstawowe informacje są obowiązkowe.

3:07Nazwa tego pola, a także Slug, czyli taki skrót, który będzie dostępny w linku np.

3:14tutaj mamy example jak będziemy mieli przykładowo kategorię

3:18marketing to będzie to webflow.com\categories\marketing.

3:23Te tzw. Collection fields, czyli pola kolekcji, są dla nas tworzone Out Of The Box, nie

3:27możemy ich usunąć, możemy jedynie kliknąć w tle trybik, żeby dopracować ich jakieś

3:31preferencje, ale w tym przypadku mamy tu do wyboru tylko możliwość pisania takiego

3:35pomocniczego tekstu, który będzie sugerował co w tym polu powinno się znaleźć i tyle.

3:39Natomiast, jeśli chodzi o sekcję Custom fields

3:42to będą tutaj kolejne pola, które możemy dodać.

3:45W skrócie kolekcja będzie miała opisywać

3:48wszystkie nasze kategorie. W związku z tym oprócz nazwy kategorii, slug'a, jeżeli

3:52chcielibyśmy coś tutaj dołączyć to dodajemy to jako tzw.

3:54Custom field. Ja dodam sobie jedno pole, wybieram

3:57add field i każde z takich pól będziemy musieli określić jeśli chodzi o jego typ.

4:01Czyli mamy pola typu Plain text, czyli

4:03zwykły tekst, mamy Switch'e ON/OFF, czyli takie wartości true/false.

4:07Mamy możliwość przechowywania koloru, mamy jakąś listę opcji, obrazki itd.

4:10Oczywiście, w zależności od tego, co

4:12zawierają te pola, wybieramy właściwą opcję.

4:14W tym przypadku możemy wybrać sobie opcję

4:16Plain text, czyli będziemy chcieli po prostu wstawić opis,

4:19Description takiej kategorii, ale chciałbym też, żeby on był opcjonalny.

4:23W związku z tym nie zaznaczam tego pola "This field is required".

4:26W ten sposób automatycznie będzie

4:28opcjonalny, a Label tego pola to będzie po prostu Description. Typ tego pola.

4:32możemy ustawić na single line, czyli pojedyncza linia albo jeśli miałby to być

4:36jakiś dłuższy opis, wtedy możemy wybrać opcję multi line.

4:39Możemy też zawęzić to do określonej liczby znaków.

4:42Tu możemy podać wartość początkową, a tutaj końcową. Dla tego pola Description

4:46nic z tych rzeczy nie będziemy robić, po prostu wybierzemy polecenie Save field.

4:49Mamy teraz 29 pól, które możemy dodać do tej kolekcji, jako jakieś pola opisujące

4:55właśnie Category, ale my tego w tym przypadku nie potrzebujemy.

4:58My możemy dodać 30 swoich pól, dodatkowo dwa pola są takie podstawowe, czyli

5:03Name i Slug, jeszcze trzy pola są dodawane przez Webflow.

5:06Data stworzenia, data edycji i data opublikowania.

5:10Możemy też taką kolekcję usunąć i to w zasadzie wszystko.

5:13Natomiast podgląd tego jak będziemy

5:14edytować kolekcję, wyświetla się z prawej strony. Mamy podstawowe informacje do

5:18wypełnienia: Name i Slug oraz jedno custom'owe pole, czyli Description.

5:22To wszystko. Wybieram polecenie Create Collection

5:24i w tym momencie, jeśli wybierzemy dodanie

5:275, 10, czy 20 elementów, zostaną one automatycznie dodane przez Webflow.

5:31Ale my nie chcemy tego robić. Wybieramy polecenie Create New Category.

5:34Stworzymy sobie pustą kategorię

5:36i dodamy do niej odpowiednie właściwości czyli podamy

5:40jej nazwę, Blockchain i wtedy automatycznie zostanie wygenerowany Slug, po prostu zamienione są

5:45duże litery na małe, ale gdybyśmy mieli tutaj jakieś np.

5:48dodatkowe frazy, moglibyśmy osobno ustalić

5:51jak ma wyglądać Slug, czyli taka przyjazna wersja pod adres, łatwa do zapamiętania,

5:55krótkie słowa, raczej przyjazne również do

5:57indeksowania w wyszukiwarkach i dokładnie sugerujące to, co znajduje się w nazwie.

6:02Kolejno mamy pole Custom field, gdzie jest

6:05opis, Description, ja wkleję sobie tutaj jakiś naprawdę przykładowy opis.

6:08I teraz mogę stworzyć takie pole. Wybieram polecenie Create. Obok Create mam jeszcze

6:13możliwość opublikować to jako szkic, czyli bez publikowania tych zmian,

6:18mogę po prostu zapisać sobie taki szkic kolekcji i to często jest przydatne.

6:22Szkic takiego item'a, a w tym momencie już mam ten Blockchain do naszej kolekcji dodany.

6:27Widnieje przy nim informacja o tym, że nie jest jeszcze opublikowany, not published, to

6:32znaczy, że nie jest Live, nie będą te dane widoczne na naszej stronie.

6:36Na razie mają one taki status "Staged for publish",

6:38czyli są zakolejkowane do opublikowania, czyli możemy zrobić sobie

6:42draft, możemy zrobić gotowy element, który będzie zakolejkowany.

6:46Natomiast dopiero wtedy, gdy opublikujemy

6:48naszą stronę, to opublikują się też wszystkie zmiany, które wykonaliśmy w kolekcjach.

6:53Tutaj mamy dodatkowo opcję eksportu i importu danych. Jeżeli będziesz pracował na

6:57większych kolekcjach, możesz wyeksportować sobie teraz wzór, taki Boiler plate tej

7:02kolekcji, którą przygotowaliśmy. Jest on w pliku CSV. Teraz możesz otworzyć sobie taki

7:07plik CSV, a następnie wypełnić ten plik danymi, zapisać go, no i zaimportować.

7:11Czasem może być to łatwiejsze niż

7:13wyklikiwanie wszystkiego w interfejsie Webflow.

7:15Zwłaszcza, gdy mamy bardzo dużo item'ów w kolekcji.

7:17A to, jak to wygląda, to jest po prostu struktura pliku CSV.

7:20Ten plik CSV, możemy zaznaczyć

7:22pierwsze dwie kolumny, przejść do sekcji

7:24Data w Excel'u, a następnie wybrać polecenie "Text to Columns".

7:28Wybieramy teraz opcję "Delimited", ponieważ te dane są rozdzielone przecinkiem, więc

7:32zamiast "Tab" wybieramy sobie "Comma", czyli przecinek i wybieramy polecenie "Finish".

7:37Jak widzisz teraz te dane są ładnie rozbite.

7:40Jeżeli, oczywiście będziesz chciał pracować

7:43na takim trybie pliku, możesz to zrobić i później znowu scalić te dane do pliku CSV.

7:49To tak informacyjnie, gdybyś rzeczywiście miał sporo danych do wypełnienia. Natomiast

7:53my będziemy wypełniali za pomocą tego polecenia "New Category"

7:56i teraz wpisujemy tutaj następną kategorię, która nas interesuje.

7:59Może to być np.

8:00Mobile.

8:03I Slug jest w porządku, natomiast jako Description znowu wkleję to samo.

8:07Chwilowo nie będzie mi to potrzebne. Create i tworzymy następną.

8:10To, co jeszcze można ewentualnie zrobić. To

8:12wybrać polecenie SELECT i teraz zaznaczyć sobie jedną z tych

8:15kategorii, a następnie można wybrać opcję usunąć, zmienić ją jako szkic, żeby przy

8:21Publish nie została wgrana na produkcyjną wersję strony, zarchiwizować albo możemy to anulować.

8:26Stworzy sobie kolejny element New no i będzie to Marketing.

8:32Znowu wkleję ten sam opis.

8:34Być może później go zmienimy, jeśli będzie nam potrzebny.

8:37I ostatnia kategoria, którą stworzymy to będzie Software.

8:41Nie zmieniam w żadnym przypadku Sluga, te Slugi są OK.

8:44Wybieram polecenie Create i to tyle. Mamy

8:47stworzoną całą strukturę pierwszej kolekcji CMSa, czyli dla kategorii.

8:51Teraz możemy już chwilowo zamknąć tę

8:53kolekcję, a w następnej lekcji dorobimy sobie pozostałe kolekcje dla naszego bloga.

8:57Do usłyszenia.