这篇文章分享搭建本博客网站使用的基础框架和主题，以及如何解决公式的渲染问题的经验。

Hugo PaperMod is a theme based on hugo-paper.

The goal of this project is to add more features and customization to the og theme.

hugo-paperMod Example

This repository offers an example site for hugo-PaperMod

Install

Read Wiki => hugo-PaperMod - Installation

Directory Tree

.(site root)
├── configTaxo.yml
├── config.yml
├── content
│   ├── archives.fr.md
│   ├── archives.md
│   ├── posts
│   │   ├── emoji-support.md
│   │   ├── markdown-syntax.fa.md
│   │   ├── markdown-syntax.fr.md
│   │   ├── markdown-syntax.md
│   │   ├── math-typesetting.md
│   │   ├── papermod
│   │   │   ├── _index.md
│   │   │   ├── papermod-faq.md
│   │   │   ├── papermod-features
│   │   │   │   ├── images
│   │   │   │   │   ├── homeinfo.jpg
│   │   │   │   │   ├── profile.jpg
│   │   │   │   │   └── regular.jpg
│   │   │   │   └── index.md
│   │   │   ├── papermod-icons.md
│   │   │   ├── papermod-installation.md
│   │   │   └── papermod-variables.md
│   │   ├── placeholder-text.md
│   │   └── rich-content.md
│   ├── search.fr.md
│   ├── search.md
│   └── tags
├── LICENSE
├── README.md
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   └── papermod-cover.png
└── themes
    └── hugo-PaperMod

support katex

更新 extended_head.html

在 theme/hyde/layouts/partials/extended_head.html 中新增引入katex，具体如下

{{ if .Params.katex}}{{ partial "katex.html" . }}{{ end }}

创建 kaTex.html

创建 katex.html 文件，具体内容如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
    onload="document.addEventListener('DOMContentLoaded', function() { renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '\\(', right: '\\)', display: false}, {left: '$', right: '$', display: false} ] }); });"></script>

新增内容页的参数配置

当我们基于参数 .Params.katex 启用插件时。我们可以在页面的 Front Matter 中设置 katex: true 。

---

title: "How to Add LaTeX Support in Hugo"

...

katex: true

---

Latex 内容

• 不换行写法：这个函数是关于$h_t$的二次方程
• 行换写法：这是单独成一行的公式，$$\frac{1}{2}$$

TIPS: 为了直观展示公式的写法，本文件未开启katex为true。