教學 : 關於 nofancybox 的設置 (Tutorial: Disable fancybox for specific images.)

[MeteorVE]

今天手賤升級，並且遇到問題也不想回滾就想解決，剛剛解了一個，很開心，來分享。

故事前提

fancybox 是一個被大家廣用的框架，很幸運的，Next 團隊在很久以前就有整合在裡面。
有了 fancybox，我們可以將圖片放大、在下面設置一些 caption、使用左右來瀏覽圖片。

但是，有一些圖片因為某些原因，我們就是不希望他套用。
例如這個

這是一個應用方法 (把自己的圖片當成 emoji，緊跟在文字尾端。)
這類的圖片就不適合被套用 fancybox。

所以，我們總要想個辦法來實現這件事情。

在以前是怎麼解決的

• 這邊說的是 NexT v8.0 以前，2019 年代。

最早最早，我是看到這篇 : https://blog.csdn.net/cddchina/article/details/79764432
上面這篇不知道還活不活著。作為替代，相關討論如果想找找的話 (畢竟大家也都互相"宣傳")
關鍵字可以下 "wrapImageWithFancyBox" + "nofancybox"

這邊簡單介紹的話，就是在 /next/source/js/utils.js 之中，去添加一行

NexT.utils = {
  wrapImageWithFancyBox: function() {
    console.log("Injection: utils.js")
    document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(element => {
      var $image = $(element);
     if ($(element).hasClass('nofancybox')) return;  // 添加這行
     // ... 下略

但是這在 v8.x 並不能使用，這使我今天折騰了很久。

嘗試的辦法

• 以前怎麼做的我就怎麼做，首先使用 injection 方法，在 /hexo根目錄/source/js/ 建立 utils.js
  並且先拷貝 /next/source/js/utils.js 的全部內容，然後把 wrapImageWithFancyBox: function() {} 都貼到合理位置。
  但這並不會成功。
• 我的想法是，可能這個 function 沒有被觸發 (搜了整個專案沒看到 wrapImageWithFancyBox 的觸發點)。
  所以看了一下，得想辦法讓他在 /next/source/js/next-boot.js 中去觸發。
  所以我添加了 CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox(); 在合理位置，畢竟以前版本也是類似這樣寫的。
  但這並不會成功。
• 用 console.log 稍微 debug 一下，發現 CONFIG.fancybox 是 undefined 呀。
  自己試了老半天，明明 _config.next.yml 已經是 fancybox: true 了，怎麼還這樣。
  我自己的推斷是 CONFIG 在 assign 的過程中並沒有把 fancybox 當作 key 來讀入。
  源碼看了老半天也沒看懂在哪邊 assign 的，歡迎開發組補充解惑。
  不過讀不到，小事情，
  CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox(); 直接改成
  NexT.utils.wrapImageWithFancyBox();，我牛逼。
  但這並不會成功。 然後圖片全部都不顯示了 (等於 fancybox 套用過程中失敗)

接下來就是正解了

正解

既然我自己套 fancybox 失敗了，那他到底怎麼讀入的。
找了一下，看到以下線索

Hmmmmm ... 所以就是直接讀 fancybox 官方的 js ? 這麼勁爆 ?
於是我點開了 /next/source/js/third-party/fancybox.js，噢，不是直接讀入，但這裡面的東西我似曾相識。
所以就是現在不搞 wrapImageWithFancyBox 那套了，而是使用這個檔案來做 wrap。
那就簡單明瞭了。

1. 首先一樣要善用 injection 方法，在 /hexo根目錄/source/js/third-party/ 建立 fancybox.js。
2. 把 /next/source/js/third-party/fancybox.js 內的東西全部複製過去。
3. 安插一段 code 進去 (不含註解的話，三行)

  // 前面省略了一些 code 
  document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(image => {
    
    /* Modify by MeteorV */
    if (image.classList.contains('nofancybox')) {
        return; // Skip elements with class "nofancybox"
    }
   /* ------------------ */
    
    const imageLink = image.dataset.src || image.src;
    const imageWrapLink = document.createElement('a');
    // ... 下略

這樣就完成了。
不過，雖然都已經用 injection 的方式了，還是推薦像我一樣寫自己的 ID 在註解之中
這樣以後忘記自己寫了、改了什麼東西之後，就會方便一點找 ...

大概就這樣啦 !

碎碎念

NexT 7.x 版本在 lazyload 的部分好像做的不是很好，所以就想要升級一下；

此次升級之後雖然遇到了諸多的問題
(例如因為以前的 injection 程式碼不適用了，導致 blog 都是 crash 狀態找原因找了好久、很多 custom CSS 跑掉)

但是目前用的 8.x 版本的 lazyload 運作很正常，看了很開心。

如果有時間的話，會想要把此次升級遇到的問題也記錄起來 ... 但可能不會像這篇這麼長就是了
很喜歡這種紀錄方式，希望能給其他也在折騰的小夥伴們一點啟發。

[stevenjoezhang]

非常棒的解決方案，感謝您的分享！