Adding a code copy button for seemingly simple things

Spent four hours on this, and when I saw the sentence, it was hilarious. How could it have taken so long? Finally looked at the time: three hours.

This was the first draft of the year 2022, and it wasn’t complicated – exactly as the title said. (At that time, I was still quite young), I thought simply copying 作业 would be enough, putting it in my favorites folder, and letting it sit for over a month before finally remembering the task.

When migrating to hugo, I always felt that the plugins were too few, couldn’t copy code, which made copying notes from Evernote to the blog very cumbersome, seriously hindering my motivation for writing a casual blog.

Foreword

First, carefully read the original author’s draft, read it through completely and flip through their introduction. Wow, I ran into a big shot – Tsinghua University undergraduate, has been exposed to computers since early on, huh? Just a facade, let’s take a look at this blog first, completely forgot what he was supposed to do. Also, check out the author’s Github repository; this modified ‘even’ theme is much prettier than now and has more features, let’s get started, merge the relevant code into it.

New Features: View Article History, Associate Submission Records

The effect is still good, and you can experience it by dragging it to the end of the article.

Before taking action, I didn’t carefully examine the author’s original repository history, assuming a simple merge would fix everything. Ultimately, I merged a huge amount of code with numerous conflicts and N times of manual overrides – all of which were frontend and rendering template code, using the one that matched my requirements.

Repository Address: https://github.com/TianlongXiang/hugo-theme-even

A Chinese pitfall: if git doesn’t adjust this parameter, it will cause the generated link to not be able to obtain the current article’s commit hash, resulting in history link generation failure. When generating the complete historical record of the article, you also need to modify the automatic integration script and remember to pull the entire historical record of the current repository.

name: Build Github
run: git config --global core.quotePath false && hugo -b "https://www.xiangtianlong.com/" -d "github_public" && ls

Style Adjustments

Adjust website content width, the previous design was suitable for both mobile and desktop devices; in reality, no one actually viewed it on their phones, and I personally view it on my computer.
The directory bar should support automatic expansion/contraction.

Body

Referenced ouuan’s code records for half an hour or so, and still couldn’t quite understand how to increase the copy button.

Time travel, a month later, it came back to this matter again

Text

Since I didn’t understand this assignment, I switched to copying from another source – it was definitely easier to grasp. The results of my search were surprisingly helpful; a forum post on the official hugo website detailed how to add a copy button. After checking it out, I realized that the code block styles generated by even differed from the descriptions in the documentation – this part was quite complicated. So, I’m just going to record this for reference.

Because I don’t really understand front-end development, when I encounter something I don’t get, I open my browser’s “Inspect” tool and analyze the code alongside the style information on the right; I use JavaScript logs to help me understand the logic. There were many things I didn’t understand at first. Taking a deep breath and carefully breaking down the logic helped me find a solution eventually.

The <pre> nodes are multiple, this refers to a single code block. The theme itself rendered line numbers, which resulted in the copy button appearing twice.
I wanted to disable the theme’s built-in code highlighting; unfortunately, I wasn’t familiar with the settings for this theme.
I consulted the hugo website and read some documentation – it was a bit confusing at first, but I learned that the markup setting could control code highlighting.
I adjusted the configuration file, but it didn’t work; the rendered output differed from my expectations.
I discovered this bunch of settings called pygmentsOptions, so I continued to consult documentation and adjust the settings, first removing the line numbers.
I configured a custom CSS stylesheet and a custom JavaScript script.
Since I’d already done so much, my brain suddenly remembered seeing a nice color palette recently, so I modified the button styles: Let’s go with the traditional Chinese sky blue!

I spent four hours on this, and when I saw that sentence, I even found it funny – how could it take so long? Finally, I looked at the time: It was only three hours.