大多数的静态博客会使用 Markdown 进行写作，因为它的格式简单，但是 Markdown 也有它的不足之处。当我们想要将图片或者视频等加入到文章内容中时，Markdown 本身并不能提供很好的支持，因此不得不将一些 HTML 片段加入到 Markdown 内容中。尽管在一些简单的场景中这样做能够解决问题，但是却破坏了 Markdown 文件的简洁性质。另外如果想对一些内容进行装饰也变得非常麻烦，而且不能起到复用的效果。为此，Hugo 引入了 shortcodes，允许我们在 Markdown 文件中以一种简洁的形式书写 HTML。本文记录了此博客中实现和使用到的一些 shortcodes。
图片
在博客内容中插入图片是一个常见的需求，Markdown 语法本身也支持图片的插入。但是如果要对图像的大小，图像的位置进行修改就需要在 Markdown 文件中直接使用 HTML 进行控制，如果更进一步对图像添加描述，或者使用 CSS 对图像进行修饰就变得比较麻烦，为此本博客中针对图像显示问题实现了多个 shortcodes，用于增强博客的图像显示功能。下面是实现的用于插入图片的 shortcodes 的实际效果：
样式一：
图1. 通过 Hugo shortcode 插入图片，并在图片底部加入图片描述 样式二：
Youtube
为了进一步丰富博客的内容，本博客还添加了对视频的支持，在博客内容中对 Youtube 的视频内容进行嵌入，并支持播放和调转到官方网站进行播放，下面是实际效果：
- Youtube 视频 (由于国内无法直接播放 Youtube 视频，这里采用图片的方式对最终的效果进行了展示)
Podcast / Music
Markdown 本身并不支持对音频的插入，使用 HTML 虽然能够简单的完成音频的插入，但是其显示效果并不美观，并且仅仅支持播放、暂停。为了让博客支持插入播客等音频内容，本博客实现了一个播放器，效果如下:
Hold My Hand
Lady Gaga
豆瓣条目
一直以来比较喜欢豆瓣的标记功能，看完的电影、图书都会去标记一下，在写博客的时候有时候也会引用到其中的一些内容，就想着给博客增加一个豆瓣条目显示的功能，分别对特定的条目以及最近标记的条目进行展示。
要对一条豆瓣条目进行展示首先需要获取到该条目的数据，由于目前官方的 API 已经废弃，前期我使用了一些第三方的 API，通过前端 JavaScript 匹配豆瓣链接，再通过 API 获取数据插入 Dom。然而，第三方的 API 经常失效，目前采用的方式是通过爬虫获取条目数据，并保存为 CSV 文件，通过读取本地数据进行展示，目前效果如下。
对于最近标记内容的展示参考了 Douban sync for GitHub Actions，通过这个 Github Action 能够获取到最近标记的内容，并将其保存为本地的 CSV 文件。有了这部分数据之后，通过Hugo本身提供的 getCSV 函数就能实现最近标记内容的更新与渲染。为了这部分内容能够及时的得到展示，也采用的自动化部署的解决方案：利用 Github Action 定期将更新的数据Push到代码仓库，然后触发用于部署的 Action 进行自动化部署。最终实现的效果如下：
- 近期
博客内链
对于一些比较复杂的内容一篇博客可能难以包含所有的内容，因此为了支持多篇博客的相互引用实现了一个关于博客内链的 shortcode，其效果如下：
终端窗口
对于开发人员，最常用的工具就是终端，在写一些技术文章的时候，有时涉及到对终端命令的输入输出进行展示，为了更加清晰的展示终端的状态，本博客中实现了一个 shortcode，用于终端窗口的展示，效果如下：
- [ydj-macbook-pro ~ % wget google.com
- --2023-01-28 16:21:18-- http://google.com/
- 正在解析主机 google.com (google.com)... 198.18.4.194
- 正在连接 google.com (google.com)|198.18.4.194|:80... 已连接
- 已发出 HTTP 请求，正在等待回应... 301 Moved Permanently
- 位置：http://www.google.com/ [跟随至新的 URL]
- --2023-01-28 16:21:18-- http://www.google.com/
- 正在解析主机 www.google.com (www.google.com)... 198.18.0.13
- 正在连接 www.google.com (www.google.com)|198.18.0.13|:80... 已连接。
- 已发出 HTTP 请求，正在等待回应... 200 OK
- 长度：未指定 [text/html]
- 正在保存至: “index.html”
- index.html [ <=> ] 14.67K --.-KB/s 用时 0.07s
- 2023-01-28 16:21:19 (209 KB/s) - “index.html” 已保存 [15021]
- [ydj-macbook-pro ~ %
Timeline
之前计划在 About 页面中实现一个时间线功能，由于 About 页面的主体内容也是通过 Markdown 实现，因此最终对该功能也采用 shortcodes 的方式去实现。在实现的过程中用到了 ScrollReveal 这个 JavaScript 库，用于在元素进入/离开视口时设置动画，效果如下：
春
盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
TCMalloc
This repository contains the TCMalloc C++ code.TCMalloc is Google’s customized implementation of C’s malloc() and C++’s operator new used for memory allocation within our C and C++ code. TCMalloc is a fast, multi-threaded malloc implementation.
MoreTCMalloc
This repository contains the TCMalloc C++ code.TCMalloc is Google’s customized implementation of C’s malloc() and C++’s operator new used for memory allocation within our C and C++ code. TCMalloc is a fast, multi-threaded malloc implementation.
MoreTCMalloc
This repository contains the TCMalloc C++ code.TCMalloc is Google’s customized implementation of C’s malloc() and C++’s operator new used for memory allocation within our C and C++ code. TCMalloc is a fast, multi-threaded malloc implementation.
More多图展示
之前在提到了用于单张图片的 shortcodes， 为了支持对于多张图片的展示，本博客实现了如下几个 shortcodes，根据实际需要进行选择，下面是实际的使用效果：
- 图片瀑布流
- 图片滑块
- 图片动态展示
参考
[1] Shortcodes. https://gohugo.io/content-management/shortcodes.
[2] Podcast Player. CodePen. https://codepen.io/ivorpad/details/mZmYEj.
[3] 豆瓣书影音同步 GitHub Action. 怡红院落. https://imnerd.org/doumark.html.
[4] Lee, A. Douban Sync for GitHub Actions, 2023. https://github.com/lizheming/doumark-action.
[5] Hugo shortcoeds示例. 消夏錄. https://tin6.com/post/several-hugo-shortcoeds-samples.
[6] ScrollReveal 4. ScrollReveal. https://scrollrevealjs.org.
[7] Simplicity. CodePen. https://codepen.io/ycw/details/QVeYMP.
[8] Hugo 添加相册页面. https://immmmm.com/hugo-readdir-photos.
[9] Hugo 「近期」短代码. https://immmmm.com/hugo-shortcodes-recently-by-memos.