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 $$. Surrounding with single dollar mark is interpreted as inline math.

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?

(Open question) TeX Math font (Latin Modern Math) in draw.io?

TBW…

You tried to add raw HTML lines on your page?

Hugo ignores raw HTML codes in markdown posts.

Add a date information on posts

  1. config.toml -> [Params] -> post_meta = ["date"].
  2. In a FrontMatter of a page, add lastmod.
  3. Done :)

Comments with Disqus

The official manual:

https://gohugo.io/content-management/comments/

  1. Set up a Disqus account.
  2. Add the line in config.yml with Shortname, like DisqusShortname = "{{ my_Didqus_Shorname }}".
  3. By default, comments: true.

Note: in config.yml file, the variable starts with capital D, even the name of variable in official manual starts with small D. The name of variable is overwritten by mainroad theme.

When I try to render on my local environment (hugo server), mainroad omit Disqus comment :)

To be added…