Inheritance, extends

Kategori: Python / Django , 22 Eylül 2019 , JanFranco


Flask bölümünde de anlatmıştım, web sayfaları başka sayfaları miras alabilir. Böylelikle her bir sayfa için tekrar tekrar aynı kodları yazma zahmetine girmeyiz. Örneğin bir CSS dosyası hazırladık ve tüm sayfalarımız bu dosyayı kullanacak. Her bir sayfada tek tek bunu tanımlamak yerine bir dosya açıp, her sayfanın kullanacağı kodları bu dosyaya yazmak ve diğer sayfaların bu dosyadan miras alması çok daha mantıklı olacaktır. Şimdi templates klasöründe layout adında bir HTML dosyası oluşturalım ve içeriğini şu şekilde ayarlayalım:


<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'styles/style.css' %}">
    <title>JFBlog</title>
</head>
<body>
    <div style="margin-top: 70px;" class="container">
        {% block body %}
        
        {% endblock body %}
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Aynı klasörde index adında bir HTML dosyası açalım ve içeriğini aşağıdaki şekilde ayarlayalım:


{% extends 'layout.html' %}

{% block body %}
    <div class="jumbotron text-center">
        <h3>JF Blog</h3>
        <p>Welcome!</p>
    </div>
{% endblock body %}
Görüldüğü üzere extends 'layout.html' komutu ile, index sayfası layout sayfasının tüm içeriğini aldı. block - endblock anahtar kelimeleri ile de body bloğunu override etmiş olduk.


Sonraki Yazı: Adding Navbar and About Page
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın