同樣的圖會看膩?或者是你單純想要有更豐富的圖來裝點你的網站?

那就讓我們用隨機圖吧

每次發文都能隨機調用一張圖片

https://www.loliapi.com/

使用方法跟前面文章一模一樣：直接加在文章cover裡面

---
title: ...
cover: https://www.loliapi.com/bg/
---

LoliApi 端點總覽：

• 自適應：/acg/依裝置回傳 PC/PE
• PC：/acg/pc/可 ?type=url|img|json、可 ?id=
• 手機：/acg/pe/（同上）
• 混合背景：/bg/（PC/PE 隨機擇一）
• 頭像：/acg/pp

套用的結果如下：

但是這樣會有圖片大小的問題

所以我們加入大小遮罩固定 16:9 並強制裁切為 cover。把下面貼到 source/style.css 。

/* 統一封面比例 + 強制視覺裁切（cover） */
:root { --cover-w: 16; --cover-h: 9; }        /* 想 21:9 就改 21/9；想 4:3 就 4/3 */

/* 1) 固定封面容器比例（覆蓋主題在元素上的 inline padding-bottom） */
.kira-post-cover{
  padding-bottom: calc(var(--cover-h) / var(--cover-w) * 100%) !important;
}

/* 2) 封面圖裁切填滿 */
.kira-post-cover img,
.kira-post-cover-image{
  position: absolute !important;
  inset: 0 !important;              /* = top/right/bottom/left:0 */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;     /* 視覺裁切 */
  object-position: center !important;
  display: block !important;
}

這樣你的圖片就會跟文章一樣大小了