Nuxt.js: Spis treści

0:00Cześć! W poprzedniej lekcji stworzyliśmy

0:02komponent Content Section, który wyświetla nam pojedynczą sekcję i

0:06dzięki temu możemy wyświetlać różną treść na naszej stronie Wikipedii.

0:11To co będziemy robić teraz, to jest spis

0:12treści i spis treści będzie całkiem analogiczny do tego, co już zrobiliśmy.

0:16Różnicą jest to, że w naszym katalogu pages index.

0:22Po pierwsze troszkę zmienimy to, co już

0:24stworzyliśmy, czyli nie będziemy tutaj pikować tej treści, tylko faktycznie

0:28wrzucimy ją w pętlę i zmodyfikujemy nasze komputer Properties.

0:34W taki sposób, aby nie nazywało się bibliografii, tylko po prostu content.

0:40I będzie to zwracało tablicę, czyli.

0:44Jeśli tutaj nam się kończy nasza treść.

0:52Jeśli dobrze myślę, tutaj jest koniec treści.

1:00Znajdźmy.

1:02Odpowiedni.

1:07Natomiast tutaj wstawiamy jeszcze jeden.

1:13Jeśli się nie mylę, nawiasy kwadratowe.

1:16I w tym momencie mamy tutaj tablicę.

1:19Takich obiektów będziemy mogli definiować

1:22sobie różną treść w zależności od tego, co tutaj wstawimy.

1:25Czy jeśli ja sobie skopiuję title i content i dopisze na samym końcu?

1:30Powiedzmy tutaj.

1:32Nowy obiekt i tutaj wpisujemy treść.

1:38Hello world zapiszemy.

1:41I oczywiście aplikacja w tym momencie może

1:44przestać działać, ponieważ pozbyliśmy się naszego.

1:53W bibliografii.

2:01Tyle grafik przepraszam, a dalej się do niej odnosimy poprzez.

2:09Nasze komponenty.

2:10Widzę, że coś tutaj się chyba nie

2:11odświeżyła, więc ja zrestartuje tylko szybciutko serwer.

2:20Chyba po odświeżeniu tak.

2:25Więc tutaj.

2:27Uruchomimy go jeszcze raz.

2:32I w tym momencie pojawia się błąd, że

2:35w biografii nie jest zdefiniowane, chyba że w międzyczasie zdążymy to naprawić.

2:39Czyli to, co powinniśmy robić, to tak

2:42naprawdę albo na komplecie, albo na samym komponencie zrobić via fora.

2:52I tutaj analogicznie do tego, co tworzyliśmy wcześniej.

2:58Ustawić powiedzmy for.

3:02Section in content.

3:08Renderować sam komponent.

3:10Tutaj widzimy, że się zepsuło.

3:12Czego się moglibyśmy spodziewać?

3:14Pozbędziemy się tych dodatkowych komponentów?

3:19I po prostu podmieniamy.

3:22W geografii na.

3:26Section.

3:30Przy okazji fajnie zawsze zobaczyć, że Next ma taki ekran ładowania

3:35tego co się dzieje, nawet jeżeli aplikacja nie działa.

3:39Tutaj zabrakło nawiasu.

3:41Niestety na małych ekranach można się pogubić.

3:46Wpiszmy jeszcze raz token.

3:49Jak by tutaj to sprawdzić.

3:51Moglibyśmy rozwinąć to jeżeli nam pozwoli

3:55edytor kodu, ale on tylko i wyłącznie pierwszą sekcję.

4:00Więc po prostu może go chwilowo usuniemy.

4:08Tutaj przyciągniemy.

4:12Pozbędziemy się sekcji treści.

4:16I teraz będzie o wiele łatwiej zauważyć co jest nie tak.

4:20Czyli tutaj mamy poprawny obiekt z contentem jako tablicą.

4:24To jest wszystko jak najbardziej w

4:26porządku i ten element nie ma tutaj zamknięcia.

4:32Tablicę oczywiście.

4:34Więc w tym momencie prawdopodobnie sekcja będzie pusta.

4:37Oczywiście biografia jest pusta, więc możemy teraz wkleić z powrotem tą treść.

4:43I uzupełnić tę Reiko.

4:46Więc w tym momencie nasza aplikacja działa dokładnie tak samo, tylko z innego miejsca

4:50pobiera dane i to też będziemy robić w następnych lekcjach.

4:53Po prostu podmieniać to z Computer

4:55properties na inne właściwości, które będą szły z API.

4:59No i jak to się ma do spisu treści?

5:02Dzięki temu, że mamy content zdefiniowany

5:04w jednym kompie to jest property, które nazywa się właśnie content.

5:08Będziemy w stanie stworzyć blok content dynamicznie.

5:13Czyli ja sobie to skopiuje.

5:15Stworzy nowy komponent.

5:20Table of Contents.

5:24Kropka view.

5:26Możemy skopiować sobie tutaj content section.

5:31I podmienić jego treść.

5:35Na to co tam.

5:38Zadeklarowaliśmy.

5:42Więc content możemy zostawić, jako że jest

5:44to nagłówek i będziemy dynamicznie generować tutaj te oto linki.

5:49Czyli jeżeli ja to napiszę i pozbędę się w tym momencie procesów,

5:54albo je zmodyfikuję, czyli weźmiemy tutaj po prostu content.

5:59Jako.

6:01Trójkę zapiszemy i wyświetlając to w tym miejscu, czyli tabelę o contents.

6:11Ustawiamy content na cały content.

6:18Zapiszemy, zobaczymy, że ten komponent da się wyrenderować.

6:23On oczywiście jeszcze nic nie robi.

6:24To są dalej za hard kodowane dane, ale jak widzimy tutaj z biografii Riding itd.

6:31My mamy tylko i wyłącznie gaz.

6:35Więc ta sekcja może zostać zmieniona w

6:38taki sposób, aby była też sekcją dynamiczną.

6:41Czyli tutaj to wyrównane, pozbędziemy się dodatkowych punktów.

6:45W tym momencie już nie będziemy potrzebowali i w for.

6:50Section content, czyli dla każdego elementu, który jest przekazywany w

6:55procesach poprzez content będziemy go renderować, czyli content.

7:01Kropka.

7:03Bo tutaj indeks kropka.

7:05Jak wejdziemy w content to widzimy, że to jest tablica obiektów,

7:10które zawierają w sobie title oraz content.

7:15I w tym momencie to jest puste.

7:17Jest w sumie ciekawe dlaczego?

7:19Czy jest to kwestia pensji, czy jest to kwestia tego co jest tam przekazywane?

7:24Definitywnie są tam dwa elementy.

7:27Może jest jakaś literówka content type?

7:30Content type.

7:33Wygląda to zdrowo.

7:35Możemy cały.

7:38Cały nasz content.

7:41Wyświetlić a content.

7:44Oczywiście nie ma takiego wpisu, ale jest zasięg.

7:48Kontent jest to nasz proces, a nie pojedynczy element wewnątrz tego procesu.

7:53I jak widzimy w tym momencie już mamy

7:55odnośniki, które generują się na podstawie treści, którą zdefiniowaliśmy tutaj.

8:00I to jest po pierwsze cała siła WP,

8:02że jesteśmy w stanie w taki sposób deklarować nową

8:06treść i różne komponenty mogą się aktualizować równolegle do siebie.

8:12Czyli jeśli tutaj dodam.

8:16Right X i Hello World 2. Zapiszemy na to.

8:21Oczywiście oba komponenty się aktualizują, czyli tutaj doszły nam rating i tutaj

8:26doszła sekcja rating, ale co istotne nie działają nam jeszcze sam odnośnik,

8:31ponieważ tutaj jeżeli klikniemy biografii to faktycznie działa.

8:34Ponieważ to był domyślny odnośnik, ale nie

8:37przenosi nas to do sekcji sam wygasa i waiting, więc to jeszcze zrobimy.

8:43I aby taka nawigacja działała to musimy

8:46zrobić kotwicę i wyrenderować odpowiedni identyfikator przy danej sekcji.

8:51Czyli musimy przejść do komponentu content

8:53section i tutaj upewnić się, że H2 będzie miało odpowiedni identyfikator.

9:00Jak możemy to zrobić?

9:01Ja bym stworzył metodę.

9:07Która nazywa się Podsumuję.

9:09Może to być komplet.

9:10Chyba będzie to prostsze.

9:12Czyli komputer.

9:16Ustawimy na.

9:19Healing it.

9:23I to będzie nam zwracało.

9:25Dis props site.

9:28I w tym momencie będziemy mogli użyć go.

9:33Na naszym widoku, czyli tutaj możemy sobie zrobić Healing ID.

9:37Zapiszemy. Oczywiście będzie się to wyświetlało

9:40jakoś brzydko, ale faktycznie się wyświetla i

9:43ważne jest to, że ta informacja będzie wewnątrz tutaj atrybutu html owego.

9:49Czyli najlepiej byłoby, gdyby ta wartość była jakoś znormalizowane,

9:54czyli nie byłoby tam spacji, nie byłoby tam specjalnych znaków

9:57czy nawet wielkich liter, więc możemy tutaj zrobić height

10:02i to co jeszcze można zrobić to po prostu replace.

10:08Wszystkie spacje na pustego stringa

10:11albo na myślnik, jeżeli chcemy zachować czytelność.

10:15I następnie tu lower

10:17case, które jest standardową metodą na wszystkich stringach w skrypcie.

10:21Więc jeśli teraz zerkniemy na nasz nagłówek

10:25biografii, to widzimy, że on ma tutaj odnośnik biografii.

10:29Tak naprawdę nie jest to.

10:33Odnośnik tylko identyfikator.

10:38I tutaj tak samo sam Fingers.

10:39Działa, więc to widać property.

10:42Ono będzie dosyć podobne w obu sekcjach.

10:45Moglibyśmy to jakoś ujednolicić, aby nie kopiować kodu w te i wewte.

10:50Ale nie to jest celem tej lekcji.

10:54Więc tutaj sobie zapiszemy i możemy użyć tego zamiast jedynki.

10:58Możemy wykorzystać tutaj section id

11:02i zamiast props title, no bo oczywiście takiego tutaj nie mamy.

11:06Będziemy musieli przekazać pojedynczą

11:07sekcję, więc być może w tym momencie lepiej jest wykorzystać do tego

11:13i tutaj przekazać po prostu konkretną sekcję, na której pracujemy.

11:16I na tej sekcji mamy.

11:20Ponieważ tutaj renderuje i seks section tytuł.

11:23Tak samo pasujemy do jakiegoś wspólnego mianownika.

11:27Po zapisaniu musimy oczywiście

11:30podpiąć tę wartość pod nasz znacznik odnośnika pod atrybut y.

11:36Jednak zanim to nastąpi, być może

11:39darujmy sobie tylko faktycznie tę wartość, czyli jest to

11:42metoda Section id i tutaj przekazujemy sekcję.

11:46Moglibyśmy zmienić nazwę tej

11:48funkcji, żeby brzmiała jak faktycznie coś, co jest funkcją, a nie property.

11:54I widzimy, że faktycznie przed treścią

11:57w naszym content znajduje się zunifikowany identyfikator danego

12:02nagłówka, czyli to, co pozostaje na zrobić to poza zmianą nazwy tej funkcji get

12:10section id to przypisać ją do atrybutu i tutaj możemy

12:16po prostu poprzedzić ją hashtagiem tak aby to była kotwica html owa.

12:21I tutaj template stringi z JavaScriptu, aby dostać się do wartości tej zmiennej.

12:26Czyli po prostu przekazujemy to tutaj.

12:29Pozbywamy się wąsów, jeśli nie są już potrzebne.

12:33Jeśli wszystko poszło dobrze to powinno nas to przekierowywać

12:37na odpowiednie sekcje i tak się faktycznie dzieje.

12:39Jeżeli klikniemy biografię to widzimy, że biografia jest na samej górze.

12:43Są fingers i są fingers jest na samej górze.

12:46Analogicznie do writing też możemy przejść.

12:48Jeżeli dana sekcja znajdowałyby się dosyć

12:50nisko strony, to oczywiście ona się może zatrzymać troszkę wcześniej, ponieważ

12:54scroll nam po prostu tak daleko nie dojedzie.

12:56Ale tym oto sposobem stworzyliśmy.

12:59Dwa komponenty, już, które współistnieją ze sobą, mają wspólne źródło

13:04danych i adaptując jedno miejsce w naszej aplikacji zmienia się cała jej struktura.

13:11Czyli wystarczy zmienić w jednym miejscu np.

13:14tytuł naszej sekcji na powiedzmy filtr.

13:18Choć i po zapisaniu zarówno tej below

13:20contents jak i cała sekcja ulegnie zmianie.

13:24I tak jak na początku możemy korzystać z tego komponentu

13:27globalnie, ponieważ zadeklarowaliśmy je w katalogu components.

13:32W kolejnej lekcji zajmiemy się sekcją z głównymi informacjami.

13:36Tak jak mówiłem troszkę ją pewnie wytniemy

13:38z funkcjonalności i będzie to koniec tego działu i w następnych działach zaczniemy

13:42się zajmować bardziej backend ową częścią pracy z pakietem.