Custom configuration, and inject JavaScript in posts

Page content

Motivation

To enable TikZ in my note, I add a header in layout/partial/header.html at first. But this change injects the javascript lines into all my posts which don’t need to include the TikZ. So I want to inject JavaScript in case that I mark the post as “TikZ enabled”.

How to

Create a HTML template

In layouts/partials/header.html.

{{ if and .IsPage (eq (.Param "tikz") true) }}
<link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>
{{ end }}
  • {{ if and .IsPage (eq (.Param "tikz") true) }}: When tikz: true is defined in the post. inject the lines untill encounting {{ end }}.

Enable in a post

Add the line,

tikz: true

Inject JavaScript

Using shortcodes.

  1. mkdir layout/shortcodes
  2. vim layouts/shortcoeds/testjs.html
<div id="mytest">
<script type="text/tikz">
  \begin{tikzpicture}
    \draw (0,0) circle (1in);
  \end{tikzpicture}
</script>
</div>

Then, I can inject the JavaScript in this post as follows (delete a backquote (\) in the follwoing snippet. I added it because of a Hugo rendering issue).

{\{< testjs >}}