The previous blog was always generated using pelican. Recently, I want to switch to hugo for a try. Here, the author lists some minor issues for pure record.

Embed artalk comments in the blog and configure artalk’s adaptive night mode

Artalk itself provides the Artalk.setDarkMode interface, enabling it to monitor the relevant memory segments of the page and adaptively make light and dark color changes. But actually, there is a problem here. Some themes come with buttons for switching between day and night modes. But when switching, the actual value of the memory monitored by artalk doesn’t change. Here is a modification reference:

1
2
3

window.addEventListener("onColorSchemeChange", (e) => {
  Artalk.setDarkMode(document.documentElement.dataset.scheme == "dark");
});

You need to insert this snippet into the script of the artalk comment’s shortcode. Actually, regarding this modification, I also made several versions before barely synchronizing the colors. As a layman in front-end, modifying others’ front-end projects is really a headache. For this, you can refer to the following posts for more:

• Practice of Automatic Following and Manual Switching of Dark Mode Adaptation for Web
• artalk Source Code Reference

Add build action: deploy on commit in gitea

TODO

Add more templates

Create a new template leetcode.md in the archetypes directory for the convenience of generating series articles directly using the template later.

1
2
3
4
5
6

ls -la archetypes/
total 16
drwxr-xr-x  2 fan users 4096 Nov 19 03:26.
drwxr-xr-x 14 fan users 4096 Nov 19 01:49..
-rw-r--r--  1 fan users  102 Nov 12 10:04 default.md
-rw-r--r--  1 fan users  271 Nov 19 03:19 leetcode.md

The content of the leetcode.md file can be as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

---
title:
description:
image: "https://xxxxx.png"
slug: "{{.File.ContentBaseName }}"
date: '{{.Date }}'
categories:
    - leetcode
tags:
    - "leetcode"
    -
    -
series: LeetCode Solution Series
math: true
draft: true
---

At this time, you can use the following command to create a new series article:

1

hugo new -k leetcode  coding/leetcode/1887.md

Hugo mod configuration

This article refers to:

• Module Management of Hugo

First, run the following command in the site project directory to generate the go.mod file

1

    hugo mod init blog

Then, modify the hugo.toml file and add the mod you need to import. The example is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

[module]
  # uncomment the line below for temporary local development of the module
  # replacements = "github.com/google/docsy -> ../../docsy"
  [module.hugoVersion]
    extended = true
    min = "0.110.0"
  [[module.imports]]
    path = "github.com/google/docsy"
    disable = false
  [[module.imports]]
    path = "github.com/google/docsy/dependencies"
    disable = false

Finally, execute the following command to establish the dependency relationship:

1

    hugo mod tidy

After establishing the relationship, we can use the code of mod in markdown. If you need to update the dependency, you need to modify hugo.toml first, and then execute the following command.

1

    hugo mod get

Blog renewal

Fell in love with a modified theme hugo-themes-stacked, but since I am also using a self-modified version, I don’t really want to change this place for the moment. Maybe I can spare some time for a complete adaptation later.

The migration has been completed at present.

Reference: [1]. https://go.opensl.life/N3oNd

Some useless knowledge points

When writing shortcode, we often see some {{- with $page -}}... {{end}} similar with:end tags. The purpose is to set the context within this statement as .

Those dramatic bugs of Hugo

How to obtain the current file path in a multilingual project? For this function, currently, there is no variable provided by Hugo that can be directly obtained. I used the following method for concatenation:

1
2
3

{{ $base := $.Page.File.Dir }}
{{ $file :=.Get 0 }}
{{ $fullpath := (path.Join "content".Site.Language.Lang  $base $file) }}

We may see in some places that they will directly use the following method to obtain:

1
2
3

{{ $base := $.Page.File.Dir }}
{{ $file :=.Get 0 }}
{{ $fullpath := (path.Join $base $file) }}

But this address is actually not suitable for the file structure with multiple languages. Even more strangely, if the correct file is not found in this place, it will traverse the entire content for fuzzy matching without reporting an error. It’s really the strangest implementation I’ve ever seen. The method I gave is only valid when your article file structure and configuration are in the following way. You need to configure it according to your own config.

Articles are placed as follows:

1
2
3
4
5

- content
  - en
      + posts
  - zh-cn
      + posts

Configuration is as follows:

1
2
3
4
5
6
7

languages:
  en:
    languageName: English
    contentDir: content/en-us
  zh-cn:
    languageName: Chinese
    contentDir: content/zh-cn

Those deprecated features of Hugo

1
2

{{ $jsonData := resources.Get "path/to/your/json/file.json" }}
{{ $unmarshaledData := $jsonData | transform.Unmarshal }}

1
2

{{ $jsonData := resources.GetRemote "https://example.com/your/json/data.json" }}
{{ $unmarshaledData := $jsonData | transform.Unmarshal }}

It’s so difficult to modify the style

In the AI card above, the width of the initially generated codeblock exceeded the card itself, and there was also a lang tag in the upper right corner, which was very unfavorable for reading. I wanted to modify these places, but I don’t understand front-end very well. So I asked AI and got the following results:

1
2
3
4
5
6
7
8
9

.pe-ai-content {
  max-width: 800px; /* Set the maximum width of the outer container */
  margin: 0 auto; /* Center it in the page */
}

.codeblock {
  max-width: 100%; /* Ensure the maximum width of the code block does not exceed the parent container */
  overflow: auto; /* Display a scroll bar when the content exceeds */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.pe-ai-content {
  display: table;
  width: 100%;
}

.codeblock {
  display: table-cell;
  width: auto;
  max-width: 100%;
}

1
2
3
4
5
6
7
8
9

.pe-ai-content {
  display: flex;
  flex-wrap: wrap;
}

.codeblock {
  flex: 1;
  max-width: 100%;
}

After making random modifications, the effect became more and more chaotic. With my shallow understanding, there might be an error in the size relationship between the two nested divs. I opened the element inspector with the Chrome browser and saw that some of the styles I set were marked as invalid strikethrough. Suddenly, I realized that it must be a conflict with styles in other places. After analyzing, I defined the styles of the inner div element separately in the styles of the outer div, and the styles took effect.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

 .pe-ai-text {
    font-size: 1.6rem;

   .codeblock,
   .gallery,
   .video-wrapper,
   .table-wrapper,
   .s_video_simple {
        margin-left: -8px;
        margin-right: -8px;
        width: calc(var(--outer-width) * 0.9);
       .code-lang {
          display: none;
        }
    }
  }

As above, you only need to define some attributes of codeblock within the outer div pe-ai-text to override the global attributes of codeblock. You can see that I also overrode the display attribute of code-lang at the same time.

Strange Phenomena When Nesting Hugo Shortcodes

This article refers to: https://go.opensl.life/B1jzb

When I nested shortcodes, the generated page always had redundant Unescaped html ele. Some previous tutorials taught me to use the <code>{{\%\%}}</code> method to nest shortcodes. But after reading the explanation of another blogger, I understood that it was because Hugo treated part of the web content as code for parsing, which led to errors. The solution is simple:

1. Use the <code>&#123;&#123;&lt;&gt;&#125;&#125;</code> method for the call of the outer layer of the nesting.
2. Cancel the indentation at {{.Inner }} in the shortcode definition to avoid Markdown treating it as a code block.