Theme engine
The organization site themes are rendered with Jinja2. Theme files are uploaded as theme assets.
Basic Jinja syntax:
{{ variable }} {# print a value #}
{{ object.attribute }} {# attribute access #}
{{ object['key'] }} {# key access #}
{% if condition %}...{% endif %}
{% for item in list %}...{% endfor %}
{{ value | filter }}
Pages in this section:
- Creating a theme — installing the CLI, developing locally, publishing versions
- Context variables — what is available on every page
- Objects and attributes — the fields of each object (
campaign,page, …) - Custom fields —
campaign.customfields - Tags and filters —
{% section %},format_money,format_date, … - Sections and settings —
theme,sections,section
Theme structure
A theme's files are organised in folders, and the folder decides the role of the 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 |
Themes contain text files only: images are uploaded to the organization's media library and picked from the settings.