JWen's Blog

Personal website of JWen 丁文亮的个人网站

Notes of Hugo

Table of Contents
From https://x.com/MoghaddamKarimi/status/1498354800928374794

Aug 26 2024: Set a page variable “showthedate”

References

The page variable date is required in every post that is further collected in a list (e.g. Blog, 日志, and TechNote). Take the hugo-ivy theme I currently used as an example, the appearance of the date in each page (in list) is controlled by the file themes/hugo-ivy/layouts/partials/meta.html

{{ if not .IsHome }}
    <h1>{{ .Title }}</h1>
    {{ with .Params.subtitle }}<h1><span class="subtitle">{{ . }}</span></h2>{{ end }}
    {{ if .IsPage }}
        <h3>
        {{ with or (or .Params.author (index .Site.Params.author .Section)) "" }}{{  print . " / " }}{{ end }}
        {{ if .Params.date }}{{ .Date.Format "2006-01-02" }}{{ end }}
        </h3>
    {{ end }}
    <hr>
{{ end }}

Let’s make a slight modification

{{ if not .IsHome }}
    <h1>{{ .Title }}</h1>
    {{ with .Params.subtitle }}<h1><span class="subtitle">{{ . }}</span></h2>{{ end }}
    {{ if .IsPage }}
        <h3>
        {{ with or (or .Params.author (index .Site.Params.author .Section)) "" }}{{  print . " / " }}{{ end }}
        <!-- {{ if .Params.date }}{{ .Date.Format "2006-01-02" }}{{ end }} -->
        {{ if isset .Params "showthedate" }}
                {{ if eq .Params.showthedate true }}
                        {{ if .Params.date }}{{ .Date.Format "2006-01-02" }}{{ end }}
                {{ end }}
        {{ else }}
                {{ if .Params.date }}{{ .Date.Format "2006-01-02" }}{{ end }}
        {{ end }}
        </h3>
    {{ end }}
    <hr>
{{ end }}

We have the following three cases (for the hugo-ivy theme)

  1. In the .md or .org file, we don’t have the page variable showthedate, then the date will show in the posts (in list).

  2. If we define the page variable showthedate in the .md file

    +++
showthedate = true
+++

    or in the .org file (using ox-hugo)

    #+hugo_custom_front_matter: :showthedate true

    then the date will show in the posts (in list).

  3. If we define the page variable showthedate in the .md file

    +++
showthedate = false
+++

    or in the .org file (using ox-hugo)

    #+hugo_custom_front_matter: :showthedate false

    then the date will NOT show in the posts (in list).

Aug 30 2024: Highlight the LISP code block using highlight.js

References

Add this script to themes/hugo-ivy/layouts/partials/head_highlightjs.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/lisp.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/atelier-forest.dark.css" />

<script>
  var preTags = document.getElementsByTagName('pre');
  var size = preTags.length;
  for (var i=0; i < size; i++) {
    preTags[i].innerHTML = '<code>'+preTags[i].innerHTML+'</code>'; // wrap content of pre tag in code tag
  }
  hljs.highlightAll(); // apply highlighting
</script>

Suppose we want to highlight the latex code block in the posts, we only need to search the necessary JS file from the libraries of highlight.js, and add it to the above script in themes/hugo-ivy/layouts/partials/head_highlightjs.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/latex.min.js"></script>

Todo