003 - Hugo, 创建文章

创建文章

单个md文件

创建文章的方式：

• 手动创建：在post目录下，手动创建md文件。
• 命令创建：hugo new post/*.md

单个md文件的创建，md文件的命名是随意的，web上显示的与文章的title属性有关，而与文件名无关。

md文件+图片

创建文章的方式：

• 手动创建：在post目录下，手动创建一个文件夹，在文件夹里创建md文件，并将需要的图片资源放入其中。
• 命令创建：hugo new post/foldername/*.md会自动创建文件夹和md文件。

md文件+图片的组合，文件夹的名称是随意命名的，但文件夹里md文件的命名，必须为index.md或index.zh-cn.md否则图片资源可能在打包上传时会消失。

总结

萝卜青菜各有所爱，但命令创建有一个优点就是可以在archetypes\default.md里设置创建出来md文件的Front Matter从而不用每次都重复写。

文章内容

Front Matter

可以理解为文章的属性，Markdown语法为

---
# 文章标题
title: 0x03 Hugo创建文章详解
# 文章副标题 文章的描述
description: 本文记录创建文章的规范和一些细节。
# 文章的部分url https://jacket-mouse.github.io/p/Hugo-article
slug: Hugo-article
# 创建日期
date: 2024-01-23
# 文章分类
categories:- Blog
# 文章标签
tags = ["emoji","happy new year"
]
# 文章封面图
image = "*.jpg"
# 如果md里有latex公式语法，需要设为true
math: true
---

文章目录

根据stack主题，目录是从二级标题开始的。即：一级标题和二级标题同级，从三级标题开始，依次降级，直到四级。所以，在书写标题时，为了目录的规整，从二级标题开始书写，一级和五级及以上标题不太用。

另外：

• 记录之前用了一次五级标题，导致目录的高光跟随不见了。

数学公式的显示

Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.

KaTeX

创建Hugo时，默认给的是KaTeX来渲染数学公式，正如其官网所介绍的一样，KaTeX的速度比MathJax快（有个比较它们之间速度的网站），但是根据我的第一篇数学笔记的效果来看，KaTeX有很多LaTeX语法并不能正确的渲染

• \displaylines{}
• begin{cases}
• 可能还有其他的，但我并没有一一尝试，也有可能是我配置没弄好，那样属实有点尴尬

Note:
Use the online reference of Supported TeX Functions

官方操作步骤

1. To enable KaTex globally set the parameter math to true in a project’s configuration
   （首先要把config.yaml文件里，article的math设为true）

article:math: truetoc: truereadingTime: truelicense:enabled: truedefault: Licensed under CC BY-NC-SA 4.0

2. To enable KaTex on a per page basis include the parameter math: true in content files
   （然后在写需要显示数学公式的文章时，文章属性的math也要设为true）

3. Create a partial under /layouts/partials/math.html
   （Within this partial reference the Auto-render Extension or host these scripts locally.）

<!--内容来自Auto-render Extension-->
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV"crossorigin="anonymous"
/>
<scriptdefersrc="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8"crossorigin="anonymous"
></script>
<scriptdefersrc="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"crossorigin="anonymous"
></script>
<script>document.addEventListener("DOMContentLoaded", function () {renderMathInElement(document.body, {// customised options// • auto-render specific keys, e.g.:delimiters: [//此处可自定义修改//If you want to add support for inline math via `$...$`, be sure to list it after `$$`, as in the following. (Because rules are processed in order, putting a `$` rule first would catch `$$` as an empty math expression.){ left: "$$", right: "$$", display: true },{ left: "$", right: "$", display: false },{ left: "\\(", right: "\\)", display: false },{ left: "\\[", right: "\\]", display: true },],// • rendering keys, e.g.:throwOnError: false,});});
</script>

4. Include the partial in your templates like so:
   在\themes\hugo-theme-stack\layouts\partials\head\head.html里加上下面的内容

// {{- template "_internal/google_analytics.html" . -}} 
// {{- partial "head/custom.html" . -}}
//下面是要加的内容
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

参考：latex实现及hugo

MathJax

我现在就用的是这个，除了一些转义问题，并没有遇到其他的问题。

配置操作

只有math.html的内容和KaTeX有所不同。

<scripttype="text/javascript"asyncsrc="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
>MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],displayMath: [['$$','$$'], ['\[\[','\]\]']],processEscapes: true,processEnvironments: true,skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],TeX: { equationNumbers: { autoNumber: "AMS" },extensions: ["AMSmath.js", "AMSsymbols.js"] }}});MathJax.Hub.Queue(function() {// Fix <code> tags after MathJax finishes running. This is a// hack to overcome a shortcoming of Markdown. Discussion at// https://github.com/mojombo/jekyll/issues/199var all = MathJax.Hub.getAllJax(), i;for(i = 0; i < all.length; i += 1) {all[i].SourceElement().parentNode.className += ' has-jax';}});
</script><style>code.has-jax {font: inherit;font-size: 100%;background: inherit;border: inherit;color: #515151;}
</style>

转义问题

• 换行

$$\displaylines{
z_{min}=ax+by \\
\begin{cases}  
a_1x+b_1y \le c_1 \\
a_2x+b_2y \le c_2 \\
a_3x+b_3y \le c_3 
\end{cases}}
$$

显示效果：
KaTeX parse error: Undefined control sequence: \displaylines at position 1: \̲d̲i̲s̲p̲l̲a̲y̲l̲i̲n̲e̲s̲{ z_{min}=ax+by…

$$\displaylines{
z_{min}=ax+by \\\\
\begin{cases}  
a_1x+b_1y \le c_1 \\\\
a_2x+b_2y \le c_2 \\\\
a_3x+b_3y \le c_3 
\end{cases}}
$$

显示效果：
KaTeX parse error: Undefined control sequence: \displaylines at position 1: \̲d̲i̲s̲p̲l̲a̲y̲l̲i̲n̲e̲s̲{ z_{min}=ax+by…

图片

支持Typlog语法排版。
详见： 『 Hugo 』Typlog Atlas