大多数的静态博客会使用 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 文件,通过读取本地数据进行展示,目前效果如下。

豆瓣评分 9.1
[美] 丹尼尔·凯斯 / 2015 / 广西师范大学出版社
声称能改造智能的科学实验在白老鼠阿尔吉侬身上获得了突破性的进展,下一步急需进行人体实验。个性和善、学习态度积极的心智障碍者查理·高登成为最佳人选。手术成功后,查理的智商从68跃升为185,然而那些从未有过的情绪和记忆也逐渐浮现。
豆瓣评分 9.1
[美] 艾萨克·阿西莫夫 / 2014 / 江苏凤凰文艺出版社
24世纪,人类发明了时间力场。27世纪,人类在掌握时间旅行技术后,成立了一个叫做永恒时空(Eternity)的组织,在每个时代的背后,默默地守护着人类社会的发展。永恒时空以一个世纪为单位,并视每个世纪的发展需要而加以微调,以避免社会全体受到更大伤害。通过纠正过去的错误,将所有灾难扼杀在萌芽中,人类终于获得安宁的未来。然而,这种“绝对安全”的未来却在某一天迎来了终结。不知不觉中形成的因果链,仿佛从四面八方涌来的黑暗,即将吞噬全人类。 安德鲁•哈伦,生于95世纪,他是永恒时空的时空技师、人类未来社会的精英。他的天职是靠操纵时空壶,进行时间旅行来守护500亿人类,而在一次时空任务中,他邂逅了令他一见倾心的姑娘,而突然来到的爱情却让他开始质疑整个世界。 同时,人类最后的希望,也落在了时间旅行者安德鲁•哈伦最后的时空任务上…… ◆《永恒的终结》是最伟大的科幻作家阿西莫夫被公认的最高杰作。 ◆《永恒的终结》厘清了关于时间旅行的一切构想! ◆1955年原作出版,科幻迷们翘首以盼60年来,唯一中文版全译本首次登陆中国。
豆瓣评分 9.4
2014 / 美国 英国 加拿大 / 剧情 科幻 冒险 / 克里斯托弗·诺兰 / 马修·麦康纳 安妮·海瑟薇
近未来的地球黄沙遍野,小麦、秋葵等基础农作物相继因枯萎病灭绝,人类不再像从前那样仰望星空,放纵想象力和灵感的迸发,而是每日在沙尘暴的肆虐下倒数着所剩不多的光景。在家务农的前NASA宇航员库珀(马修·麦康纳 Matthew McConaughey 饰)接连在女儿墨菲(麦肯吉·弗依 Mackenzie Foy 饰)的书房发现奇怪的重力场现象,随即得知在某个未知区域内前NASA成员仍秘密进行一个拯救人类的计划。多年以前土星附近出现神秘虫洞,NASA借机将数名宇航员派遣到遥远的星系寻找适合居住的星球。在布兰德教授(迈克尔·凯恩 Michael Caine 饰)的劝说下,库珀忍痛告别了女儿,和其他三名专家教授女儿艾米莉亚·布兰德(安妮·海瑟薇 Anne Hathaway 饰)、罗米利(大卫·吉雅西 David Gyasi 饰)、多伊尔(韦斯·本特利 Wes Bentley 饰)搭乘宇宙飞船前往目前已知的最有希望的三颗星球考察。

对于最近标记内容的展示参考了 Douban sync for GitHub Actions,通过这个 Github Action 能够获取到最近标记的内容,并将其保存为本地的 CSV 文件。有了这部分数据之后,通过Hugo本身提供的 getCSV 函数就能实现最近标记内容的更新与渲染。为了这部分内容能够及时的得到展示,也采用的自动化部署的解决方案:利用 Github Action 定期将更新的数据Push到代码仓库,然后触发用于部署的 Action 进行自动化部署。最终实现的效果如下:

  • 近期
7.8
海啸奇迹
7.4
扬名立万
8.1
年会不能停!
6.2
消失的她

博客内链

对于一些比较复杂的内容一篇博客可能难以包含所有的内容,因此为了支持多篇博客的相互引用实现了一个关于博客内链的 shortcode,其效果如下:

Channel原理与实现
日期: 2022-06-18   标签: #Golang  #并发 
数据结构 channel内部的数据结构表示如下: type hchan struct { qcount uint // channel中元素的个数 dataqsiz uint // channel中循环队列的长度 buf unsafe.Pointer // channel缓冲数据指针 elemsize uint16 // 收发的元素大小 closed uint32 elemtype *_type // 收发的元素类型 sendx uint // channel的发送操作处理到缓冲位置 recvx uint // channel的接收操作处理到缓冲位置 recvq waitq // 当前因为缓冲区不足而阻塞的Gorontine列表 sendq waitq lock mutex } 阻塞的 GoRoutine 等待队列使用双向链表表示,链表中所有的元素是 runtime.sudog 结构: type waitq struct { first *sudog last *sudog } 该结构中存储了两个分别指向前后 runtime.sudog 的指针构成的链表。 创建channel Go 语言中所有的 channel 都使用 make 关键字进行创建,并转换为 runtime.makechan 或者 runtime. ......

终端窗口

对于开发人员,最常用的工具就是终端,在写一些技术文章的时候,有时涉及到对终端命令的输入输出进行展示,为了更加清晰的展示终端的状态,本博客中实现了一个 shortcode,用于终端窗口的展示,效果如下:

x
+
yandaojiang@Daojiang-macbook-pro
  • [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 库,用于在元素进入/离开视口时设置动画,效果如下:

2022.12-2023.12

盼望着,盼望着,东风来了,春天的脚步近了。一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草软绵绵的。

TCMalloc

2022.05.06

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

TCMalloc

2022.05.06

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

TCMalloc

2022.05.06

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,分别用于图片瀑布流、图片滑块和图片动态展示功能,根据实际需要进行选择,下面是实际的使用效果:

  • 图片瀑布流

另外,本博客中引入了开源的 Memos,因此基于 Memos 实现了一个动态更新的图片瀑布流,发布图片之后可以实时更新相册,下面是实际效果:

  • 基于 Memos 动态更新图片瀑布流

  • 图片滑块

  • 图片动态展示

参考

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