To create a render.py jinja template:
- Create a new file in the
layouts
directory, inside theclient-specific
directory. - You can design the deliverable using HTML and CSS, importing components and objects already defined in their corresponding directories.
- You can define jinja variables, which you can later use in your code
{% set properties = get_properties(combine_dup_items=True) %}
. - Available functions are defined in the BriteCore project, in lib/render/render.py Some of these functions are described in the Functions for template reference.
- To preview the new template, go to the
html_template
table and find the name of the deliverable, then use that to build the link. Refer to the jinja deliverables documentation on how to build the link. - If you can’t see the deliverable you just created, you can use the
gulp develop:update-templates --client=client_name
(you need to stop this process after it ends, useCtrl+C
).
Use components and objects
- You can import components to your layouts and send different variables to your components as needed:
View code
Hide code
{{ include_template('@@components/stub', defaults=defaults, due_date=due_date) }}
- Importing objects:
View code
Hide code
<img src="data:image/png;base64,{{ include_template('@@objects/base64-logo-2') }}" class="mb1" />
Template usage
You can use .vue
files for your elements Wrap your jinja markup with <jinja>
, it will be extracted as-is.
Sample code
View code
Hide code
<docs>
## Example component
Put documentation for your element here, it will be extracted to `/docs`
</docs>
<jinja>
<table class="o-foo">
{% for bar in foo -%}
<tr class="o-foo__bar">{{ bar }}</tr>
{%- endfor %}
</table>
</jinja>
<style lang="scss">
// stylesheets/base.scss is auto imported, so our mixins/placeholder are available
@include object('foo') {
@extend %o-table;
@include modifies-element('bar') {
// You don't have to use mixin, "&__ {}" works fine too
test: 123;
}
}
// Compiles with the standard britecore deliverable table styling
//
// .o-foo {
// text-align: left;
// width: 100%;
// border-collapse: collapse;
// border: 1px solid black; }
//
// .o-foo th {
// text-align: center;
// font-weight: bold; }
//
// // ...
//
// .o-foo .o-foo__bar {
// test: 123; }
</style>