👨🏻‍💻Technology

Customizing Hugo’s 404 Page The default 404 page is just plain text. Today I found an adorable logo collection, ServiceLogos, and casually brought it over. Steps Modify the Nginx configuration Add the following site configuration to Nginx: 1 2 3 4 5 6 7 8 9 10 11 12 # index.html fallback location / { try_files $uri $uri/ =404; } # Custom error pages error_page 404 /404.html; error_page 403 /403.html; location ~ ^/(404|403)\.html$ { root /www/public; internal; } This Nginx configuration consists of several parts, which I will explain one by one below: ...

Installing GUI Serial Tool COMTool on LCKFB TaishanPi The TaishanPi is pretty good indeed, JLC rocks! Steps Follow the steps titled “Install as a Python package” provided by the software and execute them in order: 1 2 sudo apt install git python3-pyqt5 python3-numpy pip install -i https://pypi.tuna.tsinghua.edu.cn/simple comtool pyqt5 is error-prone to install with pip, so install it with the system package manager. Note The default system image of the TaishanPi does not include pip; install it with the following command: ...

Adding a Friend Links Page to Hugo Friend links are a great tool for expanding a blog’s reach. This article explains how to add a friend links page to a Hugo blog. Steps Inline HTML Implementation Configuring the friend links page link is mentioned in config.yml in Building a Personal Blog with Hugo (2), corresponding to the following configuration: 1 2 3 4 - identifier: links name: 🤝Friend Links url: links weight: 60 To keep it simple and easy to modify, it can be implemented with inline HTML. ...

Responsive Image Sizing in Hugo When you insert images in Hugo, their sizes are not adapted automatically, and inconsistent image sizes can hurt readability. This article explains how to configure responsive image sizing. Steps Edit assets/css/extended/blank.css; if the file does not exist, run the following command to copy one in: 1 cp themes/PaperMod/assets/css/extended/blank.css assets/css/extended/blank.css Add the following css code: 1 2 3 4 5 6 7 8 9 10 /* 当用户点击文章内容中的图片时，图片会被放大 */ .post-content img[loading="lazy"]:active { transform: scale(1.382); } /* 使文章中的图片在页面上显示时都具有相同的宽度 */ .post-content img[loading="lazy"] { width: 100%; height: auto; } Run hugo --gc to update the blog.

Hugo Code Block Folding Strictly speaking, it is not folding, it just limits the maximum height of code blocks, though the effect is quite good. Steps All of the following operations are performed in the root directory of the blog site. Control the layout with css First add a code.css to assets/css/extended/code.css, which limits the maximum height of code blocks via css, and can be adjusted according to your own blog layout. ...

Google Play Always Shows Pending Install Items It started appearing one day after I bought the phone, and no matter what I did I could not eliminate the prompt; this finally settles it. Steps Almost every new phone has a Google Play services for AR. Back then I did not know what it was for, so I uninstalled it, and ever since there has been a prompt: 1 Google Play - 管理应用和设备 - 上次更新时间：X 分钟前和 1 个待安装项目 Finally, on V2EX I saw a post Seeking help: when updating apps on Google Play, there are always pending install items with the same situation. ...

ESP32 Development with CLion Since I wasn’t used to VSCode’s half-baked C++ IDE features, I turned to CLion. But CLion in turn faces the problem of having fewer plugins than VSCode, so I ran into issues when developing for the ESP32. Finally, let me stress: if you primarily use VSCode for development, just use the official plugin provided by ESP32 — it’s simple and convenient, no command line required. Steps Actually, there is no need to bother with environment variables or cross-compilation toolchains. I’ve tried them, and they’re useless — they only add unnecessary trouble. ...

CMake Configuration for Dynamically Linking spdlog Compiling spdlog in header-only form greatly increases the binary size, and since I have multiple programs that all use it, I decided to use dynamic linking to save resources. However, after searching around the web I found nothing useful, and finally worked it out through a discussion with ChatGPT. Below is the way to configure CMake to dynamically link spdlog. Steps 1. Write spdlog.cmake First, write a CMake module configuration file spdlog.cmake and put it under ${PROJECT_SOURCE_DIR}/cmake. The file content is as follows: ...

Embedding ICO Icons in Tkinter Although Tkinter is fairly basic, it is still quite convenient when developing some graphical gadgets with Python. Since the native icon is rather plain, a custom icon is generally chosen instead, but then a single-file executable program also has to be shipped with an ICO file to display the icon, which is undoubtedly cumbersome. This article describes how to embed the icon into the executable file. ...