Logo

网站装修记录第一弹

各家作业+各家AI大显身手,而我是复制粘贴工人

设计第一要义:现代海报设计风格,设计由我和每天聊三句话的免费Gemini共同进行

热力图

热力图在近日信息 页面置顶,显示一年内的写作字数,感觉加了这样的热力图就能用功利心战胜完美主义了,功利主义万岁!

代码参考了如何给 Hugo 博客添加热力图

由于想将murmurs区块的内容也计入热力图,现在热力图会显示两个颜色,即两个区块的数据统计,但是实际数据量和颜色代表哪个区块应该不太关键。

等我重构了tag和date的filter页,就尝试把热力图和date-filter绑定一下。 有点太耗内存了决定放弃。

外链标志

如果出现外链,就在外链后面加入一个跳转外部网址的标识。

参考了Hugo Stack主题装修笔记 Extrenal Link Icon in Hugo Natively, Markdown Render Hooks

iconsvg.xyz 网站,还能先随直觉把大小、颜色调整好,再复制嵌入代码。

B站播放器

播放器嵌入参考了:使用Shortcodes在Hugo博客中优雅的嵌入B站视频

但是自动播放这点有点太抽象,我想让读者有是否播放的选择,所以(和Alma、Gpt一起)做了一个overlay显示UP主、视频标题、视频封面。

API 抓取显示up主、视频标题、视频封面;API来自SocialSisterYi/bilibili-API-collect

效果

这就是我和掷面虫热血沸腾的组合技口牙
UP 小号光头official

Codeblock 代码块美化

对象:限定max-height以及添加复制按钮

因为网站的解析是<div class="highlight">> <pre>><code>,所以我粗暴地对highlight进行了限制了行高。

另一种解法:官方的Highlight shortcode

复制按钮部分,再次感叹为了一个复制按钮(人人大同),实在是太辛苦,于是摆烂。

侧边目录TOC

参照了Hugo添加文章目录toc 这篇文章,对toc.html进行了设置。不过没有尝试滑动监听。

等我有一天开始包容地走向JS再说吧。

#Hugo装修