Gatsby.js: Tworzenie globalnego layoutu

2.19.12+

0:00W poprzedniej lekcji udało nam się stworzyć nawigację która

0:04działa która wygląda tak jak w projekcie natomiast pojawia się ona wyłącznie na

0:08stronie index js teraz chcemy to zmienić w poprzedniej wersji gatsby

0:12czyli w jedynce było tak że mogliśmy sobie stworzyć folder layouts a w nim index js

0:16który później został wstrzykiwany do każdej naszej strony natomiast

0:21tutaj gatsby daje nam trochę większe pole manewru jeśli chcemy możemy zrobić

0:25to zupełnie inaczej możemy sobie stworzyć własny komponent który ręcznie możemy dodawać

0:29do każdej ze stron tak jak to było w szkielecie aplikacji mieliśmy tutaj component

0:33layout który oplatał każdą z podstron natomiast istnieje też plugin

0:38który moim zdaniem jest całkiem wygodny i dość fajnie konfigurowalny

0:42trudne słowo nazywa się gatsby plugin layout tak jak już ci mówiłem większość

0:46problemów w gatsby zostać rozwiązana za pomocą jakiegoś pluginu i

0:51tak właśnie jest w tym przypadku teraz zainstalujmy sobie kolejny plugin czyli

0:55npm install dash dash save gatsby plugin layout

1:03on tutaj ma do wyboru dwie opcje albo możemy

1:07stworzyć sobie folder layouts a w nim index js i to właśnie

1:11tam ten plugin będzie szukał w pierwszej kolejności tego layoutu który chciałby wstrzyknąć do

1:15każdej z naszych podstron albo możemy zrobić tak że podamy

1:19mu w options link do konkretnego komponentu który później może sobie

1:23zaimportować i to zrobić natomiast my możemy spokojnie skorzystać

1:28z tej pierwszej prostrzej opcji nie musimy tutaj tego w żaden sposób konfigurować stwórzmy

1:32sobie folder layouts wewnątrz niego index js skopiujmy

1:39sobie zawartość naszego index js ale z folderu pages

1:43czyli stronę główną dywanywywalmy rzeczy

1:47których nie potrzebujemy potrzebujemy tak naprawdę tylko navigation tutaj

1:52możemy to nazwać na przykład layout albo main layout i

1:56żeby zakomunikować że to jest faktycznie strona

2:01główna to znaczy layout główny i

2:05to co potrzebujemy tutaj zaimportować to children ponieważ nasz

2:10komponent layoutowy będzie automatycznie

2:14dodawany do każdej z podstron ale te propsy

2:18children będą zawsze dodawane automatycznie children jak wiesz z

2:22reacta z kursów zawiera po prostu wszystko co znajduje się między

2:26tagami naszego layoutu więc w tym przypadku children

2:30będzie po prostu wszystkim tym co znajduje się w poszczególnym pliku

2:35js w folderze pages jeśli jest to dla ciebie troszkę za trudne

2:39to możliwe że po prostu warto odświeżyć sobie wiedzę z reacta możesz

2:43spokojnie zajrzeć do kursu z reacta znajdujących się na eduweb

2:47okej stworzyliśmy już nasz layout więc teraz

2:52jedyne co nam zostało to dodanie gatsby plugin layout

2:56tutaj do deklaracji gatsby plugin layout bez żadnej

3:00dodatkowej konfiguracji w ten sposób powinno nam to wystarczyć wejdźmy

3:04jeszcze do strony głównej usuńmy navigation i zróbmy tutaj na

3:09przykład no nie wiem cokolwiek napiszemy hello hatta bo

3:13tak się nazywa nasza stronę to jest tylko na chwilkę gatsby

3:17develop sprawdzimy czy nasz layout został dodany do każdej z podstron na

3:23razie wygląda na to jakby plugin działał poprawnie żadnego błędu

3:27tutaj nie mamy jak widzisz

3:31pojawiło się hello hatta jesteśmy na stronie głównej przejdźmy do articles do

3:35about do gallery i do contact page

3:39treść się nie zmienia ponieważ na każdej mamy

3:43to samo po prostu przykleiliśmy to natomiast zauważ że linki

3:47się zmieniają articles about galleriiy i contact więc nasze

3:51linki działają nasz layout jak najbardziej działa poprawnie możemy przejść do dalszego

3:56developmentu a kolejną rzeczą którą chciałbym zrobić to na przykład dodac globalne style

4:00tak aby nasze fonty w tym miejscu były po prostu fontem montserrat

4:05a nie fontann domyślnym więc teraz możemy stworzyć sobie w naszym

4:09assets kolejny folder ja zazwyczaj style globalne dodaję właśnie do

4:13folderu styles tutaj tworzę sobie global styles kropka js

4:18musimy zaimportować create global

4:23style ze styled components i teraz stworzymy

4:27sobie zwykły styled component więc tutaj możemy to nazwać na przykład

4:31global style create global style i

4:35wpisujemy tutaj wszystko to co chcemy aby było właśnie globalne żeby było globalnym stylem

4:39ja przygotowałam sobie wcześniej taki style sheet on jest bardzo krótki możesz

4:43go sobie przekleić po prostu z tego brancha w kursie na szybko

4:48tylko mówię tutaj co zostało zawarte więc box-sizing dla całego

4:52html mamy border-box wszystkie elementy dziedziczą właśnie

4:56tę właściwość od html to jest taka dobra praktyka którą warto zastosować

5:01więc to taki tip ode mnie później body po prostu ma zresetowany margin

5:05font-family mamy montserrat button osobno również ma montserrat

5:09ponieważ font family dla batonów zawsze osobno jest stylowany do tego mamy cursor

5:13pointer zawsze na buttonach żeby po prostu to było na pewno padding

5:18również mamy 0 i dla ul mamy również zresetowany padding

5:22i margin więc teraz w naszym navigation możemy sobie usunąć to

5:27co mieliśmy w tym miejscu to będzie nam już niepotrzebne na chwilę nasze

5:31menu będzie wyglądać troszkę dziwnie ale to nie potrwa długo ponieważ teraz w

5:35wyeksportujemy sobie z tego pliku jako export default

5:39globalstyle zaimportujemy teraz ten komponent

5:43wewnątrz layout w

5:49taki sposób musimy jeszcze tylko zaimportować do

5:53pliku akurat tutaj nie zadziałał auto-import

5:59i po odświeżeniu nasza strona ma już poprawne

6:04fonty jedyne co jeszcze bym zmienił jak sobie przejdziemy tutaj to

6:08zobaczymy że ten padding tutaj wewnątrz naszej strony ma co

6:12najmniej 85 pikseli po lewej stronie więc

6:22możemy w body zrobić sobie padding od

6:26góry 125 od boku 85 od

6:39dołu 0 okej już

6:45widzę że będzie trochę za dużo i teraz jeszcze

6:49tylko nasza nawigacja musi dostać position absolute dobra

7:12i w ten sposób nasz layout jest gotowy do dalszej

7:16pracy więc kolejnym krokiem na naszej

7:20road mapie jest stworzenie strony głównej razem z tym obrazkiem ale

7:24żeby to zrobić muszę ci najpierw wyjaśnić w jaki sposób gatsby obsługuje dane

7:28w jaki sposób zaczytuje te dane skąd jest zaczytuje czym jest graphql

7:33i dlaczego graphql jest tak bardzo ważny w gastby ale o tym wszystkim opowiem

7:37ci już w następnym rozdziale tego kursu