Theme engine
The organization site is rendered with Jinja2 templates. Basic syntax:
{{ variable }} {# print a value #}
{{ object.attribute }} {# attribute access #}
{{ object['key'] }} {# key access #}
{% if condition %}...{% endif %}
{% for item in list %}...{% endfor %}
{{ value | filter }}
In this section:
- Creating a theme: CLI, local development, publishing
- Context variables: what is available on every page
- Objects and attributes: the fields of
campaign,pageand the other objects - Custom fields:
campaign.customfields - Tags and filters:
{% section %},format_money,format_date, ... - Sections and settings:
theme,sections,section
Theme structure
The folder decides the role of a file:
| path | role |
|---|---|
manifest.json | name, identifier, version, author |
layout/*.html | the whole HTML document, with content_for_layout |
sections/*.html | composable blocks, each with its own {% schema %} |
snippets/*.html | reusable fragments, included with {% include %} |
templates/*.json | page composition: which sections, in which order |
templates/**/*.html | pages that are not composable, such as the supporter area |
config/settings_schema.json | which global settings the theme exposes |
config/settings_data.json | the values of those settings |
assets/* | CSS, JavaScript, fonts |
A theme contains only text files: images are uploaded to the organization's media library and picked from the settings.