[ADD] Docu for templates and bundles

This commit is contained in:
Peter Pfeufer 2023-12-18 01:22:48 +01:00
parent eebeb26001
commit b2e70c3702
No known key found for this signature in database
GPG Key ID: 6051D2C6AD4EBC27
2 changed files with 47 additions and 0 deletions

View File

@ -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
::: :::

View 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 %}
```