mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-07-09 12:30:15 +02:00
[ADD] Docu for templates and bundles
This commit is contained in:
parent
eebeb26001
commit
b2e70c3702
@ -8,4 +8,5 @@ Alliance Auth is providing its own CSS framework with a couple of CSS classes.
|
||||
|
||||
framework/api
|
||||
framework/css
|
||||
framework/templates
|
||||
:::
|
||||
|
46
docs/development/custom/framework/templates.md
Normal file
46
docs/development/custom/framework/templates.md
Normal file
@ -0,0 +1,46 @@
|
||||
# Templates
|
||||
|
||||
## Bundles
|
||||
|
||||
As bundles, we see templates that load essential CSS and JavaScript and are used
|
||||
throughout Alliance Auth. These bundles can also be used in your own apps, so you don't
|
||||
have to load specific CSS or JavaScript yourself.
|
||||
|
||||
These bundles include DataTables CSS and JS, jQuery Datepicker CSS and JS, jQueryUI CSS and JS, and more.
|
||||
|
||||
A full list of bundles we provide can be found here: https://gitlab.com/allianceauth/allianceauth/-/tree/master/allianceauth/templates/bundles
|
||||
|
||||
To use a bundle, you can use the following code in your template (Example for jQueryUI):
|
||||
|
||||
```django
|
||||
{% block extra_css %}
|
||||
{% include "bundles/jquery-ui-css.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_javascript %}
|
||||
{% include "bundles/jquery-ui-js.html" %}
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
## Template Partials
|
||||
|
||||
To ensure a unified style language throughout Alliance Auth and Community Apps,
|
||||
we also provide a couple of template partials. This collection is bound to grow over
|
||||
time, so best have an eye on this page.
|
||||
|
||||
### Page Header
|
||||
|
||||
On some pages you want to have a page header. To make this easier, we provide a template partial for this.
|
||||
|
||||
To use it, you can use the following code in your template:
|
||||
|
||||
```django
|
||||
{% block content %}
|
||||
<div>
|
||||
{% translate "My Page Header" as page_header %}
|
||||
{% include "framework/header/page-header.html" with title=page_header %}
|
||||
|
||||
<p>My page content</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
```
|
Loading…
x
Reference in New Issue
Block a user