关于Hugo、Stack的一些特殊功能

在Hugo框架和Stack主题中有一些特殊的功能，写下来防止自己忘记了。

插入HTML内容

像插入一些音频、视频或者高级字体样式等内容，往往就需要用到HTML语法，又因Hugo使用的Markdown解析器Goldmark默认不解析文章中的HTML内容，所以想要在文章中插入HTML内容有以下方法：

使用简码

Hugo会从以下目录中依次读取简码（Shortcodes）。

1
2


layouts/partials/<简码名称>.html
themes/<主题名>/layouts/partials/<简码名称>.html

任选其中一个位置编写自己的HTML模版，并在文章中使用【{{<简码名称参数>}}】的格式，将模版插入到文本当中。

允许HTML解析

添加以下内容到Hugo的[config.toml]文件当中，即可让Goldmark解析HTML内容（被Goldmark视为不安全）。

1
2


[markup.goldmark.renderer]
unsafe = true

插入视频

Stack主题提供了一些视频平台的插入简码，可以直接使用。或者允许HTML内容解析，直接使用平台的HTML代码来插入视频。

YouTube视频插入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{{< youtube Zgsgm29s9F0 >}}
或
<div class="video-wrapper"> 
	<iframe 
		src="https://www.youtube.com/embed/Zgsgm29s9F0" 
		title="YouTube video player" 
		frameborder="0" 
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
		allowfullscreen
	></iframe>
</div> 

效果如下：

Bilibili视频插入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{< bilibili BV1m34y1e7yK >}}
或
<div class="video-wrapper"> 
	<iframe 
		src="//player.bilibili.com/player.html?aid=811054255&bvid=BV1m34y1e7yK&cid=586089897&page=1" 
		scrolling="no" 
		border="0" 
		frameborder="no" 
		framespacing="0" 
		allowfullscreen="true"
	></iframe>
</div> 

效果如下：

链接页

在博客前页（Front-matter）上添加以下配置，即可在文章底部生成链接页。

1
2
3
4
5


links:
  - title: GitHub
    description: GitHub is the world's largest software development platform.
    website: https://github.com
    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png