Flask Shabloni Merosi: Jinja2 Shabloni Tashkilotini Mukammallashtirish

Veb-ishlab chiqishda bir nechta sahifalar bo'ylab izchil ko'rinish va his-tuyg'uni saqlash juda muhim. Flask, mashhur Python veb-freymvorki, bu qulaylik uchun moslashuvchan va tezkor shablon mexanizmi bo'lgan Jinja2 kuchidan foydalanadi. Shablon merosi sizga umumiy elementlar bilan asosiy shablonni aniqlash imkonini beradi va keyin uni boshqa shablonlarda kengaytiradi, bu kodni qayta ishlatishni rag'batlantiradi va texnik xizmatni soddalashtiradi. Ushbu maqolada Jinja2 bilan Flask shabloni merosi bo'yicha to'liq qo'llanma keltirilgan, uning tamoyillari, amalga oshirilishi va eng yaxshi amaliyotlari ko'rib chiqilgan.

Shablon Merosi Nima?

Shablon merosi - bu sizning veb-saytingizning asosiy tuzilishi va tartibini o'z ichiga olgan asosiy shablonni yaratish imkonini beradigan dizayn namunasi. Keyinchalik bolalar shablonlari ushbu asosiy shablonni meros qilib olishlari va o'z tarkibini sozlash uchun ma'lum qismlarni yoki "bloklarni" bekor qilishlari mumkin. Ushbu yondashuv kodning takrorlanishini kamaytiradi, izchillikni ta'minlaydi va veb-ilova bo'ylab yangilanishlarni soddalashtiradi.

Buni uy uchun reja kabi tasavvur qiling. Asosiy shablon umumiy dizayn bo'lib, poydevor, devorlar va tomni o'z ichiga oladi. Har bir alohida xona (bolalar shabloni) asosiy tuzilmani meros qilib oladi, ammo turli xil pollar, bo'yoqlar va mebel bilan sozlanishi mumkin.

Shablon Merosining Afzalliklari

• Kodni Qayta Ishlatish: Asosiy shablonda umumiy elementlarni aniqlash va ularni bir nechta sahifalarda qayta ishlatish orqali ortiqcha koddan qoching.
• Izchillik: Bosh sahifa, footer va navigatsiya menyusi kabi umumiy elementlar uchun yagona haqiqat manbasini saqlab, veb-saytingiz bo'ylab bir xil ko'rinish va his-tuyg'uni ta'minlang.
• Texnik Xizmat Ko'rsatish: Asosiy shablonda o'zgartirishlar kiritish orqali yangilanishlar va o'zgartirishlarni soddalashtiring, bu esa barcha bolalar shablonlariga avtomatik ravishda tarqaladi.
• Tashkilot: Kod bazangizni tushunish va boshqarishni osonlashtirish uchun shablonlaringizni mantiqiy va ierarxik tartibda tuzing.
• Ishlab Chiqish Vaqtini Qisqartirish: Yangi sahifalarni noldan yaratish o'rniga asosiy shablondan boshlang'ich nuqta sifatida foydalanish orqali vaqt va kuchni tejab qoling.

Asosiy Tushunchalarni Tushunish

1. Asosiy Shablon

Asosiy shablon sizning shablon merosi tuzilmasining poydevoridir. U veb-saytingizning barcha yoki aksariyat sahifalari uchun umumiy bo'lgan elementlarni o'z ichiga oladi. Bu odatda HTML tuzilishi, CSS uslublari, JavaScript fayllari, sarlavha, footer va navigatsiya menyusini o'z ichiga oladi.

Asosiy shablonning asosiy namunasini ko'ring (base.html):

    
    
    
    


    

        
Mening Veb-saytim
        
    
    

        {% block content %}{% endblock %}
    
    

Ushbu misolda biz sarlavha, navigatsiya menyusi, asosiy tarkib maydoni va footer bilan asosiy HTML tuzilishini aniqladik. {% block %} teglari e'tibor bering, ular bolalar shablonlarida bekor qilinishi mumkin bo'lgan qismlarni aniqlaydi.

2. Blok Aniqlashlari

Bloklar - bu asosiy shablondagi joy egalaridir, ular bolalar shablonlari tomonidan almashtirilishi yoki o'zgartirilishi mumkin. Ular {% block %} va {% endblock %} teglari yordamida aniqlanadi. Bloklar sizga asosiy shabloni turli qismlariga ma'lum tarkibni kiritish imkonini beradi.

Yuqoridagi base.html misolida biz ikkita blokni aniqladik:

• title: Ushbu blok HTML hujjatining sarlavhasini aniqlaydi.
• content: Ushbu blok sahifaning asosiy tarkib maydonini aniqlaydi.

3. Bolalar Shablonlari

Bolalar shablonlari asosiy shablonni meros qilib oladi va asosiy shablonda aniqlangan bloklarni bekor qilishi mumkin. Asosiy shablonni meros qilish uchun, bolalar shablonining boshida {% extends %} tegidan foydalaning.

Asosiy base.html shablonini kengaytiradigan bolalar shabloni (index.html) namunasini ko'ring:

{% extends 'base.html' %}

{% block title %}Bosh sahifa - Mening Veb-saytim{% endblock %}

{% block content %}
    
Xush kelibsiz, Bosh Sahifa!
    
Bu bosh sahifaning tarkibidir.
{% endblock %}

Ushbu misolda biz base.html shablonini kengaytirdik va title hamda content bloklarini bekor qildik. title bloki "Bosh sahifa - Mening Veb-saytim" deb belgilangan va content bloki bosh sahifaga xos tarkib bilan almashtirilgan.

4. `super()` Funksiyasi

super() funksiyasi bolalar shablonidagi asosiy shablonda aniqlangan blokning tarkibiga kirish imkonini beradi. Bu blok tarkibini butunlay almashtirmasdan unga qo'shmoqchi yoki o'zgartirmoqchi bo'lsangiz foydalidir.

content blokiga tarkib qo'shish uchun super() funksiyasidan foydalanish namunasini ko'ring:

{% extends 'base.html' %}

{% block content %}
    {{ super() }}
    
Bu asosiy shablonning tarkib blokiga qo'shilgan qo'shimcha tarkib.
{% endblock %}

Ushbu misolda super() funksiyasi base.html shablonidan content blokining asl tarkibini kiritadi va keyin bolalar shabloni o'z tarkibini uning ostiga qo'shadi.

Flaskda Shablon Merosini Amalga Oshirish

Flaskda shablon merosidan foydalanish uchun siz shablonlaringizni mantiqiy katalog tuzilmasida tashkil qilishingiz va Flaskni shablonlaringizni topishga sozlash qilasiz.

1. Katalog Tuzilishi

Flask shablonlari uchun keng tarqalgan katalog tuzilishi quyidagicha:

my_project/
    app.py
    templates/
        base.html
        index.html
        about.html
        contact.html
    static/
        style.css
        script.js

Ushbu tuzilishda templates katalogi barcha HTML shablonlarini, shu jumladan asosiy shablon va bolalar shablonlarini o'z ichiga oladi. static katalogi CSS uslublari va JavaScript fayllari kabi statik fayllarni o'z ichiga oladi.

2. Flask Sozlamalari

Varsaylan bo'yicha, Flask ilovangiz bilan bir xil katalogdagi templates nomli katalogda shablonlarni qidiradi. Siz buni Flask app obyekti template_folder xususiyatini belgilash orqali sozlashishingiz mumkin.

Maxsus shablon jildidan foydalanish uchun Flaskni sozlash namunasini ko'ring:

from flask import Flask, render_template

app = Flask(__name__, template_folder='my_templates')

@app.route('/')
def index():
    return render_template('index.html')

3. Shablonlarni Rendelash

Flaskda shablonni renderlash uchun render_template() funksiyasidan foydalaning. Ushbu funksiya shablon faylining nomini argument sifatida oladi va renderlangan HTML qatorini qaytaradi.

index.html shablonini renderlash namunasini ko'ring:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

Bolalar shablonini renderlashda Flask avtomatik ravishda asosiy shablonni o'z ichiga oladi va bolalar shablonida aniqlangan blokni bekor qilishni qo'llaydi.

Amaliy Misollar

Misol 1: Oddiy Blog

Keling, asosiy shablon va blog yozuvlari uchun alohida shablonlar bilan oddiy blog yaratamiz.

base.html:

    
    
    
    


    

        
Mening Blogim
        
    
    

        {% block content %}{% endblock %}
    
    

post.html:

{% extends 'base.html' %}

{% block title %}{{ post.title }} - Mening Blogim{% endblock %}

{% block content %}
    
{{ post.title }}
    
Nashr etilgan: {{ post.date }}
    
{{ post.content }}
{% endblock %}

Ushbu misolda post.html shablonini base.html shablonini kengaytiradi va title hamda content bloklarini blog yozuvining sarlavhasi, sanasi va mazmuni bilan bekor qiladi. post o'zgaruvchisi Flask marshrutidan shablonga uzatiladi.

app.py:

from flask import Flask, render_template

app = Flask(__name__)

posts = [
    {
        'title': 'Birinchi Blog Yozuvi',
        'date': '2023-10-27',
        'content': 'Bu birinchi blog yozuvining mazmunidir.'
    },
    {
        'title': 'Ikkinchi Blog Yozuvi',
        'date': '2023-10-28',
        'content': 'Bu ikkinchi blog yozuvining mazmunidir.'
    }
]

@app.route('/')
def index():
    return render_template('index.html', posts=posts)

@app.route('/post/')
def post(post_id):
    post = posts[post_id]
    return render_template('post.html', post=post)

Misol 2: Ko'p tilli veb-sayt

Bir nechta tilni qo'llab-quvvatlaydigan veb-sayt yaratishni tasavvur qiling. Shablon merosi har bir sahifadagi turli matn elementlarini boshqarishga yordam beradi. Siz tarjima qilingan matn uchun joy egalari bilan asosiy shablonni yaratishingiz va keyin har bir til uchun bolalar shablonlarini yaratishingiz mumkin. Masalan, sizda asosiy shablon mavjud va ingliz va frantsuz tillarini qo'llamoqchi bo'lsangiz.

base.html:

  


  
  
{% block content %}{% endblock %}

index_en.html (Inglizcha Versiya):

{% extends "base.html" %}

{% block title %}Mening Veb-saytimga Xush Kelibsiz{% endblock %}
{% block home_link %}Bosh sahifa{% endblock %}
{% block about_link %}Biz haqimizda{% endblock %}
{% block content %}
  
Xush Kelibsiz!
  
Bu bosh sahifaning inglizcha versiyasi.
{% endblock %}

index_fr.html (Frantsuzcha Versiya):

{% extends "base.html" %}

{% block title %}Bienvenue sur mon site web{% endblock %}
{% block home_link %}Accueil{% endblock %}
{% block about_link %}À propos{% endblock %}
{% block content %}
  
Bienvenue !
  
Ceci est la version française de la page d'accueil.
{% endblock %}

Ushbu soddalashtirilgan misolda har bir til versiyasi asosiy shablonni kengaytiradi va sarlavha, navigatsiya havolalari va asosiy tarkib uchun tarjima qilingan matnni taqdim etadi. Ushbu yondashuv veb-saytingizning turli til versiyalarini boshqarishni osonlashtiradi.

Eng Yaxshi Amaliyotlar

• Asosiy shablonni sodda tuting: Asosiy shablon barcha sahifalar uchun umumiy bo'lgan muhim elementlarni o'z ichiga olgan bo'lishi kerak.
• Tavsifiy blok nomlaridan foydalaning: Ularning maqsadini aniq ko'rsatadigan blok nomlarini tanlang.
• Shablonlaringizni mantiqiy tartibda tashkil qiling: Tegishli shablonlarni jildlarda guruhlang.
• Chuqur ichma-ich merosdan qoching: Murakkablikni oldini olish uchun meros ierarxiyasining chuqurligini cheklang.
• `super()` funksiyasidan ehtiyotkorlik bilan foydalaning: Faqat asosiy shablondagi blok tarkibiga qo'shish yoki o'zgartirish kerak bo'lganda super() funksiyasidan foydalaning.
• Shablon komponentlaridan foydalanishni ko'rib chiqing: Murakkabroq veb-saytlar uchun shablonlaringizni kichikroq, qayta ishlatiladigan komponentlarga bo'lishni ko'rib chiqing. Bu Jinja2 dagi include lar yoki makrolar orqali amalga oshirilishi mumkin, ammo ular yaxshi meros strategiyasini almashtirmasligi, balki to'ldirishi kerak.

Murakkab Texnikalar

1. Shartli Blokni Bekor Qilish

Ma'lum shartlarga asoslanib bloklarni shartli ravishda bekor qilish uchun siz o'z shablonlaringizda shartli bayonotlardan foydalanishingiz mumkin. Bu sizga foydalanuvchi rollari, imtiyozlari yoki boshqa omillarga asoslanib sahifalaringiz tarkibini sozlash imkonini beradi.

{% extends 'base.html' %}

{% block content %}
    {% if user.is_authenticated %}
        
Xush kelibsiz, {{ user.username }}!
        
Bu autentifikatsiya qilingan foydalanuvchilar uchun tarkib.
    {% else %}
        
Xush kelibsiz!
        
Ko'proq tarkibga kirish uchun tizimga kiring.
    {% endif %}
{% endblock %}

2. Makrolardan Foydalanish

Jinja2 makrolari Python dagi funksiyalarga o'xshaydi. Ular sizga o'z shablonlaringizdan chaqirilishi mumkin bo'lgan HTML kodining qayta ishlatiladigan qismlarini aniqlash imkonini beradi. Makrolar shakl elementlari, navigatsiya menyulari va rasm galereyalari kabi shablon komponentlarini yaratish uchun ishlatilishi mumkin.

Alohida faylda makroni aniqlash namunasini ko'ring (macros.html):

{% macro input(name, type='text', value='') %}
    
{% endmacro %}

Shablonda makroni import qilish va ishlatish namunasini ko'ring:

{% from 'macros.html' import input %}


    {{ input('username') }}
    {{ input('password', type='password') }}
    Yuborish

3. Shablon Filtirlari

Shablon filtrlari sizga shablonlardagi o'zgaruvchilarning chiqishini o'zgartirish imkonini beradi. Jinja2 capitalize, lower, upper va date kabi bir qator o'rnatilgan filtrlarni taqdim etadi. Siz o'zingizning maxsus filtrlaringizni ham aniqlashingiz mumkin.

Sana formatlash uchun date filtridan foydalanish namunasini ko'ring:

Nashr etilgan: {{ post.date | date('%Y-%m-%d') }}

Xulosa

Jinja2 bilan Flask shabloni merosi shablonlaringizni tashkil qilish, kodni qayta ishlatishni rag'batlantirish va veb-ilova bo'ylab izchillikni ta'minlash uchun kuchli usuldir. Asosiy shablonlar, bloklarni aniqlash va bolalar shablonlari kabi asosiy tushunchalarni tushunib, siz veb-ishlab chiqish jarayonini soddalashtiradigan yaxshi tuzilgan va parvarishlanadigan shablonlarni yaratishingiz mumkin. DRY (Takrorlamang) prinsipini qabul qiling va mustahkam va kengaytiruvchan veb-ilovalar yaratish uchun shablon merosidan foydalaning.

Ushbu keng qamrovli qo'llanma Flask shabloni merosining asosiy jihatlarini qamrab oldi. Ushbu maqolada keltirilgan misollar va eng yaxshi amaliyotlarga rioya qilish orqali siz o'z Flask loyihangizda shablon merosini samarali ravishda amalga oshirishingiz va yaxshi tashkil etilgan, parvarishlanadigan va izchil veb-ilovalar yaratishingiz mumkin, bu esa global auditoriyaga xizmat qiladi. Ushbu usullarni loyihangizning o'ziga xos ehtiyojlariga moslashtirishni unutmang va shablon loyihasi imkoniyatlarini yanada yaxshilash uchun Jinja2 ning murakkab xususiyatlarini o'rganing.