Asset Tags
Sometimes a plugin wants to add some CSS and JavaScript to your theme, for example, the Cookie Consent plugin. It adds a cookie consent popup to all pages, so that users can agree to the cookie policy of your website.
There are three Twig-tags, that allow plugins to add meta-tags, JavaScript and CSS. Please make sure that you add these tags to your theme, because otherwise, the plugins won't work:
{{ assets.addMeta() }}
{{ assets.renderCSS() }}
{{ assets.renderJS() }}
#renderMeta()
You can add standard meta tags with the twig-function {{ assets.renderMeta() }}
. It is also possible to add all metatags manually, but in this case no plugins can add additional meta-tags and no plugins can manipulate existing meta-tags. So it is highly recommended to use the renderMeta()
function.
Be aware that renderMeta()
will not render all meta-tags, so you should add some tags manually. The most important tags that you have to add manually are:
- title
- description
- canonical
So a standard layout-template might look like this:
<title>{% block title %}{% endblock %}</title>
<meta name="description" content="{{ metatabs.meta.description }}" />
<meta name="author" content="{{ metatabs.meta.author }}" />
<meta name="generator" content="Typemill" />
<meta rel="canonical" href="{{ item.urlAbs }}" />
{{ assets.renderMeta() }}
#renderCSS()
It is recommended to add the CSS tag after all your css files, and before the closing `` tag. It is also a good practice in Twig to wrap your ressources in a block-tag. You can read more about this in the Twig chapter.
<title>title</title>
....
....
{% block stylesheets %}
<link rel="stylesheet" href="{{ base_url }}/themes/mytheme/css/style.css">
{{ assets.renderCSS() }}
{% endblock %}
#renderJS()
The same for JavaScript: It is recommended to place all JavaScript at the end of the page before the closing `` tag. And you should wrap all your JavaScript in a block-element, too:
...
{{ content }}
...
...
{% block javascripts %}
<script src="{{ base_url }}/themes/yourtheme/js/my.js"></script>
{{ assets.renderJS() }}
{% endblock %}