讓「Blogger標籤/搜尋頁面」能隨時切換標題模式與文摘模式

(Pic from: iconfinder.com)2016.3.28 公告：2016.3.28 公告：目前已發佈新版，請前往「Blogger 標籤文章列表 V2」

Abin 大發表的「標籤/搜尋頁面只列出標題」非常實用，過去曾使用過一段時間，但最後還是將此功能下架。原因無他，雖然自己使用時找資料快速，但畢竟部落格不是只有自己在用，訪客很需要看文摘來判斷文章是否值得閱讀，標題模式對訪客而言不是個友善介面。再加上現在每篇文章都花費了心力製作主題意象圖，如果訪客在「標籤/搜尋頁面」看不到圖片，那豈不可惜？

最近在想，有沒有兩全起美的方法，讓我自己可以只看到標題，但訪客能看到完整的圖文簡介，而熟客若只想查資料時，也可自由選擇切換到標題模式？實作了一下發現這不是很容易的任務，最後是使用變通的方法解決，想瞭解原理請看「一、原理及 Blogger 語法」，對程式碼不熟可直接跳「二、安裝程式碼」。


一、原理及 Blogger 語法

要完成這個任務，直覺想到的解法會是在頁面設兩個按鈕，其中一個按了將「標題模式」寫入 cookie，另一個按了將「文摘模式」寫入 cookie。接著在文章區塊寫 javascript 檢查 cookie 值，再讓頁面依照 cookie 值顯示「標題模式」或「文摘模式」。

一般來說這是個很簡單的流程與任務，但只要牽扯到 Blogger 語法，都不會是多容易的工作。在範本中，顯示標題的 HTML 與 Blogger 混合語法為 <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>；而顯示文章內容的純 Blogger 語法為 <b:include data='post' name='post'/>，如果我們把 js 寫成以下：

<script>
if (cookie == "標題") {
  document.write("<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>");
}
if (cookie == "文摘") {document.write("<b:include data='post' name='post'/>")}
</script>
以上第一個判斷句可以正常執行(除非文章標題有奇怪的字元)，但第二個判斷句就會執行得亂七八糟，可以自行測試看看。會出錯的原因與主題無關，有機會再詳談，總之要把 Blogger 語法放進 js 裡面輸出到頁面，是一件很吃經驗值的事。

偏偏本文的任務一定要用到 js 才能處理 cookie 的判斷，最後想出的方法為繞過 Blogger 語法，先讓 Blogger 語法執行(印出文摘)，同時也執行印出標題，接著執行 js 讀取 cookie，最後再決定要動態刪除文摘或是標題(只留其中一個)，總算解決了這個問題。

以上簡單講就是文摘跟標題都先印出來，再刪掉其中一個；由於電腦執行速度很快，在肉眼看到印出來之前，其中一個就被刪掉了。



二、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 首先到 Blogger 後台 → 編輯 HTML

2. 接著搜尋以下程式碼，應該只會找到一個──

<b:include data='post' name='post'/>
3. 把以上程式碼置換為以下內容──

<!--<b:include data='post' name='post'/>-->
<!-- 標題及文摘模式切換 -->
<script>
if (!indexPageMode) {
  var indexPageMode = {
    rCookie: function (name) {
      var sp = document.cookie.split("; "),
          l = sp.length,
          i;
      for(i = 0; i &lt; l; i++) {
        var temp = sp[i].split("=");
        if (temp[0] == name) {return temp[1];}
      }
    },
    wCookie: function(name, data) {
      var expires = new Date();
      expires.setTime(expires.getTime() + 1 * 365 * 1440 * 60 * 1000);
      document.cookie = name + "=" + data + ";path=/;expires=" + expires.toGMTString();
    },
    cookie: function () {
      return this.rCookie("postIndexMode");
    }
  };
  if (indexPageMode.cookie() == "title") {
    indexPageMode.wCookie("postIndexMode","title");
  } else {
    indexPageMode.wCookie("postIndexMode", "summary");
  }
}
</script>

<div id="deleteInTitleMode"><b:include data='post' name='post'/></div>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "index"'>
    <h3 id='deleteInSummaryMode' class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<script>
(function() {
  var postBody = document.getElementById("deleteInTitleMode");
  if (indexPageMode.cookie() == "title") {
    postBody.parentNode.removeChild(postBody);
  } else {
    postBody = document.getElementById("deleteInSummaryMode");
    postBody.parentNode.removeChild(postBody);
  }
} )();
</script>

  </b:if>
</b:if>
<!-- -->
第一行我把原本那一行程式碼註解起來，而非刪除，用意是將來若要回復的話，才記得原始碼為何。這也是我的習慣，若要變更範本裏的內容時，原內容盡量用註解的方式保留起來，避免將來發生災難時不知如何回復原貌。以上程式碼的流程在「一、原理及 Blogger 語法」已經解釋過，存檔後請繼續下個動作。


三、安裝按鈕

1. 安裝位置：範本裏的程式碼安裝完後，接著是安裝開關按鈕。其實可以根據個人需求，放在任何想放的位置；而如果對程式碼不熟的話，建議放在「標籤」小工具的標題附近，步驟請參考「讓Blogger的標籤能多層樹狀分類__（二）全部開合」 → 「放置位置：」→ 可放在程式碼第 4 點 <h2><data:title/>....</h2> 紅字的位置。

而如果想要讓小圖示靠最右邊，可以把「2. 安裝程式碼」裏的兩個 <img> 標籤前後用 <span> 包起來，再加上靠右的語法，例如以下：

<span style='float:right'><img.../> <img.../></span>

2. 安裝程式碼：一樣打開範本文件：編輯 HTML → 勾選展開小裝置範本，找到自己要安裝的位置、或參考「1. 安裝位置」插入以下程式碼──

<!-- 標題與文摘圖示 -->
<img id="indexSummaryMode" src="" title="列出文章採文摘模式"/> <img id="indexTitleMode" src="" title="列出文章採標題模式"/>
<script>
(function() {
  var titlePic = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3FmiexskwyoI6PWdHuwztSce_YMYfsQaiJh-lUFhpSossZXskJJ6TtRNoBmxGUSWcFd64sn7jGp3ne4YnUe2V2P_Rbf0gxK_dlNYYiaX8GpLAQpdmulVOdP515XxvN_3R_JPUabs0MD0/s15/list.png",
      titlePicBW = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjON23eRAboeVIVFeJTZNB7ecsxuPj8Xlcp3ri_OUIf0Rk477snj9kw2DNTevFazO4ARKiOSV_ZT3DC01RWO1oiAFKI6g549WsMNZ3pbNJ8ldnRSt-GOxmLDbFIMjlSYcYr3dC88oA371rM/s15/list-bw.png",
      summaryPic = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiubuyCq1sWqbLixk3KyxTPwrB20mYerk9Nipfmw64hTSWgiOtsYJ0q3si2PCvOKnRqpbbFPyNnzgzG5fski2PL6jgfCm_k-NUyFBINMIhmdLdciwNhZTGULWghjFaGhxpz3BNa6rCVihMh/s16/photo.png",
      summaryPicBW = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRkxqMnkYT4g99dAXxAk_HdmDxX5W_N_jQdtCI-XWbwulvwSKuIVuRMl76S66YeG9nDCW7BRU1RGO4h-pn1YH4aGP3qCVKQzXH9g-B6QHakMU4LqQ_0O0iX06bCyXSlnZHSkhmTSpxEYf6/s16/photo-bw.png",
      cookie = indexPageMode.cookie(),
      ok = (cookie == "title"),
      tMode = document.getElementById("indexTitleMode"),
      sMode = document.getElementById("indexSummaryMode"),
      click = function (mode, title, summary) {
        var ok = (mode == "title");
        indexPageMode.wCookie("postIndexMode", mode);
        title.src = ok ? titlePic : titlePicBW;
        summary.src = ok ? summaryPicBW : summaryPic;
        title.style.cssText = ok ? "cursor: auto;" : "cursor: pointer;";
        summary.style.cssText = ok ? "cursor: pointer;" : "cursor: auto;";
      };
  tMode.src = ok ? titlePic : titlePicBW;
  sMode.src = ok ? summaryPicBW : summaryPic;
  tMode.style.cssText = ok ? "cursor: auto;" : "cursor: pointer;";
  sMode.style.cssText = ok ? "cursor: pointer;" : "cursor: auto;";
  tMode.onclick = function () {click("title", tMode, sMode);};
  sMode.onclick = function () {click("summary", tMode, sMode);};
} )();
</script>
<!--  -->
以上用到四張圖，綠字網址由上到下依序為標題模式彩圖、標題模式黑白圖、摘要模式彩圖、摘要模式黑白圖，想要換別的圖案的話請自行置換圖片網址。

以上存檔後要測試效果可操作本站側邊欄「文章分類」右邊的小圖示，簡單的操作說明請見下一節。

2014.7.17 公告：因應新版面及將來會出更新版，目前本站取消此功能的展示。



四、操作說明

1. 文摘模式：如「文章分類」右邊的小圖示，會顯示彩色的  ，而標題模式的圖示是黑白的；按下標籤後的搜尋畫面會出現圖文摘要。

2. 標題模式：若按下標題模式的圖示，讓他變成彩色的  ，文摘模式的圖會變為黑白；按下標籤後的搜尋畫面會只有文章標題。

初始的預設值為文摘模式，當訪客第一次造訪我們網站時，由於還沒有 cookie，所以會是文摘模式；而只要切換過不同的顯示模式都會自動儲存 cookie，訪客下次造訪時會保持一樣的顯示模式。

而站長若切換成標題模式，只要都不切換回文摘模式，且瀏覽器也沒有刪除 cookie，站長永遠可以用標題模式看標籤/搜尋畫面。


五、結語

如果部落格主題屬與資訊提供類型，自己或訪客可能常來查詢、搜尋資料的話，那麼相信本文這個 hack 非常實用，可節省許多頁面搜尋的時間，隨時又能切回文摘模式，十分推薦安裝。

更多 Blogger 小技巧：