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.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

  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。

相关文章

Spring创建Bean的八种主要方式详解

Spring创建Bean的八种主要方式详解

《Spring创建Bean的八种主要方式详解》Spring（尤其是SpringBoot）提供了多种方式来让容器创建和管理Bean,@Component、@Configuration+@Bean、@En... 目录引言一、Spring 创建 Bean 的 8 种主要方式1. @Component 及其衍生注解
阅读更多...
MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

《MySQL数据库表操作完全指南:创建、读取、更新与删除实战》本文系统讲解MySQL表的增删查改（CURD）操作,涵盖创建、更新、查询、删除及插入查询结果,也是贯穿各类项目开发全流程的基础数据交互原... 目录mysql系列前言一、Create(创建)并插入数据1.1 单行数据 + 全列插入1.2 多行数据
阅读更多...
MySQL 临时表创建与使用详细说明

MySQL 临时表创建与使用详细说明

《MySQL临时表创建与使用详细说明》MySQL临时表是存储在内存或磁盘的临时数据表,会话结束时自动销毁,适合存储中间计算结果或临时数据集,其名称以#开头（如#TempTable）,本文给大家介绍M... 目录mysql 临时表详细说明1.定义2.核心特性3.创建与使用4.典型应用场景5.生命周期管理6.注
阅读更多...
MySQL的触发器全解析(创建、查看触发器)

MySQL的触发器全解析(创建、查看触发器)

《MySQL的触发器全解析(创建、查看触发器)》MySQL触发器是与表关联的存储程序,当INSERT/UPDATE/DELETE事件发生时自动执行,用于维护数据一致性、日志记录和校验,优点包括自动执行... 目录触发器的概念：创建触www.chinasem.cn发器：查看触发器：查看当前数据库的所有触发器的定
阅读更多...
创建springBoot模块没有目录结构的解决方案

创建springBoot模块没有目录结构的解决方案

《创建springBoot模块没有目录结构的解决方案》2023版IntelliJIDEA创建模块时可能出现目录结构识别错误,导致文件显示异常,解决方法为选择模块后点击确认,重新校准项目结构设置,确保源... 目录创建spChina编程ringBoot模块没有目录结构解决方案总结创建springBoot模块没有目录
阅读更多...
Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建
阅读更多...
IntelliJ IDEA2025创建SpringBoot项目的实现步骤

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.
阅读更多...
Linux线程之线程的创建、属性、回收、退出、取消方式

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识：线程号唯一、创建方式、属性设置（如分离状态与栈大小）、回收机制（join/detach）、退出方法（返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.
阅读更多...
创建Java keystore文件的完整指南及详细步骤

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键（私钥）的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与
阅读更多...
python如何创建等差数列

python如何创建等差数列

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

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2