Mainroad configuration manual on Hugo

Page content

Most of the information on this page is in the official document.

https://themes.gohugo.io/mainroad/

This post is a personal memo to remind me of what I did.

Main page

It “specifies section pages to show on home page and the “Recent articles” widget.” The following config line shows content/general and content/hugo category on our main page.

[Params]
  mainSections = ["general", "hugo"]

Add Google Analytics

Mainroad theme supports Google Analytics as default, so you don’t need to input the JavaScript in the template manually. In config.toml, add the following line. When your Tracking ID is “UA-xxxx9xxxx-2”, for example,

googleAnalytics = "UA-xxxx9xxxx-2"

Fold the post at main page

As a default setting of the theme, posts are not folded. This means, if one of your posts is large, your main page becomes large also unless the post is pushed back to another page. Therefore I want my posts to appear at the main page in a short format.

Add the following line in config.toml.

[Params]
...
  readmore = true
...

Enabling MathJax in a page (TeX syntax)

Add the following line to config.toml.

[Params]
...
mathjax = true # Enable MathJax
mathjaxPath = "https://cdn.mathjax.org/mathjax/latest/MathJax.js" # Specify MathJax path
mathjaxConfig = "TeX-AMS-MML_SVG" # MathJax config
...

At the top of a page where you want to use mathjax, add the following line.

mathjax = true

Then, you can use TeX syntax in the post double dollar mark $$.

For example, you can write the TeX syntax like follows in a Markdown file.

$$e^{-i\pi} + 1 = 0$$

It is rendered as follows, $$e^{-i\pi} + 1 = 0$$

Note: We need six \ in order to change a line.

Inline math

Explicitly write JavaScript code in header.

cp ./themes/mainroad/layouts/partials/header.html ./layouts/partials/
vim ./layouts/partials/header.html

Add the following lines in ./layouts/partials/header.html.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']]
  }
});
</script>

TikZJax

TikZ in Borwser.

Add the lines in the header.

<link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>

And use it.

<script type="text/tikz">
  \begin{tikzpicture}
    \draw (0,0) circle (1in);
  \end{tikzpicture}
</script>

In Hugo… Should I write custom template for the block?

You tried to add raw HTML lines on your page?

Hugo ignores raw HTML codes in markdown posts.

To be added…