Hugo 「近期」短代码(基于 Memos Docker)

近期光影

此想法原创为 @Leonus 同学:《基于memos的动态相册》

仔细查阅发现调取一条带 #相册 标签的 Memos 内容,并正则匹配内容中的 md 格式图片,再前端解析。个人兼容拓展了一下,解析多条可外链和 Memos 内置资源库上传的图片显示。

Hugo 「近期」短代码(基于 Doumark Actions)

观影和阅读记录页面,无论用什么博客程序,总会想办法找 API 造轮子来实现。目前使用的是 Douban sync for GitHub Actions 方法,它会自动把“豆瓣观影/阅读/音乐记录同步”存为本地文件,安逸!

既然本地已经有一份自己的观影和阅读数据文件 data/douban/movie.csvdata/douban/book.csv ,除了做成两个页面,这些数据还能怎么用呢?

Hugo 游戏卡片短代码

效果如上 ⬆️

轮子来自于 @JoeZhao 同学的 《在 hugo 中插入游戏信息卡片》 ,👍

Hugo 豆瓣短代码

8.4
刘震云 / 2021 / 花城出版社
8.2
2023 / 中国大陆 / 科幻 冒险 灾难 / 郭帆 / 吴京 刘德华
抛开主题,为特效打工人打满分

效果如上 ⬆️

图片瀑布流折腾记

前两篇实现的图片瀑布流利用的是 「waterfall.js」 (1KB 原生 JavaScript 搞定图片瀑布流)和 「imgStatus」 (855bytes 原生 JavaScript 判断多图加载情况)。

不过,还是需要自己调校下,主要搞定:

  • 支持图片 CDN 外链识别。
  • 支持多 Gallery 显示。

Hugo 相册短代码

效果如上 ⬆️

调用代码如下(需去掉反斜杠):

\{\{< gallery "images/2004gd">\}\}

Hugo 添加相册页面

旧文更新,效果见: https://immmmm.com/photos/

总有那么一瞬间特别特别想发一张照片,但不是以文章形式发布。

实现思路是程序自动遍历指定文件夹内的图片,并展示在一个页面上。有了思路,剩下的就是看文档、看文档、看文档,此功能利用 Hugo 的 readDir function 函数达成。

Memos 自定义代码片段

旧文换新颜。新实现以下功能:

调用 Bing 每日背景;

加载「霞鹜文楷」在线字体;

随机 Memos 回顾

设置 Favicon 图标为 emoji

Pake x 微信读书 x 霞鹜文楷

利用 Pake 给 「微信读书」 网页版打包成了 App。

  • 加上了 「霞鹜文楷」在线字体;

  • 增加内容宽度;

  • 覆盖了亮色主题背景色为淡米色;

  • 隐藏右侧控制按钮,只保留字体大小按钮;

  • 隐藏底部工具栏,鼠标移动至底部显示。

下载地址:https://github.com/lmm214/Pake/releases

启用「霞鹜文楷」在线字体

项目地址:https://github.com/chawyehsu/lxgw-wenkai-webfont