Bu bölümde sayfalarımıza bootstraps eklemesi yapacağız. Bootstraps ile sayfalarınız daha estetik güzel bir görünümü hızlı bir şekilde kazanabilir. Bu .css ve .js ekleme işini tabiki ana şablona yani base.html ye uygulayacağız. Çünkü base.html de yapacağız her değişiklik diğer ona bağlanmış sayfaları da değiştirir. Böylece her sayfaya tek tek tasarım yapmak zorunda kalmayız.
**Django CSS ve JS dosyalarının bulunduğu klasörü STATIC isimli klasör altında arar. O zaman bizde blog app mize static klasörü ve altına CSS ve js klasörleri eklemeliyiz.
**O zaman tasarımımızı base.html isimli dosya tanıması için hangi komut nereye yazılması gerekir?Cevap hemen verelim:
base.html dosyasının içinde:
base.html dosyasına girip en üste {% load static %} komutu girilir.Aşağıda kodun nereye girildiğine bakın.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
.
.
.
BOOTSRATPS İN SAYAFALARIMIZA EKLENMESİ AŞAMALARINI GÖRELİM
1. Google arama motoruna " booststraps start templates" diye arama yapalım ve örnek bir bootstraps i inceleyelim. Bootsrap in sitesinde geçen kodu aşağıya ekledim. Ancak bu kodun tamamını bizim
base. html dosyamıza almayacağız. Sadece istediğimiz kısımları alacağız.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Yukarıdaki bootstrap in sitesindeki bu koddan sadece bazı bölümleri alacağız ve base.html dosyamıza ekleyeceğiz.
2. Yukarıdaki koddan base.html eklenecek birinci kısım aşağıda gösterilmişTir. Kodda geçen
<head> ....</head> arasındaki kodlar alındığına dikkat edin.
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
3. Bootstrapin sitesinden alınan kodlardan bu sefer body etiketi içindeki içeri script kodları alalım. Bu kodlar yine projemizdeki-blog app in altında bulunan base.html dosyamızın <body>......</body> arasına yerleştirin.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>4. base.html dosyamızda bulunan content imzi div etiketi içerisinde daha estetik gösterelim. base.html e aşağıdaki kodu ekleyin.( <div> etiketi eklenmesi aşaması)
<div class="select2-container">
{% block content %}
{% endblock %}
</div>
5. Şimdi CSS ve SCRIPT leri barındıracağımız klasörü hazırlamak gerekir. django frameworkte CSS ve SCRIPT klasörlerini static isminde bir klasör altında saklamanızı sağlar.
**Şimdi sırasıyla-projede -blog app in -altına static adında klasör oluşturmak gerekir.
**css ve scriptleri bu klasörün içinde tutumak gerekir.
**Çünkü django da setting.py ana ayar dosyası içinde static tanımı mevcuttur. Django bu static tanımı altında css ve js dosyalarını arar.
O zaman base.html dosyamızda CSS ve SCRIPT ile ilgili kodlar aşağıdaki gibi eklenmiş olması gerekir.
base.html dosyamızda :
** <head> ......</head> arasına CSS ayarı ile ilgili linkler aşağıdaki gibi kodlar eklenmiş olmalıdır. Aslında bunu yukarda 2. adımda eklemiştik. Farklı yeni eklemeler olduğuna dikkat edin.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/style.css'%}">
** Yukarıdaki kodu incelemeye devam edelim. base.html dosyamıza static altında CSS dosyalarımızn yolunu aşağıdaki gibi gösteriyoruz.
( Süslü parantez ve yüzde sembolü ile başlayıp biten ve arasına static komutunu eklediğimizi görüyoruz.)
href="{% static 'blog/css/bootstrap.min.css' %}">
** Tabi burda şu soru akla geliyor benim CSS klasörüm var ama içi boş. Buradaki örnekte CSS altında bootstraps.min.css isimli nereden geldi? diye düşünmeniz normal. Umarım düşünmüşsünüzdür. :D Bu sorunun cevabı hemen altta açıklandı. Dikkatli okuyun ve uygulayın.
Bu dosyayı kendi oluşturduğunuz CSS klasörüne şöyle ekleyeceksiniz.
Arama motoruna "bootstraps indir" dediğininzde bootstraps in kendi sitesinden download edebilirsiniz. İndirdiğiniz zipli dosyada bulunan CSS ve JS isimli klasörün içeriğini kendi projenize kopyalamanız yeterli. Orada bootstraps.min.css dosyasının CSS klasörünün içinde olduğunu görürsünüz.
** Bir de style.css içerisinde kendi yazacağımız stilleri barındıracağımız dosyamızı(stylesheet dosyası) static/css klasörü altında oluşturalım. Eklediğimiz bu dosyanın yolunu da base.html ye söylemek gerekir bununla ilgili kodumuz aşağıdadır.
( Dikkat edersek yine süslü parantez yüzde sembolü ve arasına static ile başlayan yolu yazıyoruz. kod hemen aşağıda)
<link rel="stylesheet" href="{% static 'blog/css/style.css'%}">
NOT: Bu style.css dosyası içerisine şu kodu eklemeyi unutmayın. Bu kod oluşturduğumuz navbar ın altında içerik kalmasını önler. Nar bar ve içerik düzgün görünür.
style.css içine yazılacak kod:
body {
padding-top: 70px;
}
ŞİMDİ SIRA GELDİ BASE.HTML DOSYASINA NAVIGASYON BARINI(MENÜSÜNÜ) EKLEME ADIMLARINA:
1. base.html dosyasının içerisindeki kodlar kalabalık olmaması için navbar için ayrı bir html dosyasında hazırlayacağız. Dosyamızın adı da navbar.html olsun. Bu dosyayı yine home.html, hakkinda.html dosyaların bulunduğu klasöre ekleyin.
** navbar.html dosyasını anaşablon olan base.html dosyasının içine nasıl çağırıp kullanacağız. Bunun için base.html dosyasında <body>.....</body> etiketlerinin arasında en üste aşağıdaki kodu ekleyin.
{% include 'blog/navbar.html' %}2. navbar.html dosyası bizim bloğumuzun navigasyonunu gösterecek. Yani bizim üst menümüz olacak.
navbar tasarımını yine bootstrap üzerindeki tasarımlardan kullanarabiliriz. Buraya kadar bootstraps ayarlarını zaten yaptık. Şimdi arama motoruna "bootstraps nav menu" araması yaparak bootstraps in istediğiniz tasarımda menünün kodlarını kullanabilirsiniz.
Bizim projemizde navbar.html için aşağıdaki kodlar kullanıldı.
navbar.html içerisindeki kod:
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-danger">
<a class="navbar-brand" href="{% url 'blog-home' %}">İhsan AKARS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="{% url 'blog-home' %}">Anasayfa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'blog-hakkında' %}">Hakkında</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Ders</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dersler
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Bilgisayar Bilimi</a>
<a class="dropdown-item" href="#">Dersler</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Yukarıdaki kodlarda dikkat ederseniz linklerde yine süslü parantez ve yüzde içerisinde kodlarımızın yazılışına dikkat edin. Aşağıdaki linkte projemizde daha önce views ilgili bölüm yazılırken name parametresi (name="blog-hakkında) kullanılmıştı bu name ile HTML döküman arasında yer ile bağlantı kurulduğuna dikkat edin.
href="{% url 'blog-hakkında' %}">Hakkında</a>
0 Yorumlar