Butterfly 主題修復 — 移除友連卡片作者頭像下的描述性文字

問題描述

在把網站推上雲端前，我習慣會檢查一下每個頁面以確保沒什麼問題，然而檢查到友情連結頁時才發現不知為何每張友連卡片中網站作者的頭像下都有個 ‘cover’，看來是圖片下的描述性(說明)文字，但我幾乎沒用這功能，印象中只有某篇文章的某張圖才有寫到說明文字，且依網站主題的程式設計來說在這裡也不該出現這個才對。

​
​

問題解決

1. F12 打開瀏覽器的開發者模式，把游標移上去檢查一下能看到 ‘cover’ 來自以下 HTML 元素。

​
2. 接著以 VScode 開啟 Hexo 的根目錄，全局搜尋 img-alt is-center 這 CSS 類名，找到了 main.js。

看起來這函數的功能是找出所有位於 #article-container 內的 <img> 標籤，然後讀取其 title 屬性 (沒有的話則是讀取 alt 的)。如果圖片有這些屬性，且不在 justified-gallery 類的容器內，函數就會在圖片下加一個 class 為 img-alt is-center 的 <div> 元素，用來顯示圖片的說明文字。
​
​
3. 一開始我是直接注解底下，但這樣作者頭像會往下掉，導致和網站名字黏在了一起。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  /**
   * PhotoFigcaption
   */
  function addPhotoFigcaption() {
    //document.querySelectorAll("#article-container img").forEach(function (item) {
    //  const parentEle = item.parentNode;
    //  const altValue = item.title || item.alt;
    //  if (altValue && !parentEle.parentNode.classList.contains("justified-gallery")) {
    //    const ele = document.createElement("div");
    //    ele.className = "img-alt is-center";
    //    ele.textContent = altValue;
    //    parentEle.insertBefore(ele, item.nextSibling);
    //  }
  //  });
}

​
​
4. 最後我決定小修一下來解決這問題，簡單又快速，這樣網站作者頭像下的描述性文字 ‘cover’ 就消失了，還不會影響到其原本的高低位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  /**
   * PhotoFigcaption
   */
  function addPhotoFigcaption() {
    document.querySelectorAll("#article-container img").forEach(function (item) {
      const parentEle = item.parentNode;
      const altValue = item.title || item.alt || ' ';  //強制替換成一個空格
      if (altValue && !parentEle.parentNode.classList.contains("justified-gallery")) {
        const ele = document.createElement("div");
        ele.className = "img-alt is-center";
        ele.textContent = ' ';  //插入一個空格
        parentEle.insertBefore(ele, item.nextSibling);
      }
    });
}