博客圖片(新浪博客圖片)

一、前因

代碼截圖太小，沒有放大功能，看著不方便，遂加之。

搜索一番發現一哥們文章說可以使用 Markdown Render Hooks 與 Fancybox 搭配實現，跟著教程一頓操作下來，然并卵。

于是我繼續查找，發現LightGallery也能實現，不過多數文章教程只有一句話略過 hugo主題已集成，這不寫著耍猴呢，我的主題沒有集成呀。

正在我想著去下載主題瞅瞅代碼時，我退縮了，前端要折騰起來，那還真是至死也不休，我選擇靜心去研究剛開始的Fancybox。

找到你的 head.html 或者 footer.html，在里面引入兩行代碼：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.12/dist/fancybox.css"><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.12/dist/fancybox.umd.js"></script>

官方文檔說添加 data-fancybox="gallery" 屬性就可實現，但是許多文章都把它添加在 a 標簽中，a 標簽再包裹 img 標簽實現。

可能是這樣做有什么好處吧，又或者那些文章都是從同一篇文中clone、clone、再clone出來的，反正我直接在img中添加就能完美實現。

找了半天文件也沒找見文章的圖片在哪里渲染出來的，可能走的hugo內部渲染引擎或者其他。

于是換了個思路，不就是添加個屬性嘛，用 js 獲取對應圖片添加不就完了？

又是一頓 js 或者 jquery 獲取元素、添加屬性的資料查找，最后僅此兩行代碼搞定。

// 獲取文章中的img 標簽 不包括封面 $('.main img').not(".cover").each(function () { //添加 data-fancybox="gallery" $(this).attr("data-fancybox","gallery"); })

ps：注意修改成你自己的文章img類。

hugo雖說改動代碼會自動渲染，但是對于css與js的改動，得益于瀏覽器的緩存，你并不能看到效果，兩種辦法解決：

使用 ctrl+F5 刷新 開發者工具網絡一欄中將停用緩存打上勾

有時候覺得顏色或者樣式不喜歡，可以在瀏覽器開發者工具中，慢慢磨出想要的效果，記住改的值，再去css中對應修改，畢竟開發者工具中效果都是實時可見的，無敵方便。

可能在前端者眼中一臉茫然，這不是基本操作嗎？但是在萌新面前可能會抓狂很久乃至放棄（入門到放棄說的可能就是這種時刻吧），因此有必要分享出來。

本篇廢話較多，干貨只有四行代碼。

收工！