Flask Template Inheritance ve Blocklar (Include & Extends)
4 min read

Flask Template Inheritance ve Blocklar (Include & Extends)

Flask Template Inheritance ve Blocklar (Include & Extends)

Flask dersleri serimize sayfalarımızda include ve extends yapılarını kullanarak devam ediyoruz. Bu yazının sonuna geldiğinde sayfalarınızı daha kullanılabilir ve erişimi daha kolay hale getirmiş olacaksınız. Öyleyse başlayalım.

Bir web sayfası hazırlarken göreceksiniz ki birçok sayfada birçok bölüm birebir aynıdır. Örneğin sitenizin menü veya footer alanı her sayfada aynı olacaktır. Bu nedenle her sayfa için ayrı ayrı bu alanları baştan yazmak yerine bir kere oluşturup daha sonra ilgili yerlere bu alanları yerleştirirsek büyük bir oranda hız ve kolaylık sağlamış oluruz. Aksi halde küçük bir düzenleme yaptığımızda bile tüm sayfalarda tek tek aynı düzenlemeyi yapmak zorunda kalırız. Birkaç sayfalı sitelerde belki uğraşmayabilirsiniz ama onlarca sayfa olduğunu düşündüğünüzde bu konu bir zorunluluk haline geliyor.

Diğer bir kullanım şekli ise sadece sayfalardaki belirli alanlar yerine komple sayfanın aynı olması durumudur. Buna da bir örnek verirsek yaptığınız hizmetler için bir şablon oluşturup sadece hizmet adını ve açıklamasını değiştirmeyi, geri kalan tüm sayfa ögelerinin birebir aynı kalmasını isteyebilirsiniz. Bu durumda ise yine basit bir kullanım ile çözüme kavuşacağız.

Öyleyse ilk olarak templates klasörümüzün içine şablon bir sayfa oluşturalım ve adına hizmetler adını verelim.

784x243

Örnek bir şablon olacağı ve her sayfada sadece hizmet başlığı ile metini değişeceğinden dolayı bsit bir HTML kodlama yapalım:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hizmetler Sayfası</title>

</head>
<body>

    <h3>Hizmet Adı</h3>    

    <p>Hizmet açıklaması bu alanda yer alacaktır</p>

</body>
</html>

Ardından index.py dosyamıza hizmetler isimli sayfamızı oluşturmak için gerekli route u ekleyelim

# Hizmetler Sayfası
@app.route('/hizmetler')
def hizmetler():
   return render_template("hizmetler.html")

Tarayıcıdan sayfamızın nasıl göründüğüne bakalım:

485x295

Oldukça ama oldukça basit bir hizmet sayfası şablonumuz oldu ama bizim için gayet yeterli. Çünkü önemli olan kısım bu şablonu kalıtım (inheritance) kullanarak diğer sayfalarda kullanabilecek olmamız. Bunun için ilk yapmamız gereken şey yeni bir hizmet sayfası oluşturalım ve adını bebek bakıcılığı koyalım. Ardından gerekli route işlemini gerçekleştirelim.

749x230
# Bebek Bakıcılığı Sayfası
@app.route('/bebek-bakiciligi')
def bebekbakiciligi():
   return render_template("bebek-bakiciligi.html")

Şimdi geldik en önemli kısıma. Şablon sayfamız olan hizmetler.html isimli dosyamızda değiştireceğimiz alanları block haline getirerek şablonu kullandığımız diğer sayfalarda dinamik hale getirmiş olacağız. Bunun için hizmetler.html dosyasının son hali şu şekilde olacaktır:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hizmetler Sayfası</title>

</head>
<body>

    {% block hizmetadi %}
    <h3>Hizmet Adı</h3> 
    {% endblock %}


    {% block hizmetaciklamasi %}
    <p>Hizmet açıklaması bu alanda yer alacaktır</p>
    {% endblock %}

</body>
</html>

Gördüğünüz üzere şablonumuzda dinamik olmasını istediğimiz alanları block içerisine aldık ve blocklara isim verdik. Kullandığımız block yapısı tam haliyle şu şekildedir:

{% block blockadi %}
.
.
.
{% endblock %}

Artık diğer sayfalarımızda bu block alanlarını block isimleriyle çağırarak dilediğimiz gibi değiştireceğiz. İlk olarak yeni oluşturduğumuz bebek-bakiciligi.html sayfamıza gidelim ve extends yapısıyla şablon sayfamızı çağıralım.

{% extends "hizmetler.html" %}

Şimdi tarayıcıdan bebek-bakiciligi sayfasına bakalım ve hizmetler sayfasının birebir aynısını gördüğümüzü doğrulayalım. Göreceğiniz üzere sayfamızda sadece bir satırlık extend bloğu yer almasına rağmen şablonun birebir aynısı yeni sayfamızda da yer alıyor.

484x257

Son olarak ise değiştirmek istediğimiz sayfaları bebek-bakiciligi.html sayfasında blockları kullanarak değiştirelim ve şu hale sokalım:

{% extends "hizmetler.html" %}

{% block hizmetadi %}
<h3>Bebek Bakıcılığı</h3>
{% endblock %}


{% block hizmetaciklamasi %}
<p>Bebeklerinize kendi bebeklerimiz gibi özenle bakarız.</p>
{% endblock %}

Şimdi tarayıcıda nasıl göründüğüne bakalım:

485x243

SONUÇ: Gördüğünüz üzere sadece bir şablon sayfası oluşturduk ve bu şablonda değiştirilmesini istediğimiz alanları blocklar kullanarak isimlendirdik. Ardından oluşturduğumuz şablonu kullanmak istediğimiz sayfalara extends ile dahil ettik ve değiştirilecek alanları isimlendirdiğimiz blocklarla düzenleyerek son haline soktuk.

Bu örneği sabit bir menü ve footer sayfası oluşturduktan sonra sayfalara extends ile ekleyerek kendinizi test edebilirsiniz. Aklınıza takılan yerler olursa aşağıdaki yorum bölümünü kullanabilirsiniz.