Adding Javascript to layout.html template in Sphinx

Question

I'm extending the layout of my sphinx-book-theme by adding the following to the layout.html under my source\_templates folder:

{% extends "!layout.html" %}

{%- block extrahead %}
<script
   type="text/javascript"
   src="https://utteranc.es/client.js"
   async="async"
   repo="executablebooks/jupyter-book"
   issue-term="pathname"
   theme="github-light"
   label="💬 comment"
   crossorigin="anonymous">
</script>

{% endblock %}

When I build from source with the command:

sphinx-build -b html ....

The html output doesn't render the comment section at the bottom of the pages.

However, if I add the javascript bloc directly to the bottom of a Markdown file, the comment section appears at the bottom of the relevant page.

What am I missing here? When I inspect the page source, I can see that the javascript block is in the head section.

I'm using Sphinx v4.5.0 with the Sphinx-book-theme on a Windows OS

Answer 1

I managed to find an answer to my own question. :-) Looking at the main 'layout.html', I figured out the template had a different structure and the blocks were using different naming conventions than the ones used in the default Sphinx templates. So I changed my initial configuration by adding an extra block extraScript inside the block docs_main , then I added a block there under {super}:

{% block extraScript } {% endblock extraScript %}

Then I adapted the code indicated in my former question as shown below:

{% extends "!layout.html" %}

{%- block extraScript %}
<script
   type="text/javascript"
   src="https://utteranc.es/client.js"
   async="async"
   repo="executablebooks/jupyter-book"
   issue-term="pathname"
   theme="github-light"
   label="💬 comment"
   crossorigin="anonymous">
</script>

{% endblock extraScript %}

If you have a more elegant method to solve this issue, please share your ideas with us.