टेम्पलेट

एडमिन का हर पेज एक Jinja2 टेम्पलेट है जिसे आप ओवरराइड कर सकते हैं। बिल्ट-इन टेम्पलेट ट्री को fork किए बिना किसी एक list पेज, किसी फ़ील्ड के table cell, या किसी dashboard widget को बदलें।

Template loader कैसे काम करता है

from sqlalchemy import create_engine
from starlette_admin.contrib.sqla import Admin

engine = create_engine("sqlite:///admin.sqlite")
admin = Admin(engine, title="My Admin", templates_dir="my_templates/")

Admin एक Jinja2 ChoiceLoader बनाता है जो पहले आपकी templates_dir को देखता है और उसके बाद बिल्ट-इन starlette_admin/templates/ package directory को। my_templates/ के अंतर्गत कोई फ़ाइल उसी relative path पर रखें जिस पर वह starlette_admin/templates/ के अंदर होती है, और आपकी फ़ाइल बिल्ट-इन फ़ाइल को shadow कर देगी। बाकी सभी टेम्पलेट बिल्ट-इन directory से render होते रहते हैं।

Template directory map

किसी एक पेज का template ओवरराइड करना

my_templates/
└── list.html   ← shadows the built-in list.html

{# my_templates/list.html #}
{% extends "@starlette-admin/list.html" %}

{% block content %}
  <div class="alert alert-info">Custom banner above the list.</div>
  {{ super() }}
{% endblock %}

{% extends "list.html" %} वापस आपकी अपनी my_templates/list.html पर resolve हो जाएगा, क्योंकि templates_dir को पहले check किया जाता है, और वह circular reference infinite recursion error उठाता है। @starlette-admin/ prefix हमेशा बिल्ट-इन copy की ओर point करता है, इसलिए किसी override के अंदर हर extends और include को bare filename की जगह इसी का उपयोग करना चाहिए।

Overridable blocks

हर बिल्ट-इन पेज layout.html को extend करता है, जो base.html को extend करता है। पेज का बाकी हिस्सा duplicate किए बिना किसी एक fragment को बदलने के लिए पूरी फ़ाइल की जगह केवल एक {% block %} को ओवरराइड करें:

{# my_templates/list.html #}
{% extends "@starlette-admin/list.html" %}

{% block list_toolbar_extra %}
  {{ super() }}
  <a class="btn btn-outline-primary" href="/reports/export">Custom report</a>
{% endblock %}

base.html

layout.html

list.html

detail.html

create.html / edit.html

login.html

index.html

error.html

Example: sidebar logo को inline SVG से replace करना

Logo set करने का सबसे तेज़ तरीका Admin(logo_url=...) को URL pass करना है, जो external .svg files सहित ज़्यादातर cases को cover करता है। लेकिन बिल्ट-इन टेम्पलेट उस URL को एक <img> tag के अंदर render करता है, इसलिए SVG आस-पास के पेज से CSS properties inherit नहीं कर सकता।

जब आप चाहते हैं कि logo बाकी UI के साथ respond करे, तब inline <svg> markup के साथ brand block को ओवरराइड करें।

कार्यान्वयन

अपनी templates directory में एक layout.html फ़ाइल बनाएँ। एडमिन का हर पेज layout.html से inherit होता है, इसलिए यह एक override sitewide लागू होता है।

{# my_templates/layout.html #}
{% extends "@starlette-admin/layout.html" %}

{% block brand %}
  <svg class="navbar-logo" viewBox="0 0 32 32" fill="currentColor">
    <path d="M16 2 L30 9 L30 23 L16 30 L2 23 L2 9 Z" />
  </svg>
{% endblock %}

Field templates ओवरराइड करना

हर field context तीन subdirectories का उपयोग करती है:

Text fields का list cell आप form या detail display को छुए बिना ओवरराइड कर सकते हैं:

my_templates/
└── fields/
    └── list/
        └── text.html

Type को हर जगह override करने की जगह किसी एक field instance को अपने टेम्पलेट की ओर point करने के लिए, field पर ही list_template, detail_template, form_template, null_template, या empty_template set करें:

from starlette_admin.fields import StringField

StringField("status", list_template="fields/list/status_badge.html")

null_template (default "fields/detail/_null.html") और empty_template (default "fields/detail/_empty.html") अलग slots हैं। जब भी field की value None हो या खाली list या tuple हो, list और detail पेज उन्हें list_template या detail_template की जगह render करते हैं:

StringField("status", null_template="fields/detail/_status_null.html")

Widget templates ओवरराइड करना

Widgets भी वही override pattern अपनाते हैं। अपनी files widgets/ directory के अंतर्गत रखें:

my_templates/
└── widgets/
    └── stat_widget.html

Global template variables

ये variables हर टेम्पलेट में बिना pass किए available होते हैं। Admin उन्हें setup के दौरान एक बार Jinja2 globals के रूप में install करता है:

Per-page context variables

ऊपर दिए गए globals के अलावा, हर पेज अपना context dictionary TemplateResponse को pass करता है।

list.html

detail.html

create.html / edit.html

अपने globals और filters जोड़ना

Templates में अपने variables और functions जोड़ने के लिए, Admin को subclass करें और __init__ को override करें। पहले super().__init__() call करें, ताकि जोड़ने से पहले self.templates मौजूद हो:

from sqlalchemy import create_engine
from starlette_admin.contrib.sqla import Admin


class MyAdmin(Admin):
    def __init__(self, *args, **kwargs) -> None:
        super().__init__(*args, **kwargs)
        self.templates.env.globals["site_name"] = "My App"
        self.templates.env.filters["currency"] = lambda v: f"${v:,.2f}"


engine = create_engine("sqlite:///admin.sqlite")
admin = MyAdmin(engine, title="My Admin")

Built-in Jinja2 filters

हर admin instance _setup_templates के दौरान ये filters register करता है:

आगे क्या

• Form Layouts: Create और edit forms को titled, optionally collapsible groups में split करें, और उनका markup बदलने के लिए _form_group.html को ओवरराइड करें।
• Custom Themes: अलग-अलग टेम्पलेट को छुए बिना admin को restyle करें।
• Custom Fields: किसी field की Python class को उसके अपने list_template या form_template से pair करें।
• Extension Points: Templates से आगे pluggable surfaces की पूरी सूची।