Pthon somo la 41: Template Inheritance katika Django
Somo hili linazungumzia hatua ya kuunda navigation menu na kutumia template inheritance kwa njia ya kitaalamu 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:
-
{% extends "base.html" %}
➤ Inatumiwa kurithi template nyingine (template inheritance).
➤ Mfano: Kurasa zote za ndani zinarithi kutokabase.html. -
{% block content %}{% endblock %}
➤ Inatumiwa kufafanua sehemu ambayo template za ndani zinaweza kujaza maudhui.
➤ Kila block hupewa jina kamacontent,title,description, nk. -
{% load static %}
➤ Inaruhusu kutumia mafaili kutoka kwenye folder lastatic, kama vile CSS, JS, picha, n.k.
-
{% 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 kutumiastatictag kwa ajili ya kupakia mafaili kama CSS, JS, au picha. -
<link rel="style...
help_outlineZoezi la Maswali
Umeionaje Makala hii.. ?
Share On:
👉1 Kitabu cha Afya 👉2 Tafasiri ya Riyadh Swalihina 👉3 Sira ya Mtume Muhammad (s.a.w) 👉4 Simulizi za Hadithi Audio 👉5 Bongolite - Game zone - Play free game 👉6 Kitau cha Fiqh
Post zinazofanana:
Python somo la 46: Kutengeneza Fomu na Kuituma kwa Django Template
Katika somo hili utakwenda kujifunza kutengeneza htmk form pamoja na kuituma.
Soma Zaidi...Python somo la 17: Jinsi ya kutumia user input
Katika somo hili uatkwenda kujifunz anamna ambavyo mtu anaweza kuingiza input kwneye system
Soma Zaidi...Python seomo la 55: Kutengeneza Simple Admin Dashboard ya CRUD
Katika somo hili tutajifunza jinsi ya kuunda dashboard rahisi ndani ya Django ambayo itaruhusu mtumiaji kuongeza, kusoma, kuhariri na kufuta taarifa za MenuItem bila kutumia Django built-in admin, bali kwa kutumia HTML templates na views tulizotengeneza sisi wenyewe.
Soma Zaidi...Python somo la 13: Kutumia condition statement - if, else, elif
Katika somo hili tutakwend akuziona aina za condition statement kwneye python na jinsi ya kuzitumia
Soma Zaidi...PYTHON - somo la 7: Jinsi ya kubadili aina ya data
Katika soo hili utakwenda kujifunza jinsi ya kubaduli aina moja ya data kwena aina nyingine. Kwa mfano unaweza kubadili namba kuwa string ama kubadili string kuwa nanda ama kubadili float kuwa int.
Soma Zaidi...Python somo la 37: Jinsi ya ku install Django na kutengeneza project na app
Katika somo ili utajifunza hatuwa kwa hatuwa za ku install Django, kutengeneza project na kutengeneza app
Soma Zaidi...