Django Base Template-Layout
Bir önceki dersimizde template dosyaları yani html dosyalarını django ile nasıl yöneceğimizi öğrendik. Ancak her html sayfasında olan ortak kısımları da tüm html sayfalarında tekrar tekrar yazmamız gerekti. Örneğin; uygulamanın üst kısmındaki navbar kısmı her sayfada ortak bir bölüm dolayısıyla bu gibi ortak kısımları her html sayfasında tekrar tekrar yazmak yerine bir template dosyasında bir kere tanımlayıp her html sayfasının bu kısımları kullanmasını sağlayabiliriz. Peki ortak kısımları içerecek olan template dosyasını nereye ekleyeceğiz?
Önceki dersimizde öğrendiğimiz gibi her uygulama içerisindeki templates klasörü django ile otomatik olarak taranır. Dolayısıyla templates klasörü için ekstra bir ayara gerek kalmaz. Ancak base template dosyasını içerecek olan templates klasörünü her django uygulamasının ulaşacağı ortak bir alanda oluşturacağım. Ancak bu klasöründe ulaşılabilir olması için ekstra bir ayara ihtiyacımız olacak.
templates/base.html dosyasının erişebilir olması için settings.py dosyasında ayarlanması gerekiyor.
DIRS bölümünde uygulamanın ana dizini (BASE_DIR) ile "templates" klasörünü birleştirip ulaşılabilir olmasını sağlıyoruz. Artık django her uygulama altındaki templates klasörünü ve ana dizin altındaki templates klasörünü tarayacaktır.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
BASE_DIR / "templates"
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
Peki artık html dosyalarındaki html iskeleti yerine sadece base.html dosyasında bir html iskeleti oluşturalım.
base.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
burada content isminde bir blok oluşturduk. Diğer html sayfalarında yazdığımız içerikler base.html ile birleştirilecek. Ancak her html sayfasının en başına hangi template dosyasını şablon olarak kullanacağını "extends" komutuyla belirtmeniz lazım.
index.html
{% extends "base.html" %}
{% block content %}
<h1>Anasayfa</h1>
{% endblock %}
posts.html
{% extends "base.html" %}
{% block content %}
<h1>Blog Listesi</h1>
{% endblock %}
Sayfalarımızı ziyaret edelim.
Gördüğünüz gibi index.html sayfamızın kaynağında html iskeleti mevcut ancak index.html sayfasında html etiketleri mevcut değil, bu içerikleri base.html 'den alıyoruz.
Base Template' e bir de title bölümü ekleyelim. Ayrıca ortak olan bir içerik olarak da bir link grubu ekleyelim.
base.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %} {%endblock%} | Blogapp</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Posts</a></li>
</ul>
</nav>
{% block content %}{% endblock %}
</body>
</html>
<title> ... </title> etiketleri içerisinde yeni bir block kısmı ekliyoruz. Burada istediğimiz her içerik sayfasında bir başlık belirtelim ancak "| Blogapp" kısmı hepsinde ortak olsun.
index.html
{% extends "base.html" %}
{% block title %} Anasayfa {% endblock %}
{% block content %}
<h1>Anasayfa</h1>
{% endblock %}
posts.html
{% extends "base.html" %}
{% block title %} Blog Listesi {% endblock %}
{% block content %}
<h1>Blog Listesi</h1>
{% endblock %}
Sayfaları ziyaret ettiğinizde index.html sayfasının başlığı "Anasayfa | Blogapp", posts.html sayfasının başlığı ise; "Blog Listesi | Blogapp" şeklindedir. Ayrıca base.html 'de eklediğimiz <nav> bölümü tüm içerik sayfalarında ortak olarak bulunacaktır. Bu bölümdeki bir güncelleme tüm içerik sayfalarını etkiler.
Bir sonraki dersimizde ise django projelerinde statik dosyaları nasıl kullanırız, öğrenelim.