[Ghost] Ghost Blog 圖片使用 FancyBox 應用修正方式
前言
FancyBox 是一款使用 jQuery 做搭配的圖片燈箱工具
可以讓你很方便的做到像是下面這種幻燈片的感覺且支援 RWD
Ghost Fancybox 問題與困難點
但是原生 Ghost 對於 content 的處理沒有像 Hexo, Hugo.. 等靜態網頁
能夠很簡單的從主題去進行圖片細節的應用調整
白話一點就是 ghost content 格式是 framework 自己決定好, 你調不了、動不到, 除非你想改核心引擎原始碼
雖然說 Ghost 這點在 version 3 有做了一些改變, 像是 wordpress 那樣處理
圖片預設會帶入某種 class, 而後就可以自己透過 theme 的 css 覆蓋做自定義 (https://ghost.org/docs/themes/content/)
但是實際參考過後, 就會發現這個問題蠻多也不直覺
而且還有最大的一個問題點是...
Ghost markdown block 出來的圖片跟普通其原生 Editor 插入圖片 Render 結果不一
所以對於習慣使用 markdown block 來撰寫文章的我來說上面那種方法根本無法使用
網路上部份的解決方法
xiaoluoboding 在他設計的 ghost theme 中, 也有部份提出這個問題的解決辦法, 並說明
題外話, 當初我的 ghost blog 剛起來, 想要學習如何自己調整 theme 時, 很大一部份也是參考他的設計的主題 kaldorei
講遠了, 我們來看一下他說提出的解決方法
單看這樣其實蠻不知所以然的, 讓我們先補充一點知識
補充一下知識
-
Fancybox 使用方法
Fancybox 必須再圖片外圍包裝一層 link, 簡單來說就是圖片連接, 然後需要一個 data-fancybox 的 attribute 來當作 reference
<a href="imgUrl" data-fancybox="..." /><img src="imgUrl /></a> -
Ghost Markdown block 渲染
當我們在 Ghost Markdown 編輯器輸入圖片時
, 生成出來的 html 會像是下面這樣<p><img src="..." /></p>你沒看錯, 就這樣, 連個 class 或 attribute 也沒有, 這點真的頗為詬病, 有機會再寫個文章說說 Ghost 當作 blog 的問題點和不推薦原因好了...
xiaoluoboding 的處理方法
xiaoluoboding 在文章中說道透過將 markdown image 前面之 ![] 同樣放入圖片連結來解決問題
像是:
[](http://__SITE__DOMAIN__/content/images/2020/06/view1.jpg)
其實就是透過多包一層 markdown link 的方式來達到 <a> tag 在外層以供 fancybox 抓取並渲染
後續 fancybox 就可以順利 select 到圖片並進行處理
$('.content a:has(img)').addClass('fancybox');
$(".fancybox").attr('data-fancybox', 'images').fancybox({
selector: '[data-fancybox="images"]',
但..懶人如我 上面那樣會導致整個 markdown 變得很長, 要撰寫很麻煩, 該如何通盤的解決？
通盤解決方法
我們要做到的像是這樣, 且 markdown 圖片輸入維持很簡單 ![]()
<p><img...></p>` => `<p><a><img ... /></p>
想說既然都使用到 jQuery 了, 那我們直接透過一層 wrapper 做封裝呢？
透過 class 與 img 的 css selector, 我們可以輕易的抓取到目標圖片
然後再透過 wrap() 或是 wrapAll() 進行包裹原本單純的 <img> tag 即可
Solution script
var images = $('.post .content img');
for (i = 0; i < images.length; i++) {
$(images[i]).wrap('<a href="' + $(images[i]).attr('src') + '">');
}
這樣就可以懶人直接寫原本的 markdown 惹
提醒: 上面的 css selector 僅供概念參考頗暴力, 記得要根據你的主題還有 ghost 本身的 kd-* class 做跳脫, 不然 fancybox 會影響網頁喔
大概如此, 有問題歡迎留言與我討論～