How to use page specific javascript using the starter-blog template using asset rev plugin?

Question

I'm practicing with starter-blog template.

How do I include a page specific javascript using the asset rev plugin?

Thanks.

Answer 1

Use the rev function provided by the plugin to get the path to your JS file (relative to the asset base path) and register it with the {% js %} tag:

{% js rev('js/foobar.js') at head with { defer: true } %}

Another option that I like to use is to declare a block in the base template and then extend it the page specific template:

{# templates/_private/layout/index.html #}
{% block assets %}
    <link rel="stylesheet" href="{{ rev('main.css') }}">
{% endblock %}

{# templates/_private/your-page.html #}
{% extends '_private/layout/index.html' %}
{% block assets %}
    {{ parent() }}
    <script src="{{ rev('js/foobar.js') }}" defer>
{% endblock %}