Include js/css only for one page

Archive
1

Hi folks!
What’s the best practice for loading styles or scripts only for one special page?

Is it a good idea to extend the javascript block from the base template inside the content block of a different template? It seems to work, but I was wondering if this is the right way to go…

Here’s an example:

excerpt base.html.twig

<head>
{% block head %}
    <meta charset="utf-8" />
    {% block javascripts %}
        {# {% do assets.addJs('jquery',101) %} #}
    {% endblock %}
    {{ assets.js() }}
{% endblock head%}
</head>

excerpt special.html.twig

{% extends 'partials/base.html.twig' %} 

{% block content %}
	{{ page.content }}
  
    {% block javascripts %}
	     <script src="special.js"></script>
    {% endblock %}
{% endblock %}

Any thoughts on this?

2

There are many ways to accomplish this, but for a single page, I would recommend two ways:

  1. Use the Assets plugin to add the css/js right in the markdown - https://github.com/getgrav/grav-plugin-assets

  2. Enable Twig processing in the page header (process: twig: true) and then use syntax like this:

{% do assets.addJs('/mypage/special.js') %}
3

For performance I think you can duplicate or create another template and for this page use the new template. Into the template you add the twig function for add the js/css.

4

that’s the 3rd way, but its more maintenance than the first two. really performance differences will be quite minimal between them all.

5

Thanks for your answers! The third way is quite similar to the one I tried to describe in my question.