继上一篇关于如何搭建个人静态网站的文章后，这次给各位带来新的技术分享内容，也就是个人网站插入数学公式与主题冲突的解决方案。 首先，关于如何在个人网页中加入数学公式渲染的功能，Hugo官方已经把这个问题解释的十分清楚了。在这里可以看到他们的回答。由于官方的描述非常详尽，且涵盖了不同config文件类型的代码，我就不重复他们所指示的步骤（但如果需要我用中文进行描述，那我会再回来把那些步骤给分享过来的）直接跳转到我的个人排错。 我遇到的问题主要是因为我已经为自己安装了PaperMod的主题，且我的Config中并没有以官方所使用的"goldmark"作为我的render，导致我使用该技术的时候出现了断层。如果你也遇到了这样的问题，不妨试试和我一样解决。 首先，官方教程要求你在layout文件夹中的_default和partials里，分别对baseof.html的header部分进行修改和创建新的math.html文件。但当我这么做的时候，PaperMod出现了不兼容问题。我所收到的报错如下： Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory) (commit or discard the untracked or modified content in submodules) modified: themes/PaperMod (modified content, untracked content) 那么该如何解决呢？我们可以在自己的网页项目根目录中找到比theme更上一层的文件夹layouts。这个layout中我们所加入的设置，会以比theme中layout里设置更高优先级的形式，在网页部署和render时被采纳。因此，你所加入的新文件和更改都可以在不破坏PaperMod或者其它你所安装的主题的情况下被加载，也就是override。 确保你的文件夹的结构和下图逻辑一致： 这之后，检查你的config文件。以toml格式为例，我把整个goldmark的设置都加入到了其中以保证我的设置能成功覆盖原设置。下列代码中有批注的地方是你需要格外注意的设置（非toml代码的格式也可以参考类似修改逻辑，只需轻微调整表达方式。Goldmark相关的技术文档请看这里。）： [markup] defaultMarkdownHandler = 'goldmark' #在这里确保goldmark为默认markdown渲染器 [markup.goldmark] duplicateResourceFiles = false [markup.goldmark.extensions] definitionList = true linkify = true linkifyProtocol = "https" strikethrough = true table = true taskList = true [markup.goldmark.extensions.cjk] eastAsianLineBreaks = false eastAsianLineBreaksStyle = "simple" enable = false escapedSpace = false [markup.goldmark.extensions.extras] [markup.goldmark.extensions.extras.delete] enable = false [markup.goldmark.extensions.extras.insert] enable = false [markup.goldmark.extensions.extras.mark] enable = false [markup.goldmark.extensions.extras.subscript] enable = false [markup.goldmark.extensions.extras.superscript] enable = false [markup.goldmark.extensions.footnote] backlinkHTML = "&#x21a9;&#xfe0e;" enable = true enableAutoIDPrefix = false [markup.goldmark.extensions.passthrough] enable = true [markup.goldmark.extensions.passthrough.delimiters] block = [['\[', '\]'], ['$$', '$$']] #这是需要你加入的新表达模块 inline = [['\(', '\)']] #这是需要你加入的新表达模块 [markup.goldmark.extensions.typographer] apostrophe = "&rsquo;" disable = false ellipsis = "&hellip;" emDash = "&mdash;" enDash = "&ndash;" leftAngleQuote = "&laquo;" leftDoubleQuote = "&ldquo;" leftSingleQuote = "&lsquo;" rightAngleQuote = "&raquo;" rightDoubleQuote = "&rdquo;" rightSingleQuote = "&rsquo;" [markup.goldmark.parser] autoDefinitionTermID = false autoHeadingID = true autoIDType = "github" wrapStandAloneImageWithinParagraph = true [markup.goldmark.parser.attribute] block = false title = true [markup.goldmark.renderHooks] [markup.goldmark.renderHooks.image] useEmbedded = "never" [markup.goldmark.renderHooks.link] useEmbedded = "never" [markup.goldmark.renderer] hardWraps = false unsafe = true #防止goldmark误认为latex输入有损害，这里我关闭了安全设置。 xhtml = false [params] math = true #也别忘了添加这个 做完了这些，你应该就可以按规定的语法输入数学公式，并在网页部署时成功被渲染了。如下例：

1. 居中内容 首先去 …/layout/shortcodes 文件夹，新建一个叫"center.html"的文件。如果layout里没有，就自己创建一个。注意：不要去PaperMod的theme里找layout。 然后把这些代码插入进去并保存： <div style="margin: 0 auto; width: fit-content; min-width: 10%; overflow-x: auto;"> {{ .Inner }} </div> 在未来调用时，按照下方的例子调用就可以。渲染前的效果如下： {{% center %}} | Top | Bottom | Left | Right | | :---: | :---: | :---: | :---: | | 54.79% | 53.76% | 53.91% | 52.43% | {{% /center %}} {{% center %}} **Table 1.** Variance Explained by 5 Principal Components {{% /center %}} 渲染后：

如标题所言，本文的目的是分享此网站从创建到部署的流程中所使用的技术以及解决方案，为有同样意愿的朋友提供一条简单直观的复现路径。同时，本文也是对自己所学习但没怎么搞懂的技术的二次审视，方便对自己的工作流进行优化。我本人并非来自于计算机科学专业，但在高中和大学的学习中或多或少的有接触到一些编程的基础。所以如果我可以做到，那任何人应该都可以做到。 搭建个人网站所要实现的技术难度并不高。如果是以成功部署为目的，那么你并不需要完全理解每一个步骤背后的原理是什么，但中途遇到的报错会需要你了解编程语言所做的事情是什么，从而找到问题的根源。 在遇到困难时，我建议善用语言模型来为你提供实时的帮助，它们所拥有的知识可帮助解决许多问题。当然，提问的方式以及判断回答是否可靠的技能也同样重要。这一点，我们会在未来的另一篇文章中一起探讨。 开发平台与工具 我使用运行在MacOS上的VS Code进行代码的编写，所以这里会分享的代码都是能运行在MacOS的Terminal中的。如果你使用的是其它的平台（如Windows）那么少部分代码也许需要修改成你的平台所兼容的语法。 我的个人网站本质上是整合了现有的解决方案并把它们拼凑在一起。能够实现的核心技术是hugo和其平台中的主题PaperMod，并最终用Github和Vercel进行部署。 网站的搭建过程中，我有让Google的语言模型Gemini 2.5来帮助我进行网站的构造。最终遇到的技术问题，也使用了OpenAI的ChatGPT帮助我进行了排错。如果没有它们的帮助，我想这个过程会艰难很多很多吧。 构建个人网站 首先，你需要在Terminal中记录你的Github所关联用户名与邮箱，这样未来就可以把本地写好的内容push到云端以准备部署。 git config --global user.name “你的用户名“ git config --global user.email "your_email@example.com" 接下来需要做的，是安装Hugo。你可以选择进入官网跟着官方的引导一起做，也可以选择在MacOS的Terminal中实现的方式。这里我会介绍第二种方式。 在确保你的环境中存在Homebrew后，请在Terminal中输入： brew install hugo Hugo安装完成后，你需要在设备上建立一个网站的项目。同样输入下列代码： hugo new site my-blog #这里Hugo会建立的文件夹名为“my-blog” cd my-blog #进入文件夹 此时文件夹也会在你的计算机的本地被创建。在MacOS里，默认的创建位置是用户文件夹下。 Hugo 本身只负责生成内容，外观则由主题决定。你可以在 Hugo Themes 官网上寻找喜欢的主题。这里以我的网站也同样使用的PaperMod为例： git init git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod git submodule update --init --recursive 在配置文件 hugo.toml中，可以启用这个主题： baseURL = "https://<你的网址>.io/" #先不管这个 languageCode = "zh-cn" title = "我的博客" theme = "PaperMod" # 告诉 Hugo 使用这个主题 buildFuture = true #允许markdown创建日期在未来，可以避免一些报错的排查 接下来，就可以使用Hugo去写第一篇文章了。