本文主要是介绍003 - Hugo, 创建文章，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
- 003 - Hugo, 创建文章
- 创建文章
- 单个md文件
- md文件+图片
- 总结
- 文章内容
- Front Matter
- 文章目录
- 数学公式的显示
- KaTeX
- MathJax
- 图片
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
官方操作步骤
- To enable KaTex globally set the parameter
mathtotruein a project’s configuration
（首先要把config.yaml文件里，article的math设为true）
article:math: truetoc: truereadingTime: truelicense:enabled: truedefault: Licensed under CC BY-NC-SA 4.0
-
To enable KaTex on a per page basis include the parameter
math: truein content files
（然后在写需要显示数学公式的文章时，文章属性的math也要设为true） -
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>- 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
这篇关于003 - Hugo, 创建文章的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
