Şablonlar da nesne tabanlı programlama konsepti ile geliştirilmiş olduğu için, sınıflardaki miras alma özelliği şablonlar için de geçerlidir. Yani oluşturduğunuz bir şablonu miras alan bir başka şablon oluşturduğunuzda üst sınıfın tüm veriler otomatik olarak alt şablonda da kullanılabiliyor.
Yani üst şablona dahil ettiğiniz tüm modülleri miras alma yoluyla alt sınıflarda da kullanabilirsiniz. Bu özellikten şablonlarda nasıl faydalanabiliriz diyorsanız eğer, hemen en önemli faydalarından bahsedebiliriz.
Bir şablona dahil ettiğiniz örneğin Bootstrap gibi bir CSS çerçevesini miras alma yoluyla alt şablonlarda tek tek dahil etmeden kullanabilirsiniz.
Tek bir dosyada web sitenizin genel tasarımını oluşturabilir ve bu dosyadan miras alan tüm sayfalarda aynı tasarımı kullanabilirsiniz.
Örnekleyerek uygulama ile görelim. İlk iş HTML şablonumuzu standart templates klasörü altında oluşturmaktır. Bir dosya oluşturalım ve adını temel.html olarak seçelim. Ya da siz nasıl isterseniz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temel Tasarım</title>
</head>
<body>
<h2>Temel tasarım dosyası</h2>
</body>
</html>Şimdi index.html dosyamızın içeriğini tamamen silelim. Çünkü oluşturacağımız sayfaları temel.html dosyamızdan miras alarak oluşturmak istiyoruz.
HTML şablonlarımız içinde HTML etiketlerini, CSS ve Javascript ile birlikte kullanarak web tasarımımızı oluşturabileceğimizi biliyoruz. Ayrıca HTML şablonlarımız içinde Python verilerini nasıl görüntüleyebileceğimizi de öğrendik.
HTMl şablonlarımız içinde HTML etiketleri yazabiliyoruz, çift süslü parantezler arasına yazarak Python verilerimizi görüntüleyebiliyoruz. Bunların dışında belli anahtar kelimeleri de kullanmamız gerektiğinde jinja2 yazım stilini kullanarak süslü parantez ve % simgesini beraber kullanarak yazacağız. Yani {% ve %} karakterleri Flask’ın jinja2 HTML şablonu içine kod yazma stilidir.
index.html sayfamızın temel.html sayfamızdan miras alması için, index.html sayfamızın içine;
{% extends "temel.html" %}yazmamız yeterlidir.
Şimdi web tarayıcımızda http://127.0.0.1:5000/ adresini ziyaret ettiğimizde ana sayfamızın temel.html ile aynı olduğunu göreceksiniz;
Peki bu durumda sayfa başlığımız, içeriğimiz herşeyimiz aynı mı olacak? Tabii ki, hayır. Özelleştirmek istediğiniz kısımları, tıpkı miras kavramında değişkenlerin ve metodların üzerine yazma(overriding) yapabildiğiniz gibi, burada da özelleştirmek istediğiniz kısımların üzerine yazabiliyorsunuz.
Jinja2 şablon yapısı da, tıpkı bu şekilde web sayfasının içeriklerini özelleştirmek için kullanılabilecek blok yapısına sahiptir. Temel tasarımı bloklar şeklinde tanımlarsınız ve ondan türetilecek diğer sayfalar da içeriği değiştirmek istediğiniz yerlerdeki blokları aynı isimle tekrar tanımlayarak üzerine yazarak özelleştirebilirsiniz.
Örneğin, temel.html dosyamızın içine, {% block blokadı %}{% endblock %} etiketleriyle bir blok ekleyelim ve içine içerik yerleştirelim;
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temel Tasarım</title>
</head>
<body>
<h2>Temel tasarım dosyası</h2>
{% block icerik %}
<p>Bu içerik temel.html sayfasına aittir.</p>
{% endblock %}
</body>
</html>index.html sayfamızda herhangi bir değişiklik yapmadığımız için web sayfasını ziyaret ettiğimizde doğal olarak temel.html sayfasının tüm içeriği ile birlikte blok içeriği de görüntülenecektir;
Ancak biz index.html sayfasının içeriğini değiştirmek istiyoruz. Öyleyse aynı blok ismini kullanarak index.html sayfasına yeni bir içerik eklersek miras aldığı sınıfın üzerine yazmış(override) oluruz;
{% extends "temel.html" %}
{% block icerik %}
<p>Bu içerik ana sayfaya aittir.</p>
{% endblock %}Web sayfası;
Bu şekilde sayfa başlıklarını ve sayfa içindeki tüm alanları ayrı ayrı tanımlayıp özelleştirebilir. Aynı kalmasını istediğimiz temel tasarım ögelerine dokunmadan miras alınıp ortak kullanılmasını sağlayabiliriz.
Bağlantıda Kalalım