003 - Hugo, 创建文章

2024-02-18 00:44
文章标签 创建 文章 003 hugo

本文主要是介绍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.mdindex.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文件里,articlemath设为true
article:math: truetoc: truereadingTime: truelicense:enabled: truedefault: Licensed under CC BY-NC-SA 4.0
  1. To enable KaTex on a per page basis include the parameter math: true in content files
    (然后在写需要显示数学公式的文章时,文章属性的math也要设为true

  2. 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>
  1. 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, 创建文章的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/719518

相关文章

python如何创建等差数列

《python如何创建等差数列》:本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

MySQL 用户创建与授权最佳实践

《MySQL用户创建与授权最佳实践》在MySQL中,用户管理和权限控制是数据库安全的重要组成部分,下面详细介绍如何在MySQL中创建用户并授予适当的权限,感兴趣的朋友跟随小编一起看看吧... 目录mysql 用户创建与授权详解一、MySQL用户管理基础1. 用户账户组成2. 查看现有用户二、创建用户1. 基

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可

Java中实现线程的创建和启动的方法

《Java中实现线程的创建和启动的方法》在Java中,实现线程的创建和启动是两个不同但紧密相关的概念,理解为什么要启动线程(调用start()方法)而非直接调用run()方法,是掌握多线程编程的关键,... 目录1. 线程的生命周期2. start() vs run() 的本质区别3. 为什么必须通过 st

Macos创建python虚拟环境的详细步骤教学

《Macos创建python虚拟环境的详细步骤教学》在macOS上创建Python虚拟环境主要通过Python内置的venv模块实现,也可使用第三方工具如virtualenv,下面小编来和大家简单聊聊... 目录一、使用 python 内置 venv 模块(推荐)二、使用 virtualenv(兼容旧版 P

Linux lvm实例之如何创建一个专用于MySQL数据存储的LVM卷组

《Linuxlvm实例之如何创建一个专用于MySQL数据存储的LVM卷组》:本文主要介绍使用Linux创建一个专用于MySQL数据存储的LVM卷组的实例,具有很好的参考价值,希望对大家有所帮助,... 目录在Centos 7上创建卷China编程组并配置mysql数据目录1. 检查现有磁盘2. 创建物理卷3. 创

Java 如何创建和使用ExecutorService

《Java如何创建和使用ExecutorService》ExecutorService是Java中用来管理和执行多线程任务的一种高级工具,可以有效地管理线程的生命周期和任务的执行过程,特别是在需要处... 目录一、什么是ExecutorService?二、ExecutorService的核心功能三、如何创建

使用Python创建一个功能完整的Windows风格计算器程序

《使用Python创建一个功能完整的Windows风格计算器程序》:本文主要介绍如何使用Python和Tkinter创建一个功能完整的Windows风格计算器程序,包括基本运算、高级科学计算(如三... 目录python实现Windows系统计算器程序(含高级功能)1. 使用Tkinter实现基础计算器2.