2012年11月1日 星期四

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

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

Wayne Fu 0 A+

(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 = "http://2.bp.blogspot.com/-v7-LDeO_z-I/UJeBODUMKoI/AAAAAAAAE-E/4ZVVEq88x6I/s15/list.png",
      titlePicBW = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0IuXrLSgSFk_hmuGnD7IBqZMWVwp5SMawcb2BlMnKa3kvuZRV5AkmNh7bBfj-1fAjs4vKCGnazmlqL2GrHRu-Xo8H4fRcXUM_Zgc1nds4OPXog2zPsamxf19i0LK1fiOqbmVyu_3TkvH/s15/list-bw.png",
      summaryPic = "http://3.bp.blogspot.com/-OVEyBMKMe9c/UJeY_HbRkJI/AAAAAAAAE-4/0wuv8iosepo/s16/photo.png",
      summaryPicBW = "http://2.bp.blogspot.com/-lPziBDQzwIo/UJeY_8sJMkI/AAAAAAAAE_E/0zDBF2tlqD0/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 小技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP