Shablonlar tuzilishi — base.html

17-bob 9 kod bloki 438 so'z

Loyihada beshta HTML fayl bor:

base.html        <- SKELET (boshqalari shundan meros oladi)
dashboard.html   <- statistika
documents.html   <- hujjatlar ro'yxati
settings.html    <- sozlamalar
chat.html        <- suhbat

Meros olish (template inheritance)

<!-- base.html -->
<title>{% block title %}RAG Demo{% endblock %}</title>
{% block head %}{% endblock %}
...
{% block content %}{% endblock %}
...
{% block scripts %}{% endblock %}

<!-- dashboard.html -->
{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
  <h1>Statistika</h1>
  ...
{% endblock %}

Nima uchun kerak: menyu, CSS, footer — hamma sahifada bir xil. Ularni har bir faylga ko'chirsangiz, menyuga bitta band qo'shish uchun 5 ta faylni tahrirlashga to'g'ri keladi.

base.html bilan — bitta joyda o'zgartirasiz.

To'rtta blok, to'rtta vazifa

scripts blokini content dan keyin qo'yish muhim. JavaScript HTML elementlarini qidiradi — ular hali yaratilmagan bo'lsa, null qaytadi va xato chiqadi.

Ma'lumot uzatish

return templates.TemplateResponse(
    "dashboard.html",
    {"request": request, "stats": stats},
)

<div class="karta">
  <div class="raqam">{{ stats.documents }}</div>
  <div class="nom">Hujjatlar</div>
</div>

request MAJBURIY. Jinja2Templates uni talab qiladi. Unutsangiz:

TypeError: missing required argument 'request'

Sikl va shart

{% for hujjat in documents %}
  <tr>
    <td>{{ hujjat.title }}</td>
    <td>{{ hujjat.chunk_count }}</td>
  </tr>
{% else %}
  <tr><td colspan="2">Hujjat yo'q</td></tr>
{% endfor %}

{% else %} — Jinja2 ning foydali xususiyati. Ro'yxat bo'sh bo'lsa ishlaydi. Python'da for/else boshqacha ishlaydi — bu faqat Jinja2 da shunday.

Busiz bo'sh jadval ko'rinadi va foydalanuvchi "buzilganmi?" deb o'ylaydi.

Avtomatik ekranlash

{{ hujjat.title }}

Jinja2 buni avtomatik ekranlaydi. Sarlavhada <script> bo'lsa, u matn sifatida ko'rsatiladi, bajarilmaydi.

Bu — XSS himoyasi. O'chirmang:

{{ hujjat.title | safe }}     <!-- XAVFLI -->

| safe faqat siz yaratgan HTML uchun. Tashqaridan kelgan ma'lumot (PDF sarlavhasi, sayt matni) uchun hech qachon.

RAG tizimida bu ayniqsa muhim — kontent tashqaridan keladi.

Nima uchun CSS framework yo'q

Bootstrap yoki Tailwind qo'shsak, talaba yana bitta tizimni o'rganishi kerak. base.html dagi oddiy CSS yetarli.

Kurs maqsadi — RAG. Interfeys ishlasa bo'ldi.