博客搭建-3.Hugo, 创建文章

17 Feb 2024

创建文章

单个 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 math to true in a project’s configuration （首先要把config.yaml文件里，article的math设为true）

article:
  math: true
  toc: true
  readingTime: true
  license:
    enabled: true
    default: Licensed under CC BY-NC-SA 4.0

To enable KaTex on a per page basis include the parameter math: true in 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-->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
  integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV"
  crossorigin="anonymous"
/>
<script
  defer
  src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"
  integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8"
  crossorigin="anonymous"
></script>
<script
  defer
  src="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里加上下面的内容

//////下面是要加的内容

参考：latex 实现及 hugo

MathJax

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

配置操作

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

<script
  type="text/javascript"
  async
  src="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/199
      var 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}}
$$

显示效果：

\[\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}}\]

$$\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}}
$$

显示效果：

\[\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}}\]

图片

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

Good in study, attitude and health

Archive

About

RSS