How to use custom javascript with quark template?

Support
1

Hello,
I’d like to use some custom javascript as part of my Grav website, but I’m not sure how to go about it. I’m using my own template inherited from Quark v2.0.3. Does anyone know of any tutorials for this? I’m a beginner but happy to experiment! I have used html and css before, everything else is quite new to me.


I’ve found topics on the asset manager, and adding js to the footer, but they don’t include enough scope for me to get things to work.
https://learn.getgrav.org/17/themes/asset-manager


What I’m trying to do is add draggable functionality to elements in the body of one default.md page. I’ve found a js library which has the functionality I need. I want to use the Dragging code from this page -
https://interactjs.io/


I have put the CSS in my custom.css file.
My questions are:

  • Do I need to add the link to the js library in a specific way to the asset manager to get it to work in the body of the page (e.g. ‘bottom’ or inline)? Is there anywhere else I need to reference it?
  • Can I add the html code needed straight into the default.md page?
  • How or where do I put the extra js code on the page to make it active? Can I make a custom.js file and reference that? Or do I need to include it somehow in the default.md page?


    Thank you in advance for your help! I’ve been lurking on this forum for a while and have found so much useful info so far, it’s much appreciated.
2

I’m not sure if it is best practice but I added some js to js → site.js and it worked.

If you have your own theme inherited from Quark then just make a js folder in there, copy in the site.js file and try adding your code at the bottom.

Another way might be to make a dedicated js file for your code and add a call to it in the templates. You could add a line to this section in basehtml.twig.

{% block javascripts %}
    {% do assets.addJs('jquery', 101) %}
    {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}
    {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
{% endblock %}
3

Thank you @ozfiddler - I will try making a copy of the site.js! I made a js folder and added custom.js with my code in it, added it to the base.html.twig but without group:bottom so will try that too… :crossed_fingers:

4

@Tiinateaspoon,

What I’m trying to do is add draggable functionality to elements in the body of one default.md page.

If it is only one page you would like to add the library to, it would be a bit overkill to add the library to template base.html.twig. When doing this, the library will be loaded for each and every page that extends the ‘base’ template.

Option 1:

You can add js + css straight into the Markdown of the page. Here is an example adding the library to page 02.typography/default.md of a fresh Grav installation. I copied the javascript from the home page of https://interactjs.io:

---
title: Typography
---

<script type="module">
import interact from 'https://cdn.interactjs.io/v1.10.11/interactjs/index.js'

interact('.item').draggable({
  listeners: {
    move (event) {
      console.log(event.pageX,
                  event.pageY)
    }
  }
})
</script>

<style>
.item {
    color: red;
}
</style>

<div class="item">Please move me!</div>

... etc.

Here is the result:
Animation

Option 2:

If you would like to have the possibility to reuse the logic for multiple pages, you could copy template ‘default.html.twig’ into ‘interact.html.twig’ inside your inheriting theme and add the code there:

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

{% block content %}

  <script type="module">
    import interact from 'https://cdn.interactjs.io/v1.10.11/interactjs/index.js'

    interact('.item').draggable({
      listeners: {
        move(event) {
          console.log(event.pageX, event.pageY)
        }
      }
    })
  </script>

  <style>
    .item {
        color: red;
    }
  </style>

  <div class="item">Please move me!</div>

  {{ page.content|raw }}

{% endblock %}

You will now need to rename the page to 02.typographt/interact.md.

Option 3:

And if you like clean code, you can move the javascript and css into their own files. and add them to the assets in ‘interact.html.twig’:

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

{% block stylesheets %}
	{{ parent() }}

	{% do assets.addCss('theme://css/interact.css') %}
{% endblock %}

{% block javascripts %}
	{{ parent() }}
  
	{% do assets.addJs('theme://js/interact.js', {group: 'bottom', type: 'module'}) %}
{% endblock %}

{% block content %}

	<div class="item">Please move me!</div>

	{{ page.content|raw }}
{% endblock %}
2 Likes
5

@anon76427325 thank you so much for the comprehensive reply, you are a treasure! I will have an experiment over the next few days :grinning: