Asp .Net Core ile Medium Tarzı Blog Sitesi Yapımı-Bootstrap Eklemek

Yavuz Unver
Sep 9, 2018 · 2 min read

Bugün projemize bir tasarım ekleyeceğiz bunun için bootstrap sitesinde bulunan hazır tasarımlardan birini kullancağım.

Yukarıya linkini bıraktığım tasarımı kullancağım. Bunun için şu linkten bootstap’ı indirip zip içindeki dosyaları wwwroot klasörüne atalım.

Ardından linkini verdiğim temanın kaynağını kopyalayıp Index.cshtml içerisinde Merhaba Dünya yazan yerden aşşağı yapıştıralım. Footerdaki @mdo yazısı c# kodlarıyla çakıştığı için mdo’nun başındaki @ işaretini silelim. Neden çakıştığını ilerleyen bölümlerde anlayacaksınız.

Artık projemizi çalıştırabiliriz. Eğer hiç bir hata almazsanız tasarımdaki yazılar görünecek ancak js ve css dosyalarını bulunmadığı için tasarım düzgün görünmeyecek. Şimdi wwwroot dizini altındaki js ve css doyalarımızı temadaki kırık linkler ile tek tek değiştireceğiz. Bu sırada indirdiğimiz dosyalar arasında olmayan bazı js ve css dosyalarını ise sayfa kaynağı üzerinden erişip projemize dahil edicez. Bu adımları anlatmak blog yazısında biraz zor olduğu için siz github linki üzerinden tamamlanmış projeyi indirip ilgili birkaç dosyayı kendi projenize kopyalayabilirsiniz.

Linkteki kodlar benim düzenlediğim ve sorunsuz şekilde görüntüleyebildiğim kodlar. Bunları kendi projenize direk ekleyebilirsiniz. blog.css dosyasını wwwroot/css dizini altına ekleyin.

Herşey güzel ancak tema üzerindeki yazılarla benim bir işim yok bu yüzden yazıları kaldırıp saf temayı ekranda bırakıyorum. Ayrıca sağ taraftahi Archives bölümlerinide kullanmayacağım için kaldırıyorum.

Son olarak ilgili dosya yukarıdaki gibi oluyor. Sadece tek bir örnek blog yazısı bırakıyorum bunuda ilerde kendime model olarak kullancağım.

Şimdi bu temayı ayrı bir dosyaya koyacak ve Index.cshtml içerisinden temamızı çağırarak her seferinde her ekran için bu kodları tekrar etme zahmetinden kurtulacağız.

Views klasörü altında Shared isimli bir klasör daha oluşturup içerisine _Layout.cshtml isimli bir dosya oluşturuyoruz. Ardından aşağıdaki gibi düzenleme yapıyoruz.

Projeyi çalıştırdığınızda herşeyin düzgün olduğunu göreceksiniz. bu işlem bizi sürekli temayı tekrar etmekten kurtardı. Bundan sonra oluşturacağımız her dosyada Layout olarak _Layout dosyasını göstermemiz yeterli. Index.cshtml içersine yazdığımız kodlar ise _Layout.cshtml dosyasındaki RenderBody() fonksiyonunun olduğu yere eklenerek çalıştırılır.

Eğer tüm dosyalarda tek tek Layout belirtmek istemiyorsak Views klasörü içine _ViewStart.cshtml adında bir dosya eklemek ve içeriğini aşağıdaki gibi düzenlemek yeterli.

Bu noktadan sonra oluşturduğunuz cshtml uzantılı dosyalara Layout vermeniz gerekmez. DotNet Core sizin için bu bağlantıyı gerçekleştirecektir.

Bir sonraki yazı

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade