1 00:00:00,390 --> 00:00:05,960 Blog uygulamamızın kurulumunu yaptığımız bazı videolara blog modelimizi hazırladık ve bu videoda 2 00:00:06,210 --> 00:00:07,540 dizin şablonu ekledik. 3 00:00:07,560 --> 00:00:10,070 Aslında henüz yeni bir rota eklemeyeceğiz. 4 00:00:10,090 --> 00:00:13,590 Bu çok hızlı olacak, ancak üstbilgi ve altbilgimiz Parshall'ınkine eklemek istiyoruz. 5 00:00:13,680 --> 00:00:16,030 Sonra semantik kullanıcı arayüzü de eklemek istiyorum. 6 00:00:16,040 --> 00:00:18,980 Ve son olarak, en üstte gerçekten basit bir nav çubuğu ekleyeceğiz. 7 00:00:19,380 --> 00:00:23,990 Şimdi başlayalım, başlık ve altbilgiyi Ejay'ı dosya olarak oluşturmak istiyoruz. 8 00:00:24,660 --> 00:00:26,810 Ve görüntülenen dizinler eğer içeride olmalıdır. 9 00:00:26,820 --> 00:00:34,200 Böylece bir make dizini eğik çizgi kullanacağız Parshall'ın ardından dokunma görünümleri Parshall'ın eğik çizgisini Pacehall'ın eğik çizgisini bize Ejay 10 00:00:34,200 --> 00:00:40,990 ettikten sonra görünümlere dokunarak Parshall'ın eğik çizgi altbilgisini çizin. J. Harika. 11 00:00:41,430 --> 00:00:42,060 Şimdi onları açalım. 12 00:00:42,060 --> 00:00:45,990 Başlığa başlayalım. 13 00:00:46,290 --> 00:00:47,960 Ve neden temel iskelet o kadar HD bir metal başlığı değildi. 14 00:00:48,570 --> 00:00:54,990 Bunu blog uygulaması olarak adlandıracağız ve bundan sonra da vücudumuza böyle ihtiyaç 15 00:00:55,470 --> 00:01:02,540 duyuyoruz ve biz bunu altbilime taşımak için şimdi bunu kesip bunu çalıştığımızı biliyoruz. 16 00:01:02,790 --> 00:01:07,010 bunun doğru olduğunu biz de biliriz görürsek. 17 00:01:07,140 --> 00:01:14,310 Üstbilgiden yazan bir paragrafa üstbilgi dosyasından şunu ekleyelim ve her sayfada 18 00:01:14,310 --> 00:01:16,710 Şimdi bunu altbilgi yapıştırmaya açalım ve aynı 19 00:01:16,710 --> 00:01:18,060 şeyi Altbilgi kaydetmeden yapalım. 20 00:01:22,980 --> 00:01:30,110 Şimdi bunu bağlamamız ve başlamamız için dizinimizde yapalım. 21 00:01:30,450 --> 00:01:33,890 Dolayısıyla, en üstteki bölümümüzde olması gerekiyor ve yolumuz, dizin dosyasında kullanmak yerine olduğumuz. 22 00:01:34,140 --> 00:01:42,360 Bu yüzden sadece Parshall'ın eğik çizgisinde bir nokta kesmesini istiyoruz. 23 00:01:42,780 --> 00:01:47,780 Ve aynı şey, burada Parshall'ın çizgisi. 24 00:01:48,240 --> 00:01:53,280 Şimdiye kadar hiç sorun çıkarmayacağımızı test edelim ve üstbilgiden veya beşteki başlık dosyasından çıkalım. 25 00:01:53,700 --> 00:02:02,130 Harika. 26 00:02:02,430 --> 00:02:02,990 Şimdi anlamsal kullanıcı arayüzü ekleyelim. 27 00:02:03,180 --> 00:02:05,530 Bu nedenle semantik Dasch açık semantik UI web sitesine sahipsin com. 28 00:02:05,880 --> 00:02:10,590 Ve sadece bootstrap gibi dosyaları indirebiliriz veya bir CDN semantik UI CDN'si içerebiliriz. 29 00:02:10,620 --> 00:02:18,080 Bu ilk örneği tıklayın, seçebileceğimiz çok 30 00:02:18,530 --> 00:02:23,790 sayıda farklı dosyanın olduğunu göreceksiniz. 31 00:02:23,790 --> 00:02:24,630 veya yalnızca 32 00:02:24,810 --> 00:02:30,120 formların yalnızca tek bileşenli bileşeni alan çizgi biçimini almasını istiyorsanız yapmanızdır. 33 00:02:30,300 --> 00:02:37,200 Bunun nedeni, semantik UI'nın tasarlandığı şekilde düzenleniş şekli, önyükleme desteğinin aksine, istediğiniz bölümün bölümümüzün altındaysa 34 00:02:37,560 --> 00:02:39,000 SS Dolayısıyla, bootstrap eleştirilerinden biri 35 00:02:39,000 --> 00:02:43,770 olan şeyin tek ihtiyacınız olan şey, küçük bir parça isterseniz hala tüm kütüphaneyi elinize almanızdır. 36 00:02:43,770 --> 00:02:46,510 Ancak tüm kütüphaneyi istiyoruz. 37 00:02:46,770 --> 00:02:48,420 Dolayısıyla tüm deyimleri 38 00:02:48,420 --> 00:02:55,920 aşağı doğru kaydırırsanız, CDN'nin anlamını söyleyen biri isterseniz, burada bir arama veya anlamsal arama 39 00:02:55,920 --> 00:03:04,190 yaparsanız burada yeniden değerlendirme yapmışsınız, bilmiyorsanız veya aradığınız halde bulmak zordur Sadece bir arama yapın. 40 00:03:04,190 --> 00:03:05,920 Aslında hiçbir şeyi daha hızlı kılmak için bir dakika sürümü yok. 41 00:03:06,000 --> 00:03:09,320 Dolayısıyla, erkeklerin değerlendirmeyi gördüğü anlamsaldır 42 00:03:09,360 --> 00:03:16,950 ve biz sizi Erl'i kopyalayıp başlığın üst dosyasındaki başlığa koyarız. 43 00:03:17,340 --> 00:03:20,040 Bu bir uzunluk etiketi. 44 00:03:20,490 --> 00:03:22,300 Ve bunun bağlantı olmasını ve daha sonra ref ile eşit olmasını istiyoruz. 45 00:03:22,950 --> 00:03:29,030 Evet evet. 46 00:03:29,120 --> 00:03:30,260 Ayrıca, rel stil sayfası türüne metin eğik çizgisini eklemeliyiz. 47 00:03:30,420 --> 00:03:34,900 C Ss Şimdi sunucu kaydedip tekrar başlatıyoruz. 48 00:03:34,940 --> 00:03:40,500 biraz önyüklemeyi ilk başlattığımızda olduğu gibi birkaç küçük değişiklik göreceksiniz. 49 00:03:41,640 --> 00:03:47,160 Ana sayfamıza bir göz atın, tıpkı yazı tipi değişikliklerini 50 00:03:47,250 --> 00:03:49,070 TAMAM. 51 00:03:49,560 --> 00:03:49,830 Dolayısıyla, 52 00:03:49,830 --> 00:03:57,720 çalışmamız anlamına gelir, üstbilgi ve altbilgideki paragraflarımızdan kurtulalım ve sıraya basit bir gezinti çubuğu ekleyelim. 53 00:03:57,870 --> 00:04:01,180 Elbette ki menülere denir. 54 00:04:01,230 --> 00:04:03,740 Bu yüzden eğer buraya 55 00:04:03,990 --> 00:04:12,810 gidersek menüde tüm farklı bileşenleri tıklarsak, koleksiyon menüsü altında bulunan menü bulmak isteriz. 56 00:04:12,810 --> 00:04:16,170 Birkaç farklı menü çeşidi var görebilirsiniz. 57 00:04:16,170 --> 00:04:18,630 Burada gördüğünüz menü var. 58 00:04:18,860 --> 00:04:22,190 Orada tablonun metin dikey magination bir Poynting menü var. 59 00:04:22,500 --> 00:04:32,090 Ve ihtiyacımız olan her şeyden çok daha fazlası var, ancak 60 00:04:32,470 --> 00:04:40,450 vücudumuzun üstünü bir div yapmak ve bunu düzgünce alalım. 61 00:04:40,590 --> 00:04:43,170 Kate sınıfı sana eşit derecede yapar. 62 00:04:43,170 --> 00:04:46,340 Düzeltildik ve tıpkı önyüklemeyle olduğu gibi sadece rengi değiştiren ters bir menü yapacağız. 63 00:04:46,340 --> 00:04:52,170 Ayette de diyebilirsin, sonra orada başka bir div gerekiyor. 64 00:04:52,170 --> 00:04:57,410 Ve bu sınıf, sanki yüklenici konteynır gibi konteynerle eşit olacaktır. 65 00:04:58,020 --> 00:05:03,830 Ve sonra orada değil başka bir div var ve bu bir Hetter öğeye eşit sınıf olacaktır. 66 00:05:04,260 --> 00:05:10,030 Ve bu, önyüklemedeki nav bar markası gibidir. 67 00:05:10,320 --> 00:05:13,550 Dolayısıyla çocuklarımızın istediği her şey blog sitesi veya ne istersek bizim uygulamanızın çağrılmasını isteriz. 68 00:05:13,560 --> 00:05:18,920 Ve bundan sonra ana sayfa için bir çapa etiketi ekleyeceğiz 69 00:05:19,050 --> 00:05:28,830 ve onu eve çağıracağız ve sınıfa öğeye eşit olarak ekleyeceğiz ve sonra eğik çizgiye gidecek değil de aynı 70 00:05:28,860 --> 00:05:37,140 şeyi yapacağız. slash loglarına gidin, henüz yok olan new slash yeni Post veya New Blog olacaktır. 71 00:05:37,140 --> 00:05:45,350 Gördüğümüz metin bu olacak. 72 00:05:45,410 --> 00:05:47,470 Ters çevrilmiş menü sabit değil bu yüzden Tamam. 73 00:05:48,350 --> 00:05:51,760 Bunun yerine bir kap. 74 00:05:51,900 --> 00:05:53,460 Ve sonra konteynırın içinde bütün bu küçük hatayı benim üzerime almalıyız. 75 00:05:53,670 --> 00:06:00,010 Bu yüzden de orada olmasını istiyoruz. 76 00:06:00,060 --> 00:06:02,670 Hepsi konteynerde. 77 00:06:03,360 --> 00:06:04,850 Ve sonra başlığımız var ve sonra Tex'e bağlanmış iki madde var. 78 00:06:05,160 --> 00:06:10,250 Şimdi ona bir göz atalım. 79 00:06:10,260 --> 00:06:12,200 Ve basit matematik çubuğumuzu alıyoruz. 80 00:06:13,500 --> 00:06:15,200 Evet, burada bazı boşluklarla ilgili bir sorunumuz var. 81 00:06:15,520 --> 00:06:17,720 Bunu bir dakika içinde halledeceğiz ama şimdi iyi çalıştığımız bir noktamız var. 82 00:06:17,730 --> 00:06:21,450 Semantik olarak sadece simgeler olarak adlandırılan basit bir simge ekleyelim. 83 00:06:21,660 --> 00:06:27,450 Kullandıklarımda bir demet var. 84 00:06:28,070 --> 00:06:30,690 Adı "Kod". 85 00:06:30,720 --> 00:06:32,960 Deneyin ve burada bulun ve sadece bir arama yapın. 86 00:06:33,120 --> 00:06:35,500 İşte burada. 87 00:06:35,550 --> 00:06:36,310 Ancak yorum ister misiniz kendi seçmekten çekinmeyin. 88 00:06:36,480 --> 00:06:39,760 Fikir bunun bir kod tabanlı blog olmasıydı, ancak başka bir şey olabilir. 89 00:06:39,810 --> 00:06:43,560 Fikri de severim. 90 00:06:43,560 --> 00:06:44,900 Her neyse bir grup var. 91 00:06:44,920 --> 00:06:46,190 Güzel olan şey, şirketlerin kullanışlı simgelerinin de olmasıdır. 92 00:06:46,350 --> 00:06:51,980 Çok dibe inanıyorum, onlara sahip olduklarını ve uygulamanızla bağlantı 93 00:06:52,020 --> 00:06:56,610 kurduğunuz tonlarca farklı marka ve ortak şirkete gidiyoruz. 94 00:06:56,610 --> 00:06:59,100 TAMAM. 95 00:06:59,430 --> 00:07:00,070 Bu kod simgesinin bir adı ve ben hemen buraya blog sitesi üstbilgisinin yanına ekleyeceğim. 96 00:07:00,300 --> 00:07:07,160 Yani burada onun eşyası vardı ve tek ihtiyacımız göz gözü. 97 00:07:07,470 --> 00:07:11,190 Ve bir sınıf koduna ve bir simgeye sahip olması gerekir. 98 00:07:11,670 --> 00:07:17,400 Gerçekten basit olan sadece simgenin adı ve 99 00:07:17,400 --> 00:07:26,040 daha sonra sınıf simgesi yenilendi ve bizde küçük bir kodumuz var. 100 00:07:26,040 --> 00:07:26,290 Oraya gelirim. 101 00:07:26,280 --> 00:07:27,340 Bu simgeyi biraz daha büyük yapmak için küçük bir değişiklik yapalım. 102 00:07:27,660 --> 00:07:31,830 Bunu yapmak için burada sadece bir 103 00:07:31,860 --> 00:07:38,730 stil etiketi yazabiliriz ancak bunun yerine, kurduğumuz genel dizini kullanalım. 104 00:07:38,730 --> 00:07:40,630 Dizini hala yapmamız gerekiyor. 105 00:07:40,680 --> 00:07:41,930 Ama biz hizmet sunulduğunu ayarladık. 106 00:07:41,940 --> 00:07:44,570 Dolayısıyla, stil sayfalarını eğik çizgi olarak yapacağız ve bunu sadece uygun Cs'ler henüz yok diye çağıracağız. 107 00:07:44,700 --> 00:07:51,340 Bu nedenle bir dizin herkese açık hale getirmeliyiz ve sonra da dizin 108 00:07:51,690 --> 00:08:03,330 genel açık artırma stil sayfaları yapalım ve son olarak ortak açık artırma stil sayfalarına dokunun Keskinlik uygulaması Dotsie SS, bu 109 00:08:03,330 --> 00:08:11,490 yüzden de genel stil sayfalarını açmak istiyoruz. SS sekmesinin tamamlanması Aptos kesinlikle arkadaşınız orada. 110 00:08:11,730 --> 00:08:16,710 Ve tüm simgeleri biraz daha büyütmek için. 111 00:08:16,740 --> 00:08:19,990 BE2 boyutlu IEM'leri, konteynerin iki 112 00:08:20,400 --> 00:08:26,370 katına veya üstteki kaydın çift boyutuna benzer şekilde ayarlayacağız. 113 00:08:26,370 --> 00:08:35,940 Aslında yalnızca bu simgeye sahip simgeler ve stewe simgelerinden ziyade biraz daha belirgin olacaksınız ve 114 00:08:36,600 --> 00:08:39,250 Tamam o halde şimdi sunucu yedeklemeye başladık ve sayfayı yeniledik. 115 00:08:39,560 --> 00:08:45,180 Sadece kişisel tercih meselesi olan simgenin daha da büyüdüğünü görmeliyiz. 116 00:08:45,180 --> 00:08:49,530 Ancak bence daha büyük olduğunda biraz daha iyi görünüyor. 117 00:08:49,530 --> 00:08:52,340 TAMAM. 118 00:08:52,710 --> 00:08:52,940 Yaptığımıza göre, bu videoda yapmamız gereken her şeyle işimiz bitti. 119 00:08:52,950 --> 00:08:56,850 tek bir satır olsa bile şimdi her tek şablona 120 00:08:56,850 --> 00:09:03,210 her CSSA özel CSSA ekleyebiliyoruz ve size nasıl göstermek istedik biz semantik UI içerebiliriz. 121 00:09:03,300 --> 00:09:09,810 Dolayısıyla sadece Header Footer dosyalarına eklenen nav çubuğunu kendi özel CSSA dosyamıza eklemek istedim; 122 00:09:10,500 --> 00:09:13,580 Tamam, bir sonraki videoyu yeni ile alıp yeni bloglar oluşturabilmemiz için yaratacağız. 123 00:09:13,860 --> 00:09:19,420