Looking back at the historical commit records, the site has switched themes many times. Each time a theme is switched, there are some custom modifications. Here’s a record of the思路 for customizing themes. The author’s Github also has a repository where they briefly maintained the even theme. Later, due to obsessive-compulsive tendencies and a desire to upgrade the hugo compiler to the latest version, it became incompatible with the even theme, so they switched back to the stack theme.

Hugo’s modularity

When it comes to modularity, people might think of Nginx modules or IDEA plugins, etc. Typically, I can satisfy my differentiated needs by uploading some modules. The reason everyone likes this kind of module is mainly because it’s flexible enough and can meet their own needs without too much effort. Because often, although they are generally similar, there are always some differences in the details. This also illustrates the complexity of software, which includes not only technical complexity but also business complexity. In most cases, we face business complexity. This is the best explanation for the saying “different industries are like different mountains” in the software field. Nowadays, not only the internet industry and financial industry, but even traditional manufacturing has adopted information systems to help with corporate production and management. Even for a leave application system, there will be differences between companies, even within the same industry.

Hugo’s modules are a bit different from what people typically think of as modules; they aren’t organized around functionality to meet diverse needs. Instead, they primarily rely on directory structure to identify common structures.

Link to materials: 07. Hugo Architecture — Hugo’s Modules

[[imports]]
path = "github.com/CaiJimmy/hugo-theme-stack/v3"

The git submodule method still works, but this article does not recommend using it. If there are updates to the introduced theme, maintenance will be more complicated, requiring a separate git repository to manage the theme.

Modifying Theme Logic

With a foundational understanding of modularity, understanding custom themes becomes much easier. The current themes in hugo are also assembled from multiple different modules; to modify one, simply locate the corresponding template file and make changes.

Quoted from the stack official documentation:

Using this method, there won’t be any file under themes directory. In order to modify the theme, you will have to copy the file you want to modify to the same directory under layouts directory.

For example, in order to modify the themes/hugo-theme-stack/layouts/partials/head/custom.html file, you will have to copy it to layouts/partials/head/custom.html and modify it there (copy the code from theme’s repository). The same applies to assets and static directories。

How to find the template file

Orthodox thinking

Browse the theme’s source files, understand the design concept, find the corresponding template file, and make modifications

Brute force approach

I’m not very familiar with front-end code, so sometimes I use a crude approach. For example, I open the corresponding page directly in the browser, find the place I want to modify, locate the css name using “Inspect Element,” search for it in the theme source code, find the corresponding file, copy it to the site directory, and then make the changes.

Little tips

The official default provides a file for customizing styles, and we can split the places that need to be modified into multiple files, introducing our other files through the custom.scss file, which allows for better management of style files

Summary of revisions (6h)

It’s already the first year of AI coding. I won’t go into detailed content here, but just briefly list some modifications to this site, such as adjusting the style of the copy button and reconfiguring the code block styles – ChatGPT can easily handle these tasks.

• Overall: Global text style, inheriting the display style of the previous even merged with info cn, friendly to Chinese
• Homepage: Add mouse interaction animation to the right navigation
• Homepage: Articles now have abstract previews (implemented with a somewhat expedient method due to the time it took)
• Scroll bar: I’ve styled the scroll bar
• The code block introduces the highlight.js code highlighting plugin and beautifies the style of the code blocks
• Article details: Some content is reproduced, with added display of original author information and original link
• Archive page: Remove the theme’s color overlay and display the original image for the category picture at the top
• The archive page now features a statistics display panel categorized by year
• Archive page: Two-column layout

The component reusability of the stack theme is high, which also led to significant time consumption when adding summary previews for homepage articles. After modifying the corresponding components, changes occurred on the article details page, resulting in duplicate content being displayed. I’m not very familiar with golang template syntax, so it took a considerable amount of time. I couldn’t resolve parameter passing between components, and ultimately, I used a workaround: introducing a separate JavaScript script for the homepage and implementing summary previews through custom special variables.

Sometimes, excessive code reuse can also be a problem, leading to changes in one area affecting others. Therefore, when modifying the theme, it is important to pay attention and avoid disrupting the original logic.

Comments section

This guy’s modifications are more complete: [https://blog.reincarnatey.net/2024/0719-better-waline/]

This site simply enables the Waline comment system. The stack theme natively supports Waline, just configure it in config.toml.

Recommended homepage, email contact. This site does not open its comment section.