在 Hugo 博客上实践 Shortcodes 短代码, 太强大了

1
2
3
4
5


<!-- ./layouts/shortcodes/mark.html 
https://matnoble.me/posts/shortcodes-practice-tutorial-for-hugo/#mark-标记支持
-->

<mark>{{ .Get "text" }}</mark>

abbr 缩写支持

1

{{< abbr title="Huazhong University of Science and Technology" text="HUST" >}}

HUST

实现方法也很简单, 只需创建 abbr.html

1
2
3
4
5


<!-- ./layouts/shortcodes/abbr.html 
https://matnoble.me/posts/shortcodes-practice-tutorial-for-hugo/#abbr-缩写支持
-->

<abbr title="{{ .Get "title" }}">{{ .Get "text" }}</abbr>

维基百科 Wikipedia

借鉴自GitHub, 举个栗子:

1

{{< wp tag="Wikipedia:历史上的今天" lang="zh" title="历史上的今天" >}}

历史上的今天

blockquote

借鉴自GitHub, 举个栗子:

1
2
3
4
5
6


{{< blockquote author="李健" link="https://baike.baidu.com/item/%E6%87%82%E5%BE%97/22699721" title="《懂得》" >}}
花开花谢 白天黑夜<br />
一切自然 又不尽然<br />
春夏秋冬 经过才懂<br />
世间冷暖 无非自然
{{< /blockquote >}}

花开花谢白天黑夜
一切自然又不尽然
春夏秋冬经过才懂
世间冷暖无非自然

李健《懂得》

image with caption

1

{{< imgcap src="https://ttfou.com/images/2020/02/20/75294917c54568d991f5e2e0581dafb8.jpg" title="陪安东尼度过漫长岁月" >}}

◎ 陪安东尼度过漫长岁月

实现稍复杂一些, 依旧建立 imgcap.html

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


<!--
./layouts/shortcodes/imgcap.html
https://matnoble.me/posts/shortcodes-practice-tutorial-for-hugo/#image-with-caption
-->

<span class="caption-wrapper">
  <img class="caption" src="{{ .Get "src" }}"
       title="{{ .Get "title" }}"
       alt="{{ if .Get "alt" }}{{ .Get "alt" }}{{ else }}{{ .Get "title" }}{{ end }}"
       width="{{ if .Get "width" }}{{ .Get "width" }}{{ else }}95%{{ end }}"
       >
  <span class="caption">◎ {{ .Get "title" }}</span>
</span>

其中, src 和 title 为必填项, alt 和 width 为选填项, alt 默认与 title 保持一致, width 默认值为: 95% .

Hugo-notice

This is not a standalone theme. It is a Hugo theme component providing a shortcode: notice to display nice notices. Four notice types are provided: warning, info, note and tip.

martignoni hugo-notice

hugo-notice 是一个制作十分精美的短代码, 非常感谢原作者的付出, 但使用并不需要把他的仓库 copy 到本地, 只需将 notice.html copy 到 ./layouts/shortcodes/ 下, 如需要翻译, 且使用 MemE 主题, 只需要在根目录下创建 ./i18n/zh-cn.toml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


[warning]
other = "警告"

[note]
other = "注释"

[info]
other = "引言"

[tip]
other = "小贴示"

显示效果如下:

Warning

1
2
3


{{< notice warning >}}
这是告诫! 请注意!
{{< /notice >}}

Ｗarning

这是告诫! 请注意!

Info

1
2
3


{{< notice info >}}
这是引言
{{< /notice >}}

Info

这是引言

Tip

1
2
3


{{< notice tip >}}
这是小贴示
{{< /notice >}}

Tips

这是小贴示

Note

1
2
3


{{< notice note >}}
这是注释
{{< /notice >}}

Note

这是注释

音乐 Music

基于 MetingJS 制作 ./layouts/shortcodes/music.html

{{< music id="569200212" type="song" server="netease" >}}

option	default	description
id	require	song id / playlist id / album id / search keyword
server	require	music platform: netease, tencent, kugou, xiami, baidu
type	require	song, playlist, album, search, artist

更多选项看这里

显示效果:

Ｗarning

该 shortcodes 存在问题! 会导致 TOC 目录点击失效, 所以, 暂时只能将音乐放到没有目录的页面 👇

视频 Video

YouTube

原生支持 YouTube, 代码如下

1

{{< youtube ID >}}

B 站

优酷 YOUKU

还可以创建./layouts/shortcodes/youku.html 使其支持 YOUKU

1

{{< youku id="ID" >}}

GitHub gist

原生支持, 添加 GitHub gist

1

{{< gist MatNoble b8d6a9541221fef7c30bf214d3505836 >}}

很多博客都支持添加 友链, 本博客也不例外, 在这里借鉴自 hugo-friendlinks, 针对本主题, 稍加修改.

1

{{< friend name="数学小兵儿" url="https://matnoble.me/" logo="/icons/android-chrome-512x512.png" word="数学＆计算机 我都爱" >}}

数学小兵儿
数学＆计算机我都爱

提供下载 download

以上所有 shortcodes 代码都可以访问以下 GitHub 链接下载, 欢迎发现问题的同学提交Issues!

These are shortcodes that I have created for the Hugo static blogging engine.

数学小兵儿 hugo shortcodes sets

在 Hugo 博客上实践 Shortcodes 短代码, 太强大了

相关文章：