iT邦幫忙

2025 iThome 鐵人賽

DAY 12
0

今天來更新歸檔頁的分類圖片

從昨天新增完後可以到分類頁面是沒有圖片的

https://ithelp.ithome.com.tw/upload/images/20250907/20178433PopYdK8mmi.png

怎麼做

  1. 把圖片放到站點資源(舉例)

    source/images/hero.jpg

    source/images/bird.jpg

  2. source/style.css 最後加這段(覆蓋卡片背景):

/* Hexo */
.kira-archives .categories a[href$="/Hexo/"] .bg{
  background: url("/images/hero.jpg") center/cover no-repeat !important;
}
/* 個人網站(中文與 URL 編碼兩種都寫) */
.kira-archives .categories a[href$="/個人網站/"] .bg,
.kira-archives .categories a[href$="/%E5%80%8B%E4%BA%BA%E7%B6%B2%E7%AB%99/"] .bg{
  background: url("/images/bird.jpg") center/cover no-repeat !important;
}

/* 讓字更清楚的遮罩,用不用都行 */
.kira-archives .categories a::before{ background-color: rgba(0,0,0,.25) !important; }

/* 圖片縮放特效 */
.kira-archives .categories a:hover .bg{ transform: scale(1.02); transition: transform .3s ease; }

記得重新啟動看看有沒有成功

hexo clean && hexo s

最後結果

https://ithelp.ithome.com.tw/upload/images/20250907/2017843369dNvJhDFk.png


上一篇
DAY11 文章格式
下一篇
DAY13 隨機圖
系列文
身為一個宅宅也想要有自己的小天地13
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言