使用 Picsum Photos 嵌入随机好图
🖼️

使用 Picsum Photos 嵌入随机好图

日期
Jul 25, 2022
标签
技术
建站
简摘
对于一些并无合适头图的文章,如何在首页文章卡片头图位置显示不同的随机好图,成了一个令我头痛的问题。这是目前我找到的最佳解决方案。
状态
发布 Published
⚠️
我已经切换到了基于 Notion 和 Vercel 的简洁设计博客,目前文章没有了头图。本文中提到的“首页卡片”格式来自 Typecho 主题 Mirages,设计美观,值得一试。
最近搭建这个新博客,运用的主题模板是「首页卡片」的格式,对于文章头图的要求特别高。
对于一些并无合适头图的文章,如何在首页文章卡片头图位置显示不同的随机好图,成了一个令我头痛的问题。
这是目前我找到的最佳解决方案:
notion image
不懂这是什么意思?好吧,让我告诉你:上面的这张图,包括这篇博文顶端的头图,都是自动从 https://picsum.photos 的图库中随机选取的。
刷新试试,你会发现这些图片都改变了。
这个随机选取的方案不需要任何劳累的设置,只需要把图片链接改成:
https://picsum.photos/图片宽度/图片高度
这处的图片就会成为一个不断变化的好图占位符。
正如网站上所说的那样:The Lorem Ipsum For Photos. (图片的占位符。)
同时,如果你的同一个网页上多次调用这一网址,图片都会是同一张。(下面这张图和上面那张同时更新,一模一样。)
notion image
如果你需要在一个网页上多次调用不同图片,就需要在不同位置加上不同的 random 请求后缀:
<img src="<https://picsum.photos/图片宽度/图片高度?random=1>"> <img src="<https://picsum.photos/图片宽度/图片高度?random=2>">
这样就可以实现同一个页面上使用多张随机好图了。
同时,这个服务还支持一些「高阶操作」,例如:
https://picsum.photos/图片宽度/图片高度/?blur=从1到10的任意程度
notion image
<https://picsum.photos/图片宽度/图片高度/?grayscale>
notion image
<https://picsum.photos/图片宽度/图片高度.jpg或.webp>
notion image
各位可以尝试一下。
最后,大家可以刷新本页看好图啊!