Do tego momentu nasi ekspresowych powtórzeń zostały odesłane całkowicie Unstaged h Tm l Brak javascript zestawie Nie Css tylko czysty h t m l.
W tym filmie mam zamiar pokazać, jak możemy zacząć obejmują aktywa, takie jak arkusz stylów lub jakiegoś JavaScript.
A ja też zamiar pokazać, w jaki sposób możemy wysychają nasze szablony za pomocą tak zwanych Parshall jest.
Więc zacznijmy.
Używam tej samej aplikacji, które używam w ciągu ostatnich dwóch filmach, gdzie mamy naszą aplikację.
Tak i mamy trzy główne szlaki.
Mamy trasę trasy, która nadaje się do domu, który eJay jako szablon, który ma H1 i urocza obraz Palm C, a następnie mamy również zakochać się Slash rzeczy.
Zmienna droga rzecz, która następnie renderować miłość wobec każdego szablonu i będzie wyświetlać zakochał się, a następnie, co pisaliśmy w trasie.
A potem if a następnie trochę pkt na dole, a następnie mamy również trasę posty slash, który renderuje posty EJ jako matrycę i wewnątrz tego.
Mamy dwie pętle.
Teraz powiedzmy, że chcemy dołączyć kilka stylów.
Więc jak wiesz już, lubię kolor fioletowy.
Załóżmy, że chcę, aby wszystkie organy fioletowych wszystkim kolor tekstu na wszystkich różnych szablonów powinien być fioletowy.
Zacznijmy od strony Poczty i co mogę zrobić, to m.in. tag stylu tak, że otwieranie i zamykanie stylu, a potem może napisać swój styl tu ciała i zrobi kolor fioletowy ot tak i oszczędzać.
I pamiętaj, że nie jest to idealny sposób na tym style i jestem pokazując ci to pierwsze z tego powodu, ponieważ mamy zamiar byłaby go i poprawić go za chwilę, ale niech po prostu upewnić się, że działa.
Więc kolor fioletowy na ciele.
Zacznijmy aplikację węzła serwera.
Tak chodźmy się w przeglądarce i odświeżyć na stronie Poczty i widać mamy fioletowy.
A gdybym poszedł inną drogą nie rozumiem fioletowy.
A to dlatego, że są one całkowicie osobne szablony a my tylko dodawali tag styl w szablonie pocztowym.
Więc jeśli chcę, żeby wszystko było fioletowe na wszystkich trzech szablonów można dodać w innym znaczniku style w domu, że Ejay my i ten sam znacznik style na miłości.
Tak i zapisać ponownie uruchamiając serwer odświeżyć moją stronę, a ja dostaję fioletowy H-1 tu i jeśli pójdę do zakochać zardzewiałymi również uzyskać fioletowy tekst z tego znacznika stylu.
Istnieją dwa główne problemy stojące przed nami.
Jednym z nich jest kwestia, że ​​ten kod jest powtarzany trzy razy.
Jeśli chcesz same style w trzech różnych szablonów nie musi być lepszy sposób, aby tego dokonać.
I nie ma.
I mamy zamiar rozwiązać ten drugi.
Mamy zamiar zacząć od rozwiązania tego problemu za pomocą znacznika w stylu, który nie jest dobrym pomysłem.
To, co chcemy zrobić, to użyć zamiast zewnętrznego arkusza stylów i związana z tym arkuszu stylów przy użyciu znacznika łącza.
Więc mam zamiar napisać, że znacznik łącza pierwszym, które nie będą działać, ponieważ nie mamy jeszcze arkusz stylów, ale będziemy tworzyć ten drugi.
Więc połączyć i musimy zapewnić raĂşl równy arkusz stylów i wtedy.
I musi to być nazwa naszego arkusza stylów, a my po prostu nazwać Dot.
SS Dobrze więc jest to tylko na stanowisku w EJ jako szablon uratuje teraz.
I chodźmy stworzyć, że apt.
C Ss wyjątkiem zamiast tworzenia go w tym samym katalogu, co są w stanie J Tak naprawdę mamy zamiar dokonać innego katalogu, w którym umieścimy wszystkie nasze Style Sheets wszystkie javascript, że piszemy, a potem wszystkie inne aktywa, którymi chcemy się dostępne i mamy zamiar nazwać publicznej i mogą być nazwane bynajmniej społeczeństwa jest bardzo częstym i konwencjonalna nazwa tego katalogu.
Więc upewnij się, gdy właściwe miejsce.
A potem do publicznej katalogów i będzie również tworzyć wewnątrz publicznego aplikacji slash publicznej, patrz ocenić która to nazwa naszego pliku tutaj i zapisz i może być myślenie OK chwileczkę, nie powinno to być publiczne.
Slash ocenić.
I niestety odpowiedź brzmi: nie.
Zostawimy go jako apt upsy SS powie wyrazić, że nasze arkusze stylów i JavaScript są wewnątrz katalogu publicznym i będzie służyć społeczeństwu katalogu dla nas, abyśmy mogli połączyć się do rzeczy, używając tylko nazwy plików, tak będę pokazują, że w ciągu jednej chwili.
Otwórzmy się na aplikację ukośnik publicznego, które widzą SS plik i dodać w niektórych wersjach.
Zróbmy coś innego.
Zrobi ciała lub tła.
To będzie ohydne.
Dołożymy tło nam żółty i fioletowy kolor nadal.
OK, więc teraz mamy styl naprawdę brutto ona zdefiniowana możemy zamknąć się stąd i będziemy wiedzieć, czy to działa.
Jeśli ten post EJ jako szablonu pokazuje się z ohydnym żółtym tle purpurowym tekst to nie będzie pracować tylko jeszcze, ale pokażę wam tak, że widać, że dla siebie.
Więc Noad apt.
J. S. i wracamy i odśwież stronę i musimy przejść na stronę wątku i nie dostaniesz nic.
A jeśli otwarcie konsula tu pojawia się błąd, który mówi, nie udało się załadować badań.
Odpowiedź serwera statusu 404 i nie mógł znaleźć Apparat sukces.
A powodem tego jest dość proste.
Podczas tworzenia aplikacji WWW i używamy Express uruchomić serwer WWW nie tylko automatycznie służyć każdy pojedynczy plik, że widzi, że nie wie, że chcemy, aby to zrobić.
A domyślnym jest nie służą w ogóle nic.
Oprócz katalogu widoki.
Więc jeśli chcemy cokolwiek innego, musimy powiedzieć, wyrazić jednoznacznie hej muszę Ci służyć mój katalog publiczny lub jakichkolwiek innych reżyserów mamy.
Musimy powiedzieć express to zrobić i prawdopodobnie express zapewnia łatwy sposób dla nas zrobić, że wnętrze naszego czynu.
Tak się górna Zamierzam dodać aplikację do używania, a następnie w nawiasie.
EXPRESS Czy statyczne.
A potem w nawiasie znów społeczeństwo słowo, które jest nazwą dla naszego katalogu.
A to powie express służyć zawartości katalogu publicznym.
A teraz, gdybym ponownie uruchomić serwer i odśwież stronę tu zamknąć konsulat możemy dostać nasze żółte tło i naszą fioletową czcionkę i nie mamy żadnych błędów w radzie.
A jeśli chcesz dołączyć te arkusze stylów na innych stronach to po prostu idź i skopiuj ten znacznik łącza i umieścić go góry.
Oczywiście moglibyśmy mieć wiele arkuszy stylów, a także, jeśli chcieliśmy i mogliśmy po prostu odwołują się do nich, dając im różne nazwy i upewniając się, że są zarówno w katalogu publicznym.
Zanim przejdziemy do niedostatku Parshall, by poświęcić chwilę, by pokazać bardzo szybki, co możemy zrobić, aby kod trochę krótsza Zauważ, że jesteśmy wpisując domu, że każda EJ Tak kochał.
EJ opublikował E.J ..
Tak to jest naprawdę niewielkie, ale naprawdę możemy powiedzieć, wyrazić, że mamy zamiar użyć eJay nas z wyprzedzeniem i nie możemy pozostawić je wyłączyć i po prostu pisać i rozwijać, a zostanie ona automatycznie spodziewać pliki za pliki Ejaz.
A do tego używamy dane aplikacji widoku ustawionego silnika, a następnie przechodzimy do drugiego argumentu jako EJ po prostu tak.
A jeśli oszczędzamy zrestartować serwer będzie się spodziewać te pliki za pliki Ejaz.
A jeśli odświeżyć.
Nic nie powinno w ogóle zmienić.
To wciąż działa.
A teraz nie musimy wyraźnie powiedzieć, że eJay nas.
Więc to jest bardzo drobna zmiana.
Następną rzeczą, którą chcę pokazać, jest trochę bardziej znaczące i to pomoże nam wysychają naszego szablonu.
Teraz mamy ten arkusz stylów.
Ten link do arkusza stylów powtarzane we wszystkich szablonach, ale jest też coś o wiele bardziej znaczące, że brakuje nam co jest cała nasza płyta kotła razem.
Jesteśmy brakuje taśmę tutaj.
Andrew brakujący w wieku mu stare znaki i wszystkie regularne boilerplate że oczekujemy głowę i wewnątrz głowy.
Musimy tytuł i podamy nasze app tytuł.
Nazwijmy to demo aplikacji, a następnie musimy ciała, jak również.
A potem wewnątrz ciała powinniśmy być wprowadzenie tej treści i wtedy trzeba to zrobić dokładnie to samo na wszystkich innych plików.
I nie zamierzam tego robić, bo to strata czasu i nie jest to łatwiejsze rozwiązanie, gdzie nie musimy skopiować ten kod i umieścić go na każdym szablonie tak jak nie powinniśmy skopiować ten jeden znacznik łącza i umieścić, że na każdej matrycy, jak również.
I sposób, że poruszanie się, że jest za pomocą tak zwanych Parshall oraz Parshall użytkownika są zasadniczo pliki szablonów, które możemy napisać, że możemy to w innych szablonach będzie utworzyć szablon, który wygląda tak.
Więc mamy górną połowę naszej płycie kotła wszystko w głowie.
To będzie prawie zawsze taki sam na każdej stronie, którą tworzymy w danym miejscu.
Tak samo arkusz stylów tym samym tytułem.
Więc po prostu zrobić to swój własny szablon.
A potem na dole zrobimy tu ten swój własny szablon.
A potem w między dwa będą miały nasze treści, które zmienia się w zależności od tego, co jesteśmy szablonu lub w zależności od tego, co jesteśmy na stronie.
Więc co zrobimy jest zasadniczo przekształcić własnego szablonu.
Przekształcić własnego szablonu, a następnie po prostu korzystać z tych szablonów możemy odnosić się do nich w każdym z tych plików.
Więc mówimy coś podobnego i nie jest to prawidłowy kod, ale chcemy zrobić coś jak to szablon nagłówka, a następnie na dole zrobi to samo z wyjątkiem stopce.
Musimy więc stworzyć takie szablony lub Parshall i zrobić to zrobimy nowy katalog, a nie poglądów, a my nazywamy ten katalog Parshall jest.
Więc zrobimy i uczynić widoki katalogów slash Sprawiedliwego Parshall tak.
A potem zamiast Parshall na zamierzamy zrobić dwa pliki, a pierwszy z nich będzie wykorzystanie slash Parshall za ukośnik hetter że każdy z nami, a potem będziemy dokonać innego częściowe dokładnie to samo z wyjątkiem stopce i można również zadzwonić do nich podobne górnej i dolnej Ejaz pierwszy i drugi co chcesz je, ale nagłówek i stopkę nazywają to zdecydowanie standardowy nazwa.
Więc zrobię te dwa pliki i wtedy będę otwierać je i tym razem w szkole tutaj i otworzyć nagłówek i mam zamiar skopiować w tym boilerplate prostu wyciąć i umieścić to tutaj zamiast nagłówek.
Więc to, co chcemy w górnej części każdej strony, a następnie zamiast stopce wszystko, co naprawdę chcemy to dno naszego szablonu, który jest po prostu ciało i tag team zamykania.
Właśnie tak.
A jeśli chcieliśmy coś innego.
Więc zrobię coś bardziej oczywistego.
Zróbmy paragraf na dole, który mówi coś takiego znaku towarowego lub innego tekstu stopki, które widzimy na stronie internetowej.
Będziemy po prostu zostawić go w tym.
I tak spodziewamy się zobaczyć to na każdej stronie, na której zaliczamy stopkę.
Częściowy.
OK.
Więc dwa partials gotowe.
Zamknąć te na zewnątrz.
Rozwiąż ten jeden właśnie takiego.
Dobrze ustawiony.
A teraz chcemy zawierać partials.
Więc zacznijmy od naszej miłości.
Każdy z nas, a teraz będziemy to, że nagłówek częściową.
Więc musimy użyć nowego fragmentu kodu w eJay jako znaczniki zawierają żadnego przycisku.
A następnie nazwę pliku, który jest po prostu hetter i nie trzeba dodawać, że Ejay nas, ponieważ jest już szuka plików Ejaz.
Więc po prostu zawierać nagłówek i to faktycznie nie zadziała od razu, a pokażę ci, dlaczego.
Ujmę stopce jeden aswell tutaj.
A jeśli zacznę serwer upewnić, ja po prostu usunąć trochę miejsca tutaj, a następnie węzeł.
Apogee Tak.
A jeśli odświeżyć stronę i to jest włączone tylko na badaniu miłosnej J. S. szablon.
Więc trzeba iść do slash.
Zakochaj się w Resti i pojawia się błąd.
Nie ma takiego pliku lub katalogu.
Tak demo slash slash hetter poglądy.
EJ Tak.
Więc to mówi nam dwie rzeczy.
Jeden wie, że to ma być plikiem Ejaz.
To spojrzenie na cel.
Tak, ale to patrzy bezpośrednio w katalogu użytkownika.
Ale chcemy, aby spojrzeć w poglądy ukośnik ukośnik Parshall za heterodoksyjnych eJay nas jak widać tutaj poglądy slash Parshall jest.
Więc musimy zmienić naszą ścieżkę tutaj trochę i musimy zmienić powiedzieć ukośnik Hetter Parshall oraz Parshall za ukośnik stopkę.
Jednak, że nadal nie będzie go naprawić.
I pokażę ci jeszcze raz to, co dzieje się, kiedy zacznę to ponownie i odświeżyć częściowe została ujęta w porządku.
A jeśli pójdziemy do elementów można zobaczyć, że mamy stopkę na dole i mamy ciało.
I za każdym razem zamykania znaczników, ale style nie są stosowane.
Powinno być purpurowy i żółty i to tylko czarno-białe.
A jeśli spojrzymy w głowie mamy nasz znacznik łącza i to link do pliku o nazwie apcupsd.
SS Ale to nie działa.
A jeśli spojrzymy na karcie źródeł zobaczysz, że mamy ten plik Rustie, który został wysłany z powrotem i ma nasz nagłówek i ma główną treść oraz posiada stopkę.
Tak to jest jak jeden zmontowany pliku, ponieważ pamiętam wyślemy jedno z powrotem jedną odpowiedź.
Więc to sprawia, że ​​ten jeden plik dla nas z naszą trzy lub dwa Parshall Parshall na Plus naszego forum i wysyła te plecy.
I wtedy nie ma również tę ACT UP See mówi, że jest całkowicie pusty.
A co to znaczy, że mamy związane z naszym APS-C oceniona nieprawidłowo.
Więc to jest po prostu pojawiają się jako pusty plik i jest to naprawdę proste naprawić choć musimy zrobić to dodać ukośnik tutaj.
Przeszedłem przez to wszystko z powodu, który ma pokazać znaczenie ścieżek i upewniając się, że mamy nasze ścieżki ustawione prawidłowo.
Więc istnieje różnica między sukcesem ACT-Up and slash po ocenić kiedy dodać ukośnik.
Zasada ta mówi, poszukaj nas nie mówi się w tym samym katalogu, w którym jesteś teraz, ale w głównym katalogu.
Pokażę wam lepszą ilustrację.
Teraz wygląda to na sukces w tym samym katalogu co ten szablon Rusti.
Teraz jeśli pójdę zapisać go z cięciem i zrestartować serwer oni wrócić tutaj i odświeżyć się.
Spójrz.
Nasze style pracy.
Zauważ też mamy plik z h t m l i mamy apt SS, który jest teraz poza tym katalogu nie jest w tym samym folderze i ma odpowiednie style co oznacza, że ​​okazało się, że plik, który nam potrzebne do znalezienia.
Więc to breja Wygląda na to bardzo niewielkie, ale to rzeczywiście ważny szczegół.
Więc slash, a następnie nazwę naszego arkusza stylów czegokolwiek wewnątrz katalogu publicznym.
Więc ostatecznie będzie wyglądać stylów Slash slash ACT-UP zobacz oceny i wtedy będziemy mieć tag skryptu, gdzie mamy kod źródłowy slash slash maynt skrypty.
Tak.
A więc mamy wewnątrz katalogu skryptów katalogu publicznym i arkuszy stylów katalogu.
Na razie jednak mamy tylko jeden arkusz stylów, więc zostawimy go w takim stanie.
Niech szybko skończyć i dodać w podszablonów do innych plików, jak również.
Więc w tym jednym naszym domu, że każdy z nas zapłaci ustawionej w, a następnie w dolnej wklejony w puchnąć i zmieniać ją za stopkę i zapisać, a następnie opublikować go.
Tak.
Ta sama rzecz.
Chcemy nagłówek i stopkę.
Pozbądź się, że równie dobrze na wszystkich plikach.
Parshall za ukośnik stopka.
I to powinno być dla nas dobre.
Chodźmy odświeżyć zrestartować serwer tu i powinno to wyglądać tak samo.
Teraz, jeśli idziemy właściwą drogą otrzymujemy również nasze style i jeśli pójdziemy ciąć posty otrzymujemy style również tam.
W porządku.
Warto więc podsumować to wszystko.
Jedną z pierwszych rzeczy, które zrobiliśmy było utworzyć katalog publiczny i dodać arkusz stylów wewnątrz niego i aby za to do pracy trzeba było, aby upewnić się, aby powiedzieć express służyć katalogu publicznym.
Wtedy po raz zrobiliśmy to zrobiliśmy małą zmianę, która miała powiedzieć, wyrazić, że wszystkie nasze szablony będzie tak, chyba że zaznaczono inaczej.
Więc nie mamy napisać każdą Tak po każdej nazwy szablonu.
A potem duża zmiana, że ​​zrobiliśmy było wprowadzenie Parshall jest.
Tak zrobiliśmy katalog o nazwie Parshall może być nazwany cokolwiek.
Niektórzy ludzie nazywają to układy Parshall jest również bardzo często.
A potem mieliśmy dwa pliki lub nagłówka i stopki, a cała punktem było to po prostu pomóc wysychają nasz kod tak, że nie trzeba było dodać do każdego szablonu.
Zamiast iść do naszego szablonu, a wszystko, co musimy zrobić, to napisać to Parshall za ukośnik hetter i nie są ograniczone tylko do nagłówka i stopki możemy mieć jeden na pasku nawigacyjnym, jeśli mamy pasku nawigacyjnym na każdej stronie.
Mogliśmy kolejny częściowy, że to stary Parshall za ukośnik Neph.
Więc nie ma żadnych przepisów dotyczących tego, co możemy, a czego nie może zrobić.
Ale najczęściej są nagłówek i stopka.