Skip to content

Components

Ben C edited this page Jan 3, 2023 · 3 revisions

Components

Djazztro contains many Astro components that render into the Django templating syntax.

Primitive Components

Tag

A simple component that renders into {% {expression} %}

Example

<Tag expression="load static"/> => {% load static %}

Variable

A simple component that renders into {{ {expression} }}

Example

<Variable expression="user.email|lower"/> => {{ user.email|lower }}

QoL Components

Technically you only need <Tag> and <Variable>, but some other components are provided for you.

If

Allows you to create {% if %} {% endif %} blocks easily

Example

<If expression="user.is_authenticated">
  <h1>You're logged in!</h1>
</If>

=>

{% if user.is_authenticated %}
  <h1>You're logged in!</h1>
{% endif %}

ElseIf

Allows you to create an {% elif %} block.

Example

<If expression="user.last_name != 'Jim'">
  <h1>Hi person!</h1>
  <ElseIf expression="user.first_name == 'jim@jim.com'"/>
  <h1>Hi Jim!</h1>
</If>

=>

{% if user.last_name != "Jim" %}
  <h1>Hi Person!</h1>
{% elif user.first_name == "Jim" %}
  <h1>Hi Jim!</h1>
{% endif %}

Else

Allows you to create {% else %} blocks

Example

<If expression="user.is_authenticated">
  <h1>Hi, User!</h1>
  <Else/>
  <h1>Hi, Stranger!</h1>
</If>

=>

{% if user.is_authenticated %}
  <h1>Hi, User!</h1>
{% else %}
  <h1>Hi, Stranger!</h1>
{% endif %}

For

Allows you to loop through a list

<For itemName="user" sourceList="users">
  <Variable expression="user"/>
</For>

=>

{% for user in users %}
  {{ user }}
{% endfor %}

Load

Allows you to load custom template tag libraries

Example

<Load tagLibraryName="cool_library"/>

=>

{% load "cool_library" %}

Block

Allows for template extension and inheritance via the block system

Example

<Block blockName="footer">
 <p>Cool site (idk these examples are hard to write)</p>
</Block>

=>

{% block "footer" %}
  <p>Cool site</p>
{% endblock %}

Url

Allows you to insert a url to another page with args

Examples

<Url name="profile" args={{id: "user.id"}}/>

=>

{% url "profile" user.id %}