Nunjucks syntax
Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.
Using include
You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type": "block",
"title": "Latest Posts",
"list": [
{
"text": "VF’s top social media posts of 2017 and what we learned from them",
"link_list_href": "JavaScript:Void(0);"
},
{
"text": "The VF Imaging Centre all about visibility",
"link_list_href": "JavaScript:Void(0);"
},
{
"text": "Press office sprint 1 journalist personas",
"link_list_href": "JavaScript:Void(0);"
},
{
"text": "A colour scheme for VF",
"link_list_href": "JavaScript:Void(0);",
"badge": {
"theme": "secondary",
"text": "alpha"
},
"meta": "Updated 14th February 2018"
},
{
"text": "New team members",
"link_list_href": "JavaScript:Void(0);"
}
]
}
%}
{% include "../path_to/vf-link-list/vf-link-list.njk" %}
Using render
This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.
{% render '@vf-link-list', {
"component-type": "block",
"title": "Latest Posts",
"list": [
{
"text": "VF’s top social media posts of 2017 and what we learned from them",
"link_list_href": "JavaScript:Void(0);"
},
{
"text": "The VF Imaging Centre all about visibility",
"link_list_href": "JavaScript:Void(0);"
},
{
"text": "Press office sprint 1 journalist personas",
"link_list_href": "JavaScript:Void(0);"
},
{
"text": "A colour scheme for VF",
"link_list_href": "JavaScript:Void(0);",
"badge": {
"theme": "secondary",
"text": "alpha"
},
"meta": "Updated 14th February 2018"
},
{
"text": "New team members",
"link_list_href": "JavaScript:Void(0);"
}
]
} %}
HTML
<div class="vf-links">
<h3 class="vf-links__heading">Latest Posts</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="JavaScript:Void(0);">
VF’s top social media posts of 2017 and what we learned from them
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="JavaScript:Void(0);">
The VF Imaging Centre all about visibility
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="JavaScript:Void(0);">
Press office sprint 1 journalist personas
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="JavaScript:Void(0);">
A colour scheme for VF
</a>
<span class="vf-badge vf-badge--secondary">alpha</span>
<p class="vf-links__meta">Updated 14th February 2018</p>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="JavaScript:Void(0);">
New team members
</a>
</li>
</ul>
</div>
BioSamples
GO
GWAS Catalog
IMPC Portal