Bu noktaya kadar, açık temsilcileri tamamen duraksız olarak geri gönderdik. Hiçbir C ss sadece saf h
t m dahil hiçbir javascript yoktu.
Bu videoda size bir stil sayfası veya bazı Javascript gibi öğeleri nasıl dahil etmeye başlayacağımızı göstereceğim.
Ve ben de size Parshall'ın adını kullanarak şablonlarımızı nasıl kurabildiğimizi göstereceğim.
Öyleyse başlayalım.
Uygulamamın bulunduğu son iki videoda kullandığım aynı uygulamayı kullanıyorum.
Evet ve üç ana rotamız var.
yol rotamız var ve sonra da Slash şeyine aşık oluyoruz.
Ejay'ın H1 ve Palm C'nin şablonunu oluşturduğu
Sonra her şablona karşı sevgiyi ortaya çıkaracak değişken şey rota ve size yolda yazdıklarımıza
ve o zaman ne yazarsak göstereceğim.
Ve sonra beyan ve daha sonra alt kısmında küçük bir paragraf ve sonra da mesajlar E işlebilir eğik
çizgi posta yolu var. J. şablon ve bunun içinde.
İki döngünümüz var.
Şimdi bazı stilleri dahil etmek istiyoruz diyelim.
Artık bildiğiniz gibi, mor renkten hoşlanıyorum.
Diyelim ki tüm cesetleri mor yapacaktım, tüm farklı renk şablonlarındaki metin rengi
mor olmalı.
Post sayfasından başlayalım ve yapabileceğim şey, stilin açılıp kapanacağı bir stil etiketi eklemek ve
ardından stilimi buraya gövdesine yazıp böyle bir renkte mor yapacak ve kaydetmek olacak.
Unutmayın ki bunun stilleri dahil etmenin en ideal yolu değil ve ilk önce bir nedenden dolayı
sana gösteriyorum çünkü çünkü onu yeniden biçimlendireceğiz ve yalnızca bir an iyileştireceğiz ancak işe yaradığından
emin olalım.
Vücutta mor renkte olsun.
Sunucu düğümü uygulamasını başlatalım.
Evet, tarayıcıya gidelim ve Yazının sayfasında yenileyelim, mor alacağımızı görebilirsiniz.
Ve eğer başka bir rotaya gitmiş olsaydım mor olmazdım.
Bunun nedeni, tamamen ayrı şablonlar oldukları ve yalnızca şablon şablonuna stil etiketi ekledikleridir.
Bu yüzden, her üçünün de mor olmasını istersem, evdeki başka bir stil etiketine
ekleyebilirim ki Ejay ve aynı stil etiketi seviyorum.
Evet ve sunucuyu yeniden başlatmayı kaydetmek sayfamı yenilemek ve burada mor H-1 alıyorum ve eğer Rusty'ye aşık
olursam bu stil etiketinden de mor metin alıyorum.
Burada karşı karşıya olduğumuz iki ana konu var.
Birincisi, bu kodun üç farklı kere tekrarlanması meselesidir.
Üç farklı şablon üzerinde aynı stilleri istiyorsanız, bunu başarmanın daha iyi bir yolu
olmalı.
Ve orada.
Ve o ikinci ele alacağız.
İyi bir fikir değil, stil etiketini kullanarak bu sorunu çözerek başlayacağız.
yapmak istiyoruz, harici bir stil sayfası kullanın ve link etiketi kullanarak bu stil sayfasına bağlanır.
Bunun yerine
Bu yüzden önce işe yaramayacak olan bağlantı etiketini yazacağım çünkü bir stil sayfamız yok
ama o saniyeyi oluşturacağız.
Öyleyse bağlantıyı ve daha sonra raşl'e eşit stil sayfasını sağlamamız lazım.
Ve bu bizim stil sayfamızın adı olmalı ve biz sadece Dot diyeceğiz.
SS Tamam, bu sadece Post'un E.'inde. J. şablon şimdi kazandıracaktır.
Ve bunu gidelim apt.
getireceğiz ve hepsine bir isim verilebilir, ancak kamu, bu dizin için çok yaygın ve konvansiyonel bir isim.
Cs'leri apt J ile aynı dizinde yaratmak yerine J Evet, biz aslında tüm
stil sayfalarımızı yazdığımız tüm javascript'leri koyacağımız başka bir dizin oluşturacağız ve
sonra istediğiniz tüm diğer öğeleri kullanılabilir ve halka deriz hale
Ne zaman doğru yer olduğundan emin ol.
Ve sonra dizini herkese açık hale getirin ve dosyamızın adının burada olduğunu ve kaydettiğinizi görmek için bir kamu
açık artırma uygulaması oluşturun ve bir dakika bekleyin, bu halka açık
olmamalı diye düşünebilirsiniz.
Atış değerlendir.
Ve maalesef cevap hayır.
İstediğiniz kadar rahat bırakacağız SS, stil sayfalarımızın ve javascript'lerimizin genel dizininin içinde olduğunu
ifade edecek ve ortak dizini bizim için hazırlayacak, böylece yalnızca dosya adlarını
kullanarak bağlantı verebileceğiz. Bunu bir dakika içinde gösterebilirim.
SS dosyasını gören ve bazı stilleri ekleyen ortak açık artırma uygulamasını açalım.
Farklı bir şeyler yapalım.
Vücut veya arka plan yapacak.
Bu korkunç olacak.
Bizi arka planda sarı ve renk mor olarak yapacağız.
Pekâlâ, şimdi burada kapatacağımızı söyleyen gerçekten kaba bir tarzı var ve çalışıp çalışmadığını bileceğiz.
Eğer bu mesaj E. J. mor metinte şablonlar iğrenç sarı
bir arka planla gösterildiğinden, henüz çalışmayacak ama sana kendiniz göreceğiniz şekilde göstereceğim.
Yani Noad apt.
J. S. geri dönüp sayfayı yenileyip post sayfaya gitmeliyiz ve hiçbir şey bulamıyoruz.
Ve burada konsolosluğunu açarsam, araştırma yükleyemediğini söyleyen bir hata alıyorum.
Sunucu 404 durumuna yanıt verdi ve cihaz başarısı bulamadı.
Ve bunun sebebi oldukça basittir.
Bir web uygulaması oluşturduğunuzda ve bir web sunucusu başlatmak için Express'i kullandığımızda, bunu
istemek istediğimizi bilmediğini gördüğü her dosyaya otomatik olarak hizmet etmemektedir.
Varsayılan ise hiç bir şeye hizmet etmemektir.
Görüşmeler dizininden başka.
Dolayısıyla açıkça ifade etmemiz gereken başka bir şey istersek, halka açık dizinimize ya da elimizdeki
diğer yönetmenlere hizmet etmen gerekir.
etmek zorundayız ve muhtemelen ifade, bunu hareketimizin içinde yapmak için kolay bir yol sağlar.
Bunu ifade
Evet yukarı Ben kullanmak için bir app ve sonra parantez içinde eklemek için gidiyorum.
EXPRESS Statik yapar.
Sonra da parantez içerisinde yine public kelimesi bulunur ki bu da bizim dizininizin adıdır.
Ve bu, kamuya açık dizinin içeriğine hizmet etmeyi açıkça söyleyecektir.
Ve sunucuyu yeniden başlatıp sayfayı yenileyip konsolosluğumu kapattığımda sarı arka planımı ve mor
yazı tipini alıyorum ve konseyde herhangi bir hata görmüyorum.
sayfalarını diğer sayfalara eklemek istiyorsanız, sadece gidip bu bağlantı etiketini kopyalayıp üstüne koyun.
Ve eğer bu stil
Ve elbette istedik ve biz onlara farklı isimler vererek ve her ikisi de ortak
dizinde olduğundan emin olmak için onlara bağlantı verebilseydik, birden fazla stil sayfası da olabilirdi.
Parshall'a geçmeden önce sana hızlı bir şey göstermek için biraz zaman ayırmak istiyoruz, kodunu biraz daha kısa sürede yapmamız
için yapabileceğimiz şey, her E'yi eve yazdığımız. J. evet sevdi.
E. J. E.'yi gönderdi. J. Evet,
bu gerçekten küçük ancak biz Ejay'ı vaktinden önce kullanacağımızı açıkça söyleyebiliriz ve
bunları bırakıp sadece evde yazıp evrimleştirebiliriz ve dosyaların Ejaz dosyaları olacağını otomatik olarak bekleyecektir.
Bunu yapmak için uygulama veri seti görüntüleme motorunu kullanıyoruz ve ardından ikinci argümanı E olarak geçiyoruz. J. sadece
öyle.
Ve sunucuyu yeniden başlatmayı bırakırsak, o dosyaların Ejaz dosyaları olmasını bekleyecektir.
Ve eğer yenilersek.
Hiçbir şey değişmemelidir.
Hala çalışıyor.
Ve şimdi Ejay'ın bize söylememize gerek yok.
Bu çok küçük bir değişiklik.
Size göstermek istediğim bir
sonraki şey biraz daha önemli ve şablonumuzu kurutmamıza yardımcı olacak.
Şu anda bu stil sayfamız var.
Stil sayfasındaki bu bağlantı tüm
şablonlarda tekrarlanıyor, ancak eksik zamanımızın kaynağı olan plakalarımızı kaybettiğimizden çok daha önemli bir şey var.
Kanal bandını burada eksik.
Andrew'un kayıplığı eski etiketlerini ve
kafamızın içinde ve başının içinde beklediğimiz tüm normal metni yaşlandırdı.
Başlığa ihtiyacımız var ve uygulamanıza başlığı vereceğiz.
Demo uygulaması olarak adlandırın ve vücuda da ihtiyacımız var.
Ve sonra vücutta bu içeriği koymalıyız ve
o zaman tüm diğer dosyalar üzerinde aynısını yapmamız gerekiyor.
Ve bunu yapmayacağım çünkü
zaman kaybı ve bu kodu kopyalamanız ve her bir şablona koymamamız gereken daha kolay bir çözüm
var, tıpkı bu tek bağlantı etiketini kopyalamamamız gerektiği gibi ve her bir şablona da koyun.
dahil edebileceğimizi yazabileceğiniz dosyalar şablonlarıdır.
Parshall ve Parshall'ın adını kullandığımız yöntemle
çevremizdeki temelde bu tür şablonlar yaratacak diğer şablonlara
Kazan tablasımızın üst yarısını kafasındaki her şeye sahip olacağız.
Belli bir sitede oluşturduğumuz her sayfada neredeyse daima aynı olacaktır.
Aynı stil sayfası aynı başlıkta.
Dolayısıyla bunu kendi şablonumuz yapalım.
Ve sonra en altta bunu kendi şablonumuz yapacağız.
olduğumuza bağlı olarak değişen içeriğimiz olacak.
Ardından, ikimiz arasında hangi şablona bağlı olduğumuza veya hangi sayfaya
Öyleyse yapacağımız temelde bunu kendi şablonuna çevirmek.
Bunu kendi şablonuna dönüştürün ve
sonra bu dosyalardan her birinde kendisine atıfta bulunduğumuz şablonları kullanıyoruz.
Yani böyle bir
şey söyleyebiliriz Ve bu geçerli bir kod değil ancak include başlık şablonu gibi bir şey yapacağız ve daha sonra dipnotta olduğu gibi dipnotta da aynı şeyi yapacağız.
Bu şablonları veya Parshall'ları yaratmamız gerekiyor ve bunu yapmak için, görünüm yerine yeni
bir dizin oluşturacağız ve biz Parshall'ın bu dizini arayacağız.
Bu yüzden, Parshall'ın dizin görünümünü çizgi haline getirip halledeceğiz.
Sonra Parshall'ın yerine iki dosya yapacağız ve ilki her biri bize
ait eğik çizgi Parshall'ın eğik çizgi heterterini kullanacak ve sonra altbilgi haricinde başka
bir kısmi aynısını yapacağız ve bunları üst ve alt Ejaz gibi de diyebiliriz ilk ve ikinci ne
olursa olsun onlara aramak istediğiniz ancak üstbilgi ve altbilgi kesinlikle standart adıdır.
Bu iki dosyayı yapacağım
ve sonra onları açacağım ve bu sefer okulda okula başlayacak ve
başlığı açacak ve bu genelge içinde kopyalayacağım sadece kesip çıkartıp bunun yerine buraya koyacağım başlığı.
Dolayısıyla, her
sayfanın üstünde istediğimiz budur ve daha sonra alttaki yerine aslında yalnızca gövde ve kapanış ekibi etiketi olan şablonun alt kısmıdır.
Aynen böyle.
Ve başka bir şey istediysek.
Bu yüzden biraz daha belirgin bir şey yapacağım.
Bir web sitesinde göreceğimiz
ticari marka veya başka bir altbilgi metnine benzer bir paragraf yazan bir paragraf yapalım.
Onu bunda bırakacağız.
Ve bu nedenle bunu altbilgiyi eklediğimiz her sayfada görmeyi umuyoruz.
Kısmi.
TAMAM.
Böylece iki kısmi yapılır.
Onları kapatın.
Bunu sadece şu şekilde düzelt.
Pekâlâ.
Ve şimdi kısmi parçaları eklemek istiyoruz.
Öyleyse sevgimizle başlayalım.
Her birimiz ve şimdi bu başlık kısmen ekleneceğiz.
Dolayısıyla, Ejay'de yeni bir bit kod kullanmamız gerektiği gibi etiketleri de içermektedir.
Ve sonra dosyanın adı sadece hetter ve Ejay dosyasını eklemek
zorunda değiliz çünkü zaten Ejaz dosyaları arıyor.
Yani sadece başlık ekleyin ve bu aslında hemen çalışmayacak ve sana neden göstereceğim.
Bırak da altbilgiyi buraya koyayım.
Ve sunucuya başlıyorsam burada ve sonra düğüm boşluk bırakacağımdan emin ol.
Apajör Evet.
Ve sayfayı yenilerseniz ve bu sadece aşk çalışması J.'de bulunur. S. şablonu.
Bu yüzden eğik çizgiye gitmeliyiz.
Resti'ye aşık ol ve biz bir hata edinin.
Böyle bir dosya ya da dizin yok.
Evet demo eğik çizgi eğik çizgi çizelgesi.
E. J. Evet.
Bu bize iki şey anlatıyor.
Birinin Ejaz dosyası olması gerektiğini biliyor.
Bir başlık arıyor.
Evet, ancak doğrudan kullanıcı dizinine bakıyor.
Fakat gördüğünüz gibi, görünümlerin
Pershall'ın eğik çizgisini heterodox ejay çizgilerine bakmasını istiyoruz.
Dolayısıyla, yolumuzu biraz
buraya değiştirmeliyiz ve onu Parshall'ın Kesikli Hetter ve Ayrı Satır'ın alt çizgisi olarak belirtmek için değiştirmeliyiz.
Ancak yine de bunu düzeltmeyecektir.
Ve ben tekrar başlattığımda
ve kısmi yenilendiğinde ne olacağını bir kez daha göstereceğim iyi geçti.
Ve elemanlara geçersek altbilgiyi en altta tuttuğumuzu görebiliriz ve bedenimize sahibiz.
Ve kapanış etiketleri her seferinde ancak stiller uygulanmıyor.
Mor ve sarı olmalı ve sadece siyah ve beyaz.
Ve başımıza bakarsak bağlantı etiketimize sahibiz ve apcupsd adlı bir dosyaya bağlanıyor.
SS Ama bu işe yaramıyor.
ve ayrıca altbilgiyi de gördüğünü göreceksin.
Kaynaklar sekmesine bakarsak, gönderilen bu Rustie dosyasına sahip olduğumuzu ve üstbilgimize sahip olduğunu ve ana içeriğe sahip olduğunu
Bu bir araya getirilmiş dosyaya benziyor, çünkü bir şey geri göndeririz.
Bu yüzden bizim için üç Parshall'ın veya iki Parshall'ın
Artı içeriğiyle bu dosyayı yapar ve geri gönderir.
Ve sonra, bu ACT-UP'in göreceği şey tamamen boş olduğunu söylüyor.
Bunun anlamı bizim APS-C'yle bağlantılı olduğumuzun yanlış değerlendirilmesidir.
Dolayısıyla, yalnızca boş bir dosya gibi görünüyor ve yapmamız gereken
bir şey olsa da, burada basitçe bir eğik çizgi eklenmesi çok basit bir düzeltme.
Bütün bunları, yolların önemini
göstermek ve yollarımın doğru bir şekilde kurulduğundan emin olmak için bir sebeple geçirdim.
Böylece, eğik çizgiyi eklediğimizde, ACT-UP başarısı ile eğik çizgi arasında bir fark var.
Temel olarak, aramamızın, şu anda bulunduğunuz dizinde
değil, kök dizinde olduğunu söylediğini söylüyor.
Sana daha iyi bir illüstrasyon göstereceğim.
Şu anda bu Rusti şablonu ile aynı dizinde başarı arıyor.
Şimdi gidip eğik çizgi ile kaydetmek ve sunucuyu yeniden başlatmak burada geri dönmek ve şimdi yenilemek.
Bir göz at.
Stillerimiz çalışıyor.
Ayrıca, htm
dosyasına sahip olduğumuzun farkındayız ve şu anda o dizinin dışındaki SS'yi aynı klasöre
yerleştirmemekteyiz ve bulmamız gereken dosyayı bulduğu anlamına gelen doğru stilleri var.
Dolayısıyla o sümük çok küçük gibi görünüyor, ancak aslında önemli bir ayrıntı.
Böylece eğik çizgi ve ardından stil sayfamızın adı herkese açık dizinde bir şey.
mayıs slash için kaynak kodumuza sahip bir betik etiketine sahip olacağız.
Sonuçta, Slash stil sayfalarının eğik çizgi ACT-UP'e bakmak gibi bir şey yapacağına karar verdikten sonra betik slash
Evet.
Ve böylece halka açık dizin komut dizini ve stil sayfaları dizinimize sahip olacağız.
Halihazırda bir stil sayfamıza sahibiz ancak bu şekilde bırakacağız.
Hızla bitirelim ve diğer dosyalara kısmi dosyalar ekleyelim.
Bu yüzden, her birimizin ödeyeceği evimiz belirlenir ve
sonra alt kısımda şişirilir ve altbilgi olarak değiştirilir ve kaydedilir ve sonra gönderilir.
Evet.
Aynı şey.
Üstbilgi ve altbilgiyi istiyoruz.
Dosyaların hepsinden de kurtulun.
Parshall'ın eğik çizgi altbilgisi.
Ve bu bizim için iyi olmalı.
Yenileyerek sunucuyu tekrar buraya getirelim ve bu aynı görünmelidir.
Şimdi doğru yoldan gidersek stilleri de
kazanırız ve eğik yazılara gidersek stilleri de elde ederiz.
Tamam.
Bu yüzden hepsini özetleyelim.
Yaptığımız ilk şeylerden biri, genel dizini oluşturmak
ve içindeki bir stil sayfası eklemekti ve bunun çalışması için express'in genel dizine hizmet etmesini söylemekten emin olmamızdı.
Sonra bir kez yaptık, aksi belirtilmedikçe tüm şablonlarımızın evet
olacağını ifade etmek için küçük bir değişiklik yaptık.
Dolayısıyla, her şablon adından sonra her bir Evet yazmak zorunda değiliz.
Ve sonra yaptığımız büyük değişiklik Parshall'ları tanıtmaktı.
Bu yüzden Parshall'ın adı verilen bir dizin oluşturduk.
Bazı insanlar ona düzenler derler Parshall'ın da çok yaygın.
Ve sonra iki dosya ya da üstbilgi ve altbilgi bulduk
ve bunun tam anlamıyla yalnızca kodumuzun kurumasına yardımcı olacağız, böylece her bir şablona bunu eklemek zorunda kaldık.
Bunun yerine şablonumuza gidiyoruz ve yapmamız gereken tek
şey, Parshall'ın eğik çizgi hetterini içeriyor ve üstbilgi ve altbilgi ile sınırlı değiliz, her bir
sayfada bir gezinti çubuğumuz varsa, gezinme çubuğumuz için bir tane içeriyor olabiliriz.
Eski Parshall'ın eğik çizgisini eklememiz gereken başka bir kısmi olabilir.
Yani yapabileceğimiz ve yapamayacağımız konusunda herhangi bir kural yok.
Ancak en yaygın olanı üstbilgi ve altbilgidir.
Pekala, tamam mı