जिंजा2 वापरून फ्लॅस्क टेम्पलेट इनहेरिटन्ससाठी एक सर्वसमावेशक मार्गदर्शक, ज्यामध्ये बेस टेम्पलेट, ब्लॉक व्याख्या आणि कार्यक्षम वेब विकासासाठी व्यावहारिक उदाहरणे समाविष्ट आहेत.
फ्लॅस्क टेम्पलेट इनहेरिटन्स: जिंजा2 टेम्पलेट संस्थेचे मास्टरींग
वेब डेव्हलपमेंटमध्ये, एकाधिक पृष्ठांवर सुसंगत स्वरूप आणि अनुभव राखणे महत्त्वपूर्ण आहे. फ्लॅस्क, एक लोकप्रिय पायथन वेब फ्रेमवर्क, टेम्प्लेट इनहेरिटन्सद्वारे हे सुलभ करण्यासाठी लवचिक आणि जलद टेम्पलेट इंजिन, जिंजा2 ची शक्ती वापरते. टेम्पलेट इनहेरिटन्स आपल्याला सामायिक घटकांसह बेस टेम्पलेट परिभाषित करण्यास आणि नंतर ते इतर टेम्प्लेटमध्ये विस्तारित करण्यास अनुमती देते, ज्यामुळे कोडची पुन: वापरणीक्षमता वाढते आणि देखभाल सुलभ होते. हा लेख फ्लॅस्क टेम्पलेट इनहेरिटन्स जिंजा2 सह एक सर्वसमावेशक मार्गदर्शक आहे, ज्यामध्ये त्याची तत्त्वे, अंमलबजावणी आणि सर्वोत्तम पद्धतींचा समावेश आहे.
टेम्पलेट इनहेरिटन्स म्हणजे काय?
टेम्पलेट इनहेरिटन्स एक डिझाइन पॅटर्न आहे जे आपल्याला आपल्या वेबसाइटची मुख्य रचना आणि लेआउट असलेले बेस टेम्पलेट तयार करण्यास सक्षम करते. चाइल्ड टेम्प्लेट्स नंतर हे बेस टेम्पलेट इनहेरिट करू शकतात आणि त्यांची सामग्री सानुकूलित करण्यासाठी विशिष्ट विभाग किंवा 'ब्लॉक्स' ओव्हरराइड करू शकतात. हा दृष्टीकोन कोडची डुप्लिकेशन कमी करतो, सुसंगतता सुनिश्चित करतो आणि आपल्या वेब ॲप्लिकेशनमध्ये अद्यतने सुलभ करतो.
याला घराच्या ब्लूप्रिंटसारखे समजा. बेस टेम्पलेटमध्ये पाया, भिंती आणि छप्पर यासह एकूण डिझाइन असते. प्रत्येक स्वतंत्र खोली (चाइल्ड टेम्पलेट) मूलभूत रचना इनहेरिट करते परंतु वेगवेगळ्या फ्लोअरिंग, पेंट आणि फर्निचरसह सानुकूलित केली जाऊ शकते.
टेम्पलेट इनहेरिटन्सचे फायदे
- कोडची पुन: वापरणीक्षमता: बेस टेम्पलेटमध्ये सामान्य घटक परिभाषित करून आणि एकाधिक पृष्ठांवर त्यांचा पुनर्वापर करून अनावश्यक कोड टाळा.
- सुसंगतता: हेडर, फुटर आणि नेव्हिगेशन मेनूसारख्या सामायिक घटकांसाठी एकच सत्य स्रोत राखत आपल्या वेबसाइटवर सुसंगत स्वरूप आणि अनुभव सुनिश्चित करा.
- देखभालक्षमता: बेस टेम्पलेटमध्ये बदल करून अद्यतने आणि सुधारणा सुलभ करा, जे आपोआप सर्व चाइल्ड टेम्प्लेटमध्ये प्रसारित होतील.
- संस्था: आपल्या टेम्प्लेट्सची रचना तार्किक आणि श्रेणीबद्ध पद्धतीने करा, ज्यामुळे आपला कोडबेस समजून घेणे आणि व्यवस्थापित करणे सोपे होते.
- कमी विकास वेळ: नवीन पृष्ठांसाठी बेस टेम्पलेटचा प्रारंभिक बिंदू म्हणून उपयोग करून वेळ आणि मेहनत वाचवा, त्याऐवजी ते स्क्रॅचमधून तयार करा.
महत्त्वाच्या संकल्पना समजून घेणे
1. बेस टेम्पलेट
बेस टेम्पलेट आपल्या टेम्पलेट इनहेरिटन्स संरचनेचा आधार आहे. त्यामध्ये सामान्य घटक असतात जे आपल्या वेबसाइटच्या सर्व किंवा बहुतेक पृष्ठांवर सामायिक केले जातील. यात सामान्यत: HTML रचना, CSS स्टाईलशीट, जावास्क्रिप्ट फाइल्स, हेडर, फुटर आणि नेव्हिगेशन मेनू समाविष्ट असतात.
एका बेसिक बेस टेम्पलेटचे उदाहरण (base.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}माझी वेबसाइट{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<header>
<h1>माझी वेबसाइट</h1>
<nav>
<ul>
<li><a href="/">मुख्यपृष्ठ</a></li>
<li><a href="/about">बद्दल</a></li>
<li><a href="/contact">संपर्क</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>© 2023 माझी वेबसाइट</p>
</footer>
</body>
</html>
या उदाहरणामध्ये, आम्ही हेडर, नेव्हिगेशन मेनू, मुख्य सामग्री क्षेत्र आणि फुटरसह एक बेसिक HTML संरचना परिभाषित केली आहे. {% block %} टॅग्स लक्षात घ्या, जे विभाग परिभाषित करतात जे चाइल्ड टेम्प्लेटमध्ये ओव्हरराइड केले जाऊ शकतात.
2. ब्लॉक व्याख्या
ब्लॉक बेस टेम्पलेटमधील प्लेसहोल्डर आहेत जे चाइल्ड टेम्प्लेटद्वारे बदलले किंवा सुधारित केले जाऊ शकतात. ते {% block %} आणि {% endblock %} टॅग्स वापरून परिभाषित केले जातात. ब्लॉक आपल्याला बेस टेम्पलेटच्या वेगवेगळ्या भागांमध्ये विशिष्ट सामग्री इंजेक्ट करण्याची परवानगी देतात.
वरील base.html उदाहरणामध्ये, आम्ही दोन ब्लॉक परिभाषित केले आहेत:
title: हा ब्लॉक HTML दस्तऐवजाचे शीर्षक परिभाषित करतो.content: हा ब्लॉक पृष्ठाचे मुख्य सामग्री क्षेत्र परिभाषित करतो.
3. चाइल्ड टेम्प्लेट्स
चाइल्ड टेम्प्लेट्स बेस टेम्पलेट इनहेरिट करतात आणि बेस टेम्पलेटमध्ये परिभाषित ब्लॉक ओव्हरराइड करू शकतात. बेस टेम्पलेट इनहेरिट करण्यासाठी, चाइल्ड टेम्पलेटच्या सुरूवातीस {% extends %} टॅग वापरा.
base.html टेम्पलेट विस्तारित करणार्‍या चाइल्ड टेम्पलेटचे उदाहरण (index.html):
{% extends 'base.html' %}
{% block title %}मुख्यपृष्ठ - माझी वेबसाइट{% endblock %}
{% block content %}
<h2>मुख्य पृष्ठावर आपले स्वागत आहे!</h2>
<p>हे मुख्य पृष्ठाची सामग्री आहे.</p>
{% endblock %}
या उदाहरणामध्ये, आम्ही base.html टेम्पलेट विस्तारित करतो आणि title आणि content ब्लॉक ओव्हरराइड करतो. title ब्लॉक “मुख्यपृष्ठ - माझी वेबसाइट” वर सेट केला आहे आणि content ब्लॉक मुख्य पृष्ठासाठी विशिष्ट सामग्रीने बदलला आहे.
4. `super()` फंक्शन
super() फंक्शन आपल्याला चाइल्ड टेम्पलेटमधील बेस टेम्पलेटमध्ये परिभाषित केलेल्या ब्लॉकच्या सामग्रीमध्ये प्रवेश करण्याची परवानगी देते. हे उपयुक्त आहे जेव्हा आपल्याला ब्लॉकची सामग्री पूर्णपणे न बदलता त्यात भर घालण्याची किंवा सुधारणा करण्याची आवश्यकता असते.
content ब्लॉकमध्ये सामग्री जोडण्यासाठी super() वापरण्याचे उदाहरण:
{% extends 'base.html' %}
{% block content %}
{{ super() }}
<p>हा बेस टेम्पलेटच्या सामग्री ब्लॉकला जोडलेला अतिरिक्त आशय आहे.</p>
{% endblock %}
या उदाहरणामध्ये, super() फंक्शन base.html टेम्पलेटमधील content ब्लॉकची मूळ सामग्री इन्सर्ट करते आणि नंतर चाइल्ड टेम्पलेट त्याखाली स्वतःची सामग्री जोडते.
फ्लॅस्कमध्ये टेम्पलेट इनहेरिटन्सची अंमलबजावणी करणे
फ्लॅस्कमध्ये टेम्पलेट इनहेरिटन्स वापरण्यासाठी, आपल्याला आपल्या टेम्प्लेट्सची तार्किक डिरेक्टरी संरचनेत व्यवस्था करणे आवश्यक आहे आणि आपले टेम्पलेट शोधण्यासाठी फ्लॅस्क कॉन् figure करणे आवश्यक आहे.
1. डिरेक्टरी रचना
फ्लॅस्क टेम्प्लेट्ससाठी एक सामान्य डिरेक्टरी रचना खालीलप्रमाणे आहे:
my_project/
app.py
templates/
base.html
index.html
about.html
contact.html
static/
style.css
script.js
या संरचनेत, templates डिरेक्टरीमध्ये बेस टेम्पलेट आणि चाइल्ड टेम्प्लेटसह सर्व HTML टेम्प्लेट आहेत. static डिरेक्टरीमध्ये CSS स्टाईलशीट आणि जावास्क्रिप्ट फाइल्ससारख्या स्थिर फाइल्स आहेत.
2. फ्लॅस्क कॉन्फिगरेशन
डीफॉल्टनुसार, फ्लॅस्क आपल्या ॲप्लिकेशनसारख्याच डिरेक्टरीमध्ये templates नावाच्या डिरेक्टरीमध्ये टेम्प्लेट शोधतो. आपण फ्लॅस्क ॲप ऑब्जेक्टचे template_folder ॲट्रिब्यूट सेट करून हे सानुकूलित करू शकता.
सानुकूल टेम्पलेट फोल्डर वापरण्यासाठी फ्लॅस्क कॉन्फिगरेशनचे उदाहरण:
from flask import Flask, render_template
app = Flask(__name__, template_folder='my_templates')
@app.route('/')
def index():
return render_template('index.html')
3. टेम्प्लेट प्रस्तुत करणे
फ्लॅस्कमध्ये टेम्पलेट प्रस्तुत करण्यासाठी, render_template() फंक्शन वापरा. हे फंक्शन टेम्पलेट फाइलचे नाव युक्तिवाद म्हणून घेते आणि प्रस्तुत HTML स्ट्रिंग परत करते.
index.html टेम्पलेट प्रस्तुत करण्याचे उदाहरण:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
चाइल्ड टेम्पलेट प्रस्तुत करताना, फ्लॅस्क आपोआप बेस टेम्पलेट समाविष्ट करतो आणि चाइल्ड टेम्पलेटमध्ये परिभाषित ब्लॉक ओव्हरराइड लागू करतो.
व्यावहारिक उदाहरणे
उदाहरण 1: एक साधे ब्लॉग
चला एक बेस टेम्पलेट आणि ब्लॉग पोस्टसाठी स्वतंत्र टेम्प्लेटसह एक साधा ब्लॉग तयार करूया.
base.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}माझे ब्लॉग{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<header>
<h1>माझे ब्लॉग</h1>
<nav>
<ul>
<li><a href="/">मुख्यपृष्ठ</a></li>
<li><a href="/about">बद्दल</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>© 2023 माझा ब्लॉग</p>
</footer>
</body>
</html>
post.html:
{% extends 'base.html' %}
{% block title %}{{ post.title }} - माझा ब्लॉग{% endblock %}
{% block content %}
<h2>{{ post.title }}</h2>
<p><em>प्रकाशित: {{ post.date }}</em></p>
<p>{{ post.content }}</p>
{% endblock %}
या उदाहरणामध्ये, post.html टेम्पलेट base.html टेम्पलेट विस्तारित करते आणि ब्लॉग पोस्टचे शीर्षक, तारीख आणि सामग्रीसह title आणि content ब्लॉक ओव्हरराइड करते. post व्हेरिएबल फ्लॅस्क मार्गावरून टेम्पलेटमध्ये पास केला जातो.
app.py:
from flask import Flask, render_template
app = Flask(__name__)
posts = [
{
'title': 'पहिला ब्लॉग पोस्ट',
'date': '2023-10-27',
'content': 'हा पहिल्या ब्लॉग पोस्टची सामग्री आहे.'
},
{
'title': 'दुसरा ब्लॉग पोस्ट',
'date': '2023-10-28',
'content': 'ही दुसर्‍या ब्लॉग पोस्टची सामग्री आहे.'
}
]
@app.route('/')
def index():
return render_template('index.html', posts=posts)
@app.route('/post/<int:post_id>')
def post(post_id):
post = posts[post_id]
return render_template('post.html', post=post)
उदाहरण 2: बहु-भाषा वेबसाइट
अशी कल्पना करा की आपण एक वेबसाइट तयार करत आहात जी एकाधिक भाषांना समर्थन देते. टेम्पलेट इनहेरिटन्स प्रत्येक पृष्ठावरील भिन्न टेक्स्ट घटक व्यवस्थापित करण्यात मदत करू शकते. आपण भाषांतरित टेक्स्टसाठी प्लेसहोल्डरसह बेस टेम्पलेट तयार करू शकता आणि नंतर प्रत्येक भाषेसाठी चाइल्ड टेम्प्लेट्स तयार करू शकता. उदाहरणार्थ, समजा आपल्याकडे बेस टेम्पलेट आहे आणि आपल्याला इंग्रजी आणि फ्रेंच भाषेचे समर्थन करायचे आहे.
base.html:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">{% block home_link %}मुख्यपृष्ठ{% endblock %}</a></li>
<li><a href="/about">{% block about_link %}बद्दल{% endblock %}</a></li>
</ul>
</nav>
<main>{% block content %}{% endblock %}</main>
</body>
</html>
index_en.html (इंग्रजी व्हर्जन):
{% extends "base.html" %}
{% block title %}माझ्या वेबसाइटवर आपले स्वागत आहे{% endblock %}
{% block home_link %}मुख्यपृष्ठ{% endblock %}
{% block about_link %}बद्दल{% endblock %}
{% block content %}
<h1>स्वागत आहे!</h1>
<p>हे मुख्यपृष्ठाचे इंग्रजी व्हर्जन आहे.</p>
{% endblock %}
index_fr.html (फ्रेंच व्हर्जन):
{% extends "base.html" %}
{% block title %}Bienvenue sur mon site web{% endblock %}
{% block home_link %}Accueil{% endblock %}
{% block about_link %}À propos{% endblock %}
{% block content %}
<h1>Bienvenue !</h1>
<p>Ceci est la version française de la page d'accueil.</p>
{% endblock %}
या सोप्या उदाहरणामध्ये, प्रत्येक भाषेचे व्हर्जन बेस टेम्पलेट विस्तारित करते आणि शीर्षक, नेव्हिगेशन लिंक्स आणि मुख्य सामग्रीसाठी भाषांतरित टेक्स्ट प्रदान करते. हा दृष्टीकोन आपल्या वेबसाइटचे भिन्न भाषेचे व्हर्जन व्यवस्थापित करणे सुलभ करतो.
उत्तम पद्धती
- बेस टेम्पलेट सोपे ठेवा: बेस टेम्पलेटमध्ये फक्त आवश्यक घटक असावेत जे सर्व पृष्ठांवर सामायिक केले जातात.
- वर्णनात्मक ब्लॉक नावे वापरा: ब्लॉक नावे निवडा जी त्यांचे उद्दीष्ट स्पष्टपणे दर्शवतात.
- आपले टेम्प्लेट्स तार्किकदृष्ट्या व्यवस्थित करा: संबंधित टेम्प्लेट्सना डिरेक्टरीमध्ये गटबद्ध करा.
- खूप खोलवर इनहेरिटन्स टाळा: गुंतागुंत टाळण्यासाठी आपल्या इनहेरिटन्स श्रेणीची खोली मर्यादित करा.
- `super()` फंक्शनचा विचारपूर्वक वापर करा: आपल्याला बेस टेम्पलेटमधील ब्लॉकची सामग्री जोडण्याची किंवा सुधारित करण्याची आवश्यकता असल्यास फक्त
super()फंक्शन वापरा. - टेम्पलेट घटक वापरण्याचा विचार करा: अधिक जटिल वेबसाइटसाठी, आपल्या टेम्प्लेट्सना लहान, पुन: वापरण्यायोग्य घटकांमध्ये विभाजित करण्याचा विचार करा. हे जिंजा2 मध्ये समाविष्ट किंवा मॅक्रोंद्वारे प्राप्त केले जाऊ शकते, परंतु यामुळे चांगल्या इनहेरिटन्स धोरणाचे समर्थन केले पाहिजे, त्याऐवजी ते बदलू नये.
प्रगत तंत्र
1. सशर्त ब्लॉक ओव्हरराइडिंग
आपण विशिष्ट अटींवर आधारित ब्लॉक ओव्हरराइड करण्यासाठी आपल्या टेम्प्लेटमध्ये सशर्त विधान वापरू शकता. हे आपल्याला वापरकर्त्याच्या भूमिका, प्राधान्ये किंवा इतर घटकांवर आधारित आपल्या पृष्ठांची सामग्री सानुकूलित करण्यास अनुमती देते.
{% extends 'base.html' %}
{% block content %}
{% if user.is_authenticated %}
<h2>स्वागत आहे, {{ user.username }}!</h2>
<p>हे प्रमाणित वापरकर्त्यांसाठीचे आशय आहे.</p>
{% else %}
<h2>स्वागत आहे!</h2>
<p>अधिक सामग्रीमध्ये प्रवेश करण्यासाठी कृपया लॉग इन करा.</p>
{% endif %}
{% endblock %}
2. मॅक्रो वापरणे
जिंजा2 मॅक्रो पायथनमधील फंक्शन्ससारखेच असतात. ते आपल्याला HTML कोडचे पुन: वापरण्यायोग्य स्निपेट्स परिभाषित करण्यास अनुमती देतात जे आपल्या टेम्प्लेटमधून कॉल केले जाऊ शकतात. मॅक्रो फॉर्म घटक, नेव्हिगेशन मेनू आणि इमेज गॅलरीसारखे टेम्पलेट घटक तयार करण्यासाठी वापरले जाऊ शकतात.
एका स्वतंत्र फाइलमध्ये मॅक्रो परिभाषित करण्याचे उदाहरण (macros.html):
{% macro input(name, type='text', value='') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}
टेम्पलेटमध्ये मॅक्रो आयात आणि वापरण्याचे उदाहरण:
{% from 'macros.html' import input %}
<form>
{{ input('username') }}
{{ input('password', type='password') }}
<button type="submit">सबमिट</button>
</form>
3. टेम्पलेट फिल्टर
टेम्पलेट फिल्टर आपल्याला आपल्या टेम्प्लेटमधील व्हेरिएबल्सचे आउटपुट सुधारण्याची परवानगी देतात. जिंजा2 capitalize, lower, upper आणि date सारखे अनेक बिल्ट-इन फिल्टर प्रदान करते. आपण आपले स्वतःचे सानुकूल फिल्टर देखील परिभाषित करू शकता.
तारीख फॉरमॅट करण्यासाठी date फिल्टर वापरण्याचे उदाहरण:
<p>प्रकाशित: {{ post.date | date('%Y-%m-%d') }}</p>
निष्कर्ष
जिंजा2 सह फ्लॅस्क टेम्पलेट इनहेरिटन्स आपल्या टेम्प्लेट्सचे आयोजन करण्यासाठी, कोडची पुन: वापरणीक्षमता वाढविण्यासाठी आणि आपल्या वेब ॲप्लिकेशनमध्ये सुसंगतता सुनिश्चित करण्यासाठी एक शक्तिशाली तंत्र आहे. बेस टेम्प्लेट्स, ब्लॉक व्याख्या आणि चाइल्ड टेम्प्लेट्सच्या प्रमुख संकल्पना समजून घेऊन, आपण चांगले संरचित आणि देखभाल करण्यायोग्य टेम्प्लेट्स तयार करू शकता जे आपल्या वेब डेव्हलपमेंट वर्कफ्लोला सुलभ करतात. डी.आर.वाय. (स्वत: ला पुन्हा करू नका) तत्त्वाचा स्वीकार करा आणि मजबूत आणि स्केलेबल वेब ॲप्लिकेशन्स तयार करण्यासाठी टेम्पलेट इनहेरिटन्सचा उपयोग करा.
या सर्वसमावेशक मार्गदर्शकाने फ्लॅस्क टेम्पलेट इनहेरिटन्सच्या मूलभूत बाबींचा समावेश केला आहे. या लेखात नमूद केलेल्या उदाहरणे आणि सर्वोत्तम पद्धतींचे अनुसरण करून, आपण आपल्या फ्लॅस्क प्रकल्पांमध्ये प्रभावीपणे टेम्पलेट इनहेरिटन्सची अंमलबजावणी करू शकता आणि जागतिक प्रेक्षकांसाठी चांगल्या प्रकारे आयोजित, देखभाल करण्यायोग्य आणि सुसंगत वेब ॲप्लिकेशन्स तयार करू शकता. आपल्या प्रकल्पांच्या विशिष्ट गरजा पूर्ण करण्यासाठी या तंत्रांना जुळवून घ्या आणि आपल्या टेम्पलेट डिझाइन क्षमता अधिक वाढविण्यासाठी जिंजा2 च्या प्रगत वैशिष्ट्यांचा शोध घ्या.