Webflow: Strona Blog Posta - Sidebar

0:00Cześć! Witaj w kolejnej lekcji i możesz być

0:02trochę zaskoczony co tutaj się stało, jak to się stało, skąd się wzięły te elementy.

0:05Czy ja przegapiłem jakąś akcję?

0:07Nie, nie przegapiłeś. Dodałem po prostu te

0:09elementy, ponieważ ich stworzenie zajęło mi 10, czy 15 minut.

0:12Nie chcę tego omawiać, ponieważ jest to wszystko naprawdę bardzo podstawowa wiedza,

0:16wszystko omawialiśmy już wcześniej w tym kursie oraz kursie podstawowym.

0:20Natomiast wolę zamiast tego jak konstruować te elementy, pokazać Ci jak

0:25sprawić, aby fajnie funkcjonowały w layout'cie i dlatego mamy tak - Newsletter wrapper

0:31zobacz na strukturę. Mamy po prostu Paragraph i Form block, który zresztą w ogóle skopiowałem

0:35w całości praktycznie stąd, tylko trochę zmieniłem style. No i Social share

0:40wrapper, który zawiera Paragraph, a później jest techniczny Div block, który zawiera ikonki

0:44social mediów. Oczywiście możesz ich dodać sobie ile chcesz.

0:47One mają taki stan, który pozwala ten stan

0:51Hover, który pozwala po prostu zobaczyć tę aktywną ikonkę i stan normalny, który

0:57pokazuje trochę wyszarzoną. No i tyle.

0:59Bardzo, bardzo prosty element, natomiast

1:01chciałbym pokazać Ci jak można zadokować go w Layout'cie, bo tego jeszcze nie robiliśmy.

1:06W ciekawy sposób. Mianowicie cały ten Side Actions,

1:08cały ten element, chciałbym zmienić jego pozycję, jest to bardzo proste.

1:11Możemy ją zmienić na pozycję Sticky.

1:14Zazwyczaj operowaliśmy na pozycji Fixed w momencie, gdy chcieliśmy coś zadokować np.

1:19na samej górze w Layout'cie i tak zrobiliśmy z menu.

1:21Ale tutaj użyjemy nowej opcji, czyli opcji Sticky.

1:24Ustawienia Position sticky jakie powinniśmy zastosować, to chcielibyśmy, aby przykleił się

1:29ten element do górnej krawędzi przeglądarki. W momencie, gdy użytkownik

1:33zjedzie i zrówna się ten element z górną krawędzią przeglądarki,

1:37chcielibyśmy, aby się przykleił, pozostał w

1:39miejscu i nie scroll'ował się razem ze stroną.

1:42Żeby to zrobić trzeba tutaj po prostu

1:44ustawić górny margines, jakiś offset, możemy go dać na razie na zero.

1:48Zaraz to pewnie zmienimy.

1:49I jeszcze jedna rzecz w kontekście Grid'a,

1:51jeśli będziesz chciał

1:52w Gridzie przyklejać elementy to wypozycjonuj je w opcji Start.

1:58W ten sposób rzeczywiście będzie można to

2:00zrobić i będziemy mogli teraz dojechać do górnej krawędzi okna przeglądarki.

2:04Jeszcze tu nie jesteśmy, ale teraz tu jesteśmy.

2:07Jeśli scroll'uję dalej to zobacz, że teraz ten element będzie zostawał przyklejony.

2:12My oczywiście potrzebujemy jakiś trochę

2:14większy offset i ten offset będzie determinowany tą

2:19wysokością menu i jeszcze może zostawimy trochę oddechu, więc proponuję zrobić tutaj

2:23100 pikseli oddechu i wtedy 100 pikseli powyżej, czyli tutaj już ten element nam

2:28się przyklei i zostanie w tym samym miejscu.

2:31Jeżeli będziemy scroll'ować stronę

2:32zobacz, że odtąd już zostaje, łatwiej będzie to podejrzeć w ogóle w tym

2:37trybie podglądu Preview i on sobie po prostu do końca zostaje.

2:42Nie musimy nawet określać specjalnie jakichż z-indeksów.

2:46Wszystko tutaj, jeździ bez problemu i w ten sposób fajnie sobie ustawiliśmy jego pozycję.

2:51No i tym sposobem strona blog posta jest praktycznie gotowa.

2:54Dlaczego praktycznie? Ponieważ tutaj jeszcze jest jeden element, który powinien

2:58wyświetlać się, a nie zrobiłem go Section blog hero

3:01i jest to Tag,

3:03czyli ten Tag wrapper, który mamy zresztą dostępny np.

3:06na stronie blog.

3:08Będziemy mogli skopiować i go tutaj wklecić, chodzi nam o ten element Tags wrapper,

3:13mógę go skopiować, a następnie przejdźmy na stronę Blog post template.

3:17Możemy wkleić go bezpośrednio do Blog hero title.

3:20Tyle, że w tym momencie, ponieważ jest on

3:22absolutnie pozycjonowany 16, 16 pikseli od lewej górnej krawędzi musielibyśmy zrobić

3:28jego bezpośredniego rodzica, czyli Blog hero title dla tej strony musielibyśmy nadać mu

3:33pozycję Relative I wtedy kontekst pozycjonujący dla tego elementu

3:37Tags wrapper automatycznie staje się nim

3:39Blog hero title, no i to wszystko wygląda w porządku. Tutaj

3:43dodatkowo są wstawione tagi Featured i tagi, które zostały przypisane, więc

3:50wszystkie te właściwości zostały odziedziczone, czyli tutaj jest Condition, Featured

3:54is on, jeżeli ten post byłby Featured to tu rzeczywiście pojawiłby się ten dodatkowy

3:59tag. Możemy to przetestować zresztą, wejdźmy do CMSa, czemu nie.

4:02Może spróbujemy.

4:04Czy to w ogóle działa.

4:05Wejdźmy do tego posta, a następnie

4:08przejdźmy do kategorii Featured, zaznaczmy ją.

4:11No i teraz wybieram polecenie Save.

4:13Natomiast, jeśli zamknę to zobacz, że już tutaj się pojawi,

4:17ale jeszcze nasza strona nie jest opublikowana, żeby te zmiany były widoczne

4:21na stronie musimy jeszcze kliknąć Publish i Publish to select domains.

4:25Jak widać wszystko działa poprawnie, więc mamy stworzoną stronę pojedynczego posta.

4:30Naturalnie do całego bloga można by było

4:32jeszcze trochę rzeczy podorabiać. Można by było stworzyć tutaj przykładowo stronę z

4:37autorami, gdzie ten rekord linkowałby do autorów, wstawiilibyśmy

4:42to jako link, linkowalibyśmy do poszczególnych autorów

4:45i przygotowalibyśmy stronę Authors template albo nawet pojedynczego autora,

4:49gdzie wyświetlalibyśmy jego dane, ale w tym kursie naprawdę nie miałoby to już sensu

4:53pokazywanie Ci kolejnej tej samej czynności. To jest naprawdę powielanie

4:57wszystkich rzeczy, których już się nauczyłeś, więc

5:00nie mówię, że tego nie trzeba przećwiczyć.

5:01Zatem to fajna praca domowa.

5:03Teraz warto, żebyś dorobił tutaj stronę autorów, a także stronę pojedynczego autora i

5:08odpowiednio je podlinkował. Do strony autorów możesz wykorzystać Authors template.

5:12Natomiast stronę pojedynczego autora możesz stworzyć jako stronę statyczną i w

5:15ten sposób przećwiczysz w sobie zarówno te rzeczy związane z CMS collection pages,

5:20jak i ze statycznymi stronami osadzenie tego w trochę inny sposób, korzystanie z

5:24CMSa i będziesz mógł przetrenować również wszystkie te rzeczy, które są w

5:28ustawieniach CMSa, w tym filtry oraz dynamiczne wyświetlanie, o którym mówiliśmy.

5:32W zasadzie teraz zauważyłem jeszcze jedną rzecz, że menu wjeżdża nam pod obrazek.

5:37Więc przejdźmy do jego stylów i musimy teraz wejść do środka do Blog menu.

5:42Całość możemy ustawić dla niego z-indeks, w

5:44zasadzie to jest nasz najważniejszy element powinien być zawsze na górze, więc

5:48możemy nawet dać 1000. Wróćmy do instancji i teraz jest już w porządku.

5:52I ostatnia rzecz, którą chciałbym zrobić na

5:55stronie posta, jest to dodanie tutaj powiązanych z nim postów.

5:58Jeżeli ktoś chciałby czytać dalej posty z

6:00tej konkretnej kategorii, to chciałbym żeby się wyświetliły na dole wpisu.

6:04Możemy to zrobić kopiując sobie odpowiednią sekcję z bloga, czyli np.

6:10ten cały Blog category section możemy

6:12wziąć, pożyczyć i wejść na Blog post template na tę stronę.

6:17Można by było w zasadzie nie korzystać

6:19nawet z tego elementu, tylko wkleić kafelki, ponieważ one

6:24zawierają referencje tutaj do odpowiedniej kolekcji.

6:28Ta kolekcja nie jest wymagana, jeśli

6:29jesteśmy na stronie dynamicznej, ale OK ona może też zostać.

6:33Tyle, że tak chciałbym tutaj może ten

6:34Heading odpiąć jednak z CMSa i po prostu wpisać

6:41Continue reading.

6:45I usuniemy też cały przycisk CTA button

6:48Wrapper. Wrzuciłem to pod footer, więc umieśćmy to nad Footer'em.

6:53A, jeśli chodzi o same posty, to powinniśmy móc dostać się teraz do kolekcji, czyli

6:58Collection list wrapper i możemy tutaj skorzystać z takiego

7:02ustawienia, gdzie mamy Category is software, ale, jeśli jesteśmy na stronie CMSowej to

7:07powinno to również nam wykryć Category of current post.

7:10Więc wtedy będziemy wyświetlali

7:12automatycznie po zasave'owaniu tylko te posty, które są z tej samej

7:17kategorii, w której jest post, który oglądamy. Akurat ten był w tej samej

7:21kategorii, którą mieliśmy, więc spróbujmy jakiś inny.

7:24I rzeczywiście, jak widzisz,

7:26inne posty są wyświetlane. The History of Web on jest w Marketing i widzimy, że

7:31wszystkie tylko i wyłącznie z Marketing są wyświetlane, jeśli coś jest z kategorii

7:36Mobile to tylko te mobilne są wyświetlane i super. To teraz mamy praktycznie całą tę

7:41część gotową. Opublikujmy naszą stronę. Wybieram Publish selected domains.

7:46Jesteśmy jeszcze na razie na subdomenie Webflow, ale zobaczmy jak to wygląda i kliknijmy na

7:51logo Juiceblog po to, żeby przenieść się do głównej strony bloga. Mamy artykułów Featured.

7:55To jest artykuł, który jest oznaczony flagą

7:57Featured i dodatkowo jest najnowszym artykułem na naszym blogu.

8:01Mamy także ostatnie artykuły.

8:03Każdy z tych kafelków da się kliknąć i przejść do odpowiedniego artykułu.

8:07To samo jest we właściwych kategoriach Software, Marketing i Mobile.

8:11Możemy kliknąć View all articles i wtedy przeniesiemy się do strony z wszystkimi

8:16artykułami, której dodatkowo oddaliśmy paginację.

8:19Możemy także poruszać się po kategoriach z poziomu menu Software, Marketing, Mobile i

8:24Blockchain i też mamy tutaj wyświetlane wpisy, też są one z paginacją.

8:29Jeżeli wybierzemy konkretny wpis, to wtedy

8:32przeniesiemy się do jego właściwej strony, gdzie wszystkie dane też są pobierane

8:36dynamicznie, a dodatkowo wkleiliśmy tutaj jeszcze sekcję Continue reading.

8:40Nasz blog można powiedzieć, że jest już praktycznie w pełni funkcjonalny, ale to

8:44jeszcze nie wszystko. W tym kursie jeszcze pokażę Ci kilka ciekawych rzeczy w Webflow.

8:47Także zapraszam na kolejną część.