mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-07-09 20:40:17 +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/api
|
||||||
framework/css
|
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