Using the component TemplateTag

In order to use component don't forget to add 'yak' to your INSTALLED_APPS.

If you haven't added yak to your TEMPLATES builtin options you will also have to load it in your templates.

{% load yak %}

Basic usage

In its simplest form, component works like include but in a block form. The contents from the inside of the block will be available inside the component's template as yield.

For convenience, component also provides a has_block variable indicating whether or not there is something in yield.

Here is a small example:

index.html

{% component 'hello.html' with name='you' %}
  Welcome!
{% endcomponent %}

hello.html

<div class="hello-div">
  <header>
    <h1>Hello {{name|default:'world'}}</h1>
  </header>
  {% if has_block %}
    {{yield}}
  {% else %}
    I've got nothing to say to you!
  {% endif %}
</div>

Named slots

component supports "named slots". Named slots are defined using the slot tag and can be overridden in the caller template using the slotvalue tag.

While a component can only have as single yield, it can have multiple named slots.

Slots that are not overridden by the caller template will keep the content they were given in the component template.

Here is an example:

index.html

{% component 'hello.html' %}
  {% slotvalue 'title' %}
    <h1>Hello YOU</h1>
  {% endslotvalue %}
  Welcome!
{% endcomponent %}

hello.html

<div class="hello-div">
  <header>
    {% slot 'title'}<h1>Hello world</h1>{% endslot %}
  </header>
  {{yield}}
  <p>{% slot 'note' %}Mi casa es su casa{% endslot %}</p>
</div>

The ouput will be:

<div class="hello-div">
  <header>
    <h1>Hello YOU</h1>
  </header>
  Welcome!
  <p>Mi casa es su casa</p>
</div>

Using with dj-angles

There is nothing special to do here, if you followed the install instructions, you should be able to use component, slot and slotvalue by calling respectively <dj-component>, <dj-slot> and <dj-slotvalue>.

Lazy dj-angles

If you'd like to be able to call {% component 'hello.html' %} using the shorthand writing of <dj-hello> then you'll need to set the provided mapper in your settings.

from yak.djangles import mapper
ANGLES = {
    'mappers': mapper,
    'default_mapper': 'yak.djangles.map_component',
}