Web Development

Following my previous article on how to build a static personal website, today I’m bringing you another technical guide: how to resolve theme conflicts when adding math formula support to a personal website. First off, Hugo’s official documentation already explains how to implement math rendering very clearly. You can find their official guide here. Since their documentation is highly detailed and covers configuration code for various file formats, I won’t repeat their steps here (though if anyone needs a Chinese breakdown, I can write one later). I will jump straight into my own troubleshooting process.

1. Centering Content First, navigate to the .../layouts/shortcodes folder and create a new file named center.html. If the layouts folder doesn’t exist at your root, create one yourself. Do not look for this under the PaperMod theme directory; create it in your own project root. Then paste in the following code and save: <div style="margin: 0 auto; width: fit-content; min-width: 10%; overflow-x: auto;"> {{ .Inner }} </div> ```markdown When calling it later, use this format before rendering: ```markdown {{% center %}} | Top | Bottom | Left | Right | | :---: | :---: | :---: | :---: | | 54.79% | 53.76% | 53.91% | 52.43% | {{% /center %}} {{% center %}} **Table 1.** Variance Explained by 5 Principal Components {{% /center %}} After rendering:

As the title suggests, the purpose of this article is to share the technologies and solutions used in the process of creating and deploying this website, providing a straightforward guide for anyone looking to replicate it. At the same time, this article serves as a personal retrospective on some technologies I’ve learned but haven’t fully grasped, helping me optimize my own workflow. I am not a computer science major, but I did pick up some programming basics during high school and college. So, if I can do it, anyone should be able to.