设计第一要义:现代海报设计风格,设计由我和每天聊三句话的免费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
效果
Codeblock 代码块美化
对象:限定max-height以及添加复制按钮
因为网站的解析是<div class="highlight">> <pre>><code>,所以我粗暴地对highlight进行了限制了行高。
另一种解法:官方的Highlight shortcode
复制按钮部分,再次感叹为了一个复制按钮(人人大同),实在是太辛苦,于是摆烂。
侧边目录TOC
参照了Hugo添加文章目录toc 这篇文章,对toc.html进行了设置。不过没有尝试滑动监听。
等我有一天开始包容地走向JS再说吧。