Pthon somo la 41: Template Inheritance katika Django

Utangulizi

Katika ujenzi wa tovuti kwa kutumia Django, ni muhimu kuhakikisha kuwa kurasa zako zina muundo thabiti unaojirudia kama vile menyu ya urambazaji (navigation menu), kichwa cha ukurasa, na maelezo ya ukurasa (metadata). Hii inafanya tovuti iwe rahisi kudhibiti, kupendeza, na kuwa na athari chanya katika mitambo ya utafutaji (SEO).

Katika somo hili, tutajifunza:

• Jinsi ya kutumia template inheritance kwa kutumia faili base.html

• Kuunda navigation menu inayotumika kwenye kurasa zote

• Kuweka CSS ya nje kwa kutumia {% load static %}

• Kuongeza metadata ya description kwa kutumia {% block description %}

Muundo wa Mradi

Tuendelee na app yetu iitwayo menu ndani ya project Pybongo. Tunayo views mbalimbali kama home, about, contact, na blog.

Template tags katika Django. 

Zinatumika ndani ya mafaili ya HTML (template files) kwa ajili ya kuendesha logic ndogo ndogo kwenye upande wa frontend. Django ana mfumo wake wa template language ambao una tags nyingi zaidi.

Template Tags Ulizotaja:

1. {% extends "base.html" %}
   ➤ Inatumiwa kurithi template nyingine (template inheritance).
   ➤ Mfano: Kurasa zote za ndani zinarithi kutoka base.html.

2. {% block content %}{% endblock %}
   ➤ Inatumiwa kufafanua sehemu ambayo template za ndani zinaweza kujaza maudhui.
   ➤ Kila block hupewa jina kama content, title, description, nk.

3. {% load static %}
   ➤ Inaruhusu kutumia mafaili kutoka kwenye folder la static, kama vile CSS, JS, picha, n.k.

4. {% include "file.html" %}
   ➤ Inatumika kuingiza sehemu ndogo ya template (fragment) ndani ya template nyingine.
   ➤ Mfano: {% include "menu/navbar.html" %}

Hatua kwa Hatua

1. Rekebisha base.html kama template kuu

Katika folder templates/menu/, tengeneza au badilisha base.html kama ifuatavyo:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Pybongo{% endblock %}</title>
    
    <meta name="description" content="{% block description %}hii ni project ya Pybongo{% endblock %}">
    
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>

<!-- Navigation Menu -->
<nav>
    <a href="/home/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>
    <a href="/blog/">Blog</a>
</nav>

<!-- Main Content -->
<div>
    {% block content %}{% endblock %}
</div>

</body>
</html>

Ufafanuzi wa Vipengele Muhimu

• {% load static %}: Inaruhusu kutumia static tag kwa ajili ya kupakia mafaili kama CSS, JS, au picha.

• <link rel="style...