Template’lar va statik fayllar — konspekt

Bu modulda HTML Python kodidan ajratildi: sahifalar template fayllarga ko’chdi, ular ma’lumot bilan to’ldirildi, umumiy layout vorislik orqali birlashtirildi va sahifalarga CSS ulandi.

Template papkasi va ro’yxatdan o’tkazish

Template — view to’ldirib beradigan HTML fayl. Django app’lardagi template’larni standart joydan qidiradi: app_nomi/templates/app_nomi/ papkasidan. Papka nomi ikki marta takrorlanishi atayin qilingan — turli app’lardagi bir xil nomli fayllar (index.html) aralashib ketmasligi uchun:

darslar/
    templates/
        darslar/
            index.html

Bu qidiruv ishlashi uchun app settings.py dagi INSTALLED_APPS ro’yxatida turishi shart. Tez-tez uchraydigan xato — TemplateDoesNotExist: app ro’yxatga qo’shilmagan, papka nomi xato yozilgan yoki ichki app-nomli papka unutilgan; xato sahifasida Django qaysi papkalarni qidirgani ro’yxati ko’rsatiladi — o’shani o’qing.

render bilan template qaytarish

View’da HTML satr yasash o’rniga render ishlatiladi:

from django.shortcuts import render

def dars_sahifasi(request, mavzu):
    return render(request, "darslar/dars.html", {
        "mavzu": mavzu,
        "matn": darslar[mavzu],
    })

Uchinchi argument — context: template’ga uzatiladigan ma’lumotlar lug’ati.

Template tili: o’zgaruvchilar

Context’dagi qiymatlar template’da ikki figurali qavs bilan chiqariladi:

<h1>{{ mavzu }}</h1>
<p>{{ matn }}</p>

/darslar/python uchun natija:

<h1>python</h1>
<p>Python — universal dasturlash tili.</p>

Template tili Python emas — unda ixtiyoriy kod yozib bo’lmaydi, faqat qiymat chiqarish, teg va filtrlar bor. Bu ataylab: mantiq view’da, ko’rinish template’da qoladi.

Filtrlar

Filtr qiymatni chiqarishdan oldin o’zgartiradi, | belgisi bilan qo’llanadi:

<h1>{{ mavzu|title }}</h1>

Natija: python o’rniga Python.

Filtr	Vazifasi	Misol
`title`	Har so’zni bosh harf bilan	`{{ "veb dasturlash"\|title }}` → `Veb Dasturlash`
`upper`	Hammasini katta harfga	`{{ mavzu\|upper }}` → `PYTHON`
`length`	Uzunlikni qaytaradi	`{{ darslar\|length }}` → `2`
`default`	Bo’sh qiymatga zaxira	`{{ ism\|default:"mehmon" }}`

Teglar: for

Teg — template’ga boshqaruv beruvchi konstruksiya, {% %} ichida yoziladi. Ro’yxatni aylantirish:

<ul>
  {% for mavzu in mavzular %}
    <li>{{ mavzu }}</li>
  {% endfor %}
</ul>

Har bir teg o’z end... juftini talab qiladi — {% endfor %} unutilsa, Django aniq xato beradi.

url tegi

Havolalarni qattiq yozmaslik uchun view’lardagi reverse'ning template’dagi ekvivalenti ishlatiladi — nomlangan marshrutga havola:

<a href="{% url 'dars-sahifasi' mavzu %}">{{ mavzu|title }}</a>

URL sxemasi o’zgarsa, havolalar o’z-o’zidan to’g’ri qoladi.

if tegi

Shartga qarab ko’rsatish:

{% if mavzular %}
  <ul>...</ul>
{% else %}
  <p>Hozircha darslar yo'q.</p>
{% endif %}

Template’dan vorislik

Sahifalarning umumiy qismi (bosh qism, menyu, futer) bitta asos faylga chiqariladi:

<!-- base.html -->
<html>
<head><title>{% block sarlavha %}Sayt{% endblock %}</title></head>
<body>
  {% block kontent %}{% endblock %}
</body>
</html>

Har bir sahifa asosdan meros oladi va faqat bloklarni to’ldiradi:

{% extends "base.html" %}

{% block sarlavha %}Darslar{% endblock %}

{% block kontent %}
  <h1>{{ mavzu|title }}</h1>
{% endblock %}

Tez-tez uchraydigan xato: {% extends %} faylning eng birinchi tegi bo’lishi shart, undan oldin HTML yozilsa vorislik ishlamaydi; blok nomlari base.html dagi bilan aynan mos kelishi kerak.

include: qisman template’lar

Vorislik "sahifa asosga joylashadi" degani bo’lsa, include — aksincha, kichik bo’lakni sahifaga chaqiradi. Takrorlanadigan qism (masalan, dars kartochkasi) alohida faylga ajratiladi:

{% include "darslar/qism/karta.html" %}

404 sahifasi

Topilmagan sahifa uchun view’da Http404 ko’tariladi:

from django.http import Http404

def dars_sahifasi(request, mavzu):
    if mavzu not in darslar:
        raise Http404()
    ...

Loyihaning template papkasida 404.html yaratilsa, Django xatoda o’shani ko’rsatadi. Muhim detal: maxsus 404 sahifa faqat settings.py da DEBUG = False bo’lganda ko’rinadi — DEBUG = True rejimida Django ataylab texnik xato sahifasini ko’rsatadi.

Statik fayllar

CSS, rasm va shunga o’xshash o’zgarmas fayllar app ichidagi static/ papkaga joylanadi (template’lardagi kabi ichki app-nomli papka bilan: darslar/static/darslar/style.css). Template’da ulardan foydalanish uchun fayl boshida teg kutubxonasi yuklanadi:

{% load static %}
<link rel="stylesheet" href="{% static 'darslar/style.css' %}">

Butun loyihaga tegishli (birorta app’ga bog’lanmagan) fayllar uchun alohida papka settings.py da ko’rsatiladi:

STATICFILES_DIRS = [BASE_DIR / "static"]

Tez-tez uchraydigan xato: {% load static %} ni unutish — Django Invalid block tag: 'static' degan xato beradi; bu teg har bir ishlatilgan template faylda (vorislikdan qat’i nazar) alohida yozilishi kerak.

Amaliyot

O’tgan modul amaliyotidagi oylar sahifasini template’ga o’tkazing: render + oy.html, oy nomi context orqali uzatilsin.
Barcha oylar ro’yxatini {% for %} bilan chiqaradigan bosh sahifa yasang; har bir oy nomi {% url %} orqali o’z sahifasiga havola bo’lsin.
base.html yarating va ikkala sahifani undan vorislikka o’tkazing; sahifa sarlavhalari {% block %} orqali o’zgarsin.
Mavjud bo’lmagan oy so’ralganda Http404 ko’taring va o’zingizning 404.html sahifangizni tayyorlang.
style.css yaratib, {% static %} bilan base.html ga ulang — masalan, sarlavha rangini o’zgartiring.

Kursning eng katta moduli yakunlandi — quyidagi test bilimingizni tekshiradi.