Unexpected tag error when trying to use import in index.html template. How to fix?

1

Hi,

I am trying to include Katex in my Zola generated pages. I tried using the solution given here:

To do that:

  1. I created a macros.html file in the templates folder with the macro
{# === KATEX ===#}
{% macro katex() %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">

  <!-- The loading of KaTeX is deferred to speed up page rendering -->
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>

  <!-- To automatically render math in text elements, include the auto-render extension: -->
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
	  onload="renderMathInElement(document.body);"></script>
	<script>
		document.addEventListener("DOMContentLoaded", function() {
			renderMathInElement(document.body, {
				delimiters: [
				  {left: "$$", right: "$$", display: true},
				  {left: "\\(", right: "\\)", display: false},
				]
			});
		});
	</script>
{% endmacro katex %}
  1. In my index.html file in the templates folder I added the line
{% import "macros.html" as macros %}

Source: HugoTrentesaux/toucan: Thème Zola inspirÊ de Pelican - templates/index.html at master - toucan - Service Git

This is, however, throwing the following error. Can you please tell me how to fix this? What am I doing wrong?

Error: Error parsing templates
Reason:
* Failed to parse "/Users/curioustolearn/noteszola/templates/index.html"
 --> 3:1
  |
3 | {% import "macros.html" as macros %}␊
  | ^---
  |
  = unexpected tag; expected end of input or some content
2

It appears, I was getting the problem because the import statement was not the first line of index.html.

I fixed that and the error goes away. However, the KaTex is not being loaded on the page to which I added the following. Do you know why this might be happening?
Thank you.

+++
title = "Glossary of Terms"

[extra]
katex = true 
+++


* __Underflow and Overflow__

  Underflow occurs when numbers near zero are rounded to zero.
  
  Overflow occurs when numbers with large magnitude are approximated as \\(\infty\\).

In my page.html template I have:

{% block head %}
    {% if page.extra.katex %}
        {{ macros::katex() }}
    {% endif %}
{% endblock head %}
3

So the bunch of link/script never get rendered? If you remove the if around the macro does it work correctly?

4

Thank you @keats. I tried removing the if statement before the macro, but it does not work. The KaTeX is never loaded as you said. I looked in view source and there is no KaTeX there.

5

Do you have your repo somewhere I can access?

6

Thank you Keats. I did not have it before, but I created a private repo on Github to share it. Can you please share your Github username, so that I can give you access to it?

BTW, have you created Zola. If so, thank you so much. I hope to use it to organize my notes.

7

Yep it’s me, my username on GH is Keats

8

Awesome! Thank you for helping out and being willing to take a look at the problem.

Sorry for the delay in replying. I have shared the repository with your username on GH.

9

You’re missing {% block head %}{% endblock %} in your index.html, the page.html is extending this block but it doesn’t exist.
Arguably that should probably be an error when you do tbh, maybe in Tera v2.

1 Like
10

Yay!! That works. Sorry for the long chase. I read the docs of Tera, and understood that how the blocks work, but did not realize I was making this error.

Thank you for your help.