How to add a Javascript script for every Item pages

Archive
1

HI, I’m a new user of Grav and It’s an amazing CMS.

However I’m not really tech-saavy and I have an issue with a javascript.

I want to use Hashover as my commenting system, the folder an all the things are on my webhost alongside Grav.

But I don’t understand how to add the script in all my Items pages.

I want to add

<script type="text/javascript" src="/hashover/hashover.js"></script>

Does I have to use Assets ? Can someone explain how it works ?

Thanks.

2

You could just add it to the relevant template, as you do not want it included globally.

3

Custom CSS plugin? (https://getgrav.org/downloads/plugins)

4

It does not appear that @bridouz needs to inject custom CSS, but rather include a relevant script on select pages in order to embed a HTML-system for commenting.

5

You’re right, my bad. Assets is the way to go!

6

Thanks for your answers.

So I can simply add

In the item.html.twig file in theme/template ?

7

That is the simplest way to go, as you do presumably not need or want the script to be loaded on all pages. Adding it to item.html.twig, for example, loads it only on pages using this template. If loaded generally to assets, it will be pipelined to all pages.

You could load it via assets and specify template-restrictions, but that is just a more difficult way to go leading to the same result.

8

Thanks.

One final question : my script files have to be in the theme folder or I can put them in my grav root folder ?

9

They should be in the theme folder, as the root folder is fairly much a reserved folder for the system. Clearing cache could delete the script if located in root (if memory serves me right).

10

It does not seem to work when I simply add

To item.html.twig

Do I need to add { block JavaScript} before and after ?

11

You need to make sure the src-attribute correctly points to an existing path and file, for example:

<script type=“text/javascript” src=“{{ theme_dir }}/scripts/hashover/hashover.js”></script>