2012年11月20日

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

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 = "http://2.bp.blogspot.com/-dLRBs0Hlb3w/UJeBNP20KJI/AAAAAAAAE9s/ILVZXEtq9uo/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 小技巧:

33 則留言:

  1. hi,我是沈岱緯

    我對這個功能有種想法(雖然可能還是很難)

    可否寫一種判斷式:

    如果該標籤的文章大於X便以文摘或標題方式列出

    否則便依舊列全文

    X為自訂數字

    這樣一來閱讀少文章的標籤可以減少點擊次數

    就更方便了~

    回覆刪除
  2. <2638943680622015267>(以上內容請勿刪除,從括號之後開始留言)
    基本上一個頁面能顯示幾篇文章是由blogger控制的,blogger限制一個頁面最多顯示例如1MB的資料(我不確定正確的數值為多少)。

    就算我們在後台設定一頁顯示十篇文章,但如果當第六篇文章的文字、圖片資料加總就超過了限制,那麼該頁只能顯示五篇文章。

    我想除非blogger解除這個限制,否則要顯示幾篇文章並不能由我們決定。

    回覆刪除
  3. 好的謝謝

    看來只要牽扯到文章數量都沒辦法

    ps.我留言兩篇(第一篇已刪)

    前兩行都會擠在一起

    不知道為啥

    回覆刪除
  4. <3993664479170214450>(以上內容請勿刪除,從括號之後開始留言)下次有異常情形先留著吧,刪了也看不到是什麼狀況。

    回覆刪除
  5. 兩篇內容一模一樣

    因為黏在一起我才刪的

    回覆刪除
  6. <2118844493563367630>(以上內容請勿刪除,從括號之後開始留言)

    又黏了@@

    奇怪的是在回覆視窗看又不黏了

    回覆刪除
  7. <1264606444062666096>(以上內容請勿刪除,從括號之後開始留言)
    看來沒問題就好了,blogger三不五時有些小狀況~

    回覆刪除
  8. 哈囉版主
    有直接按下去就切換的語法嗎?

    回覆刪除
  9. <6453516532704314013>(以上內容請勿刪除,從括號之後開始留言)
    你要的功能前人有寫過,可以google關鍵字「繼續閱讀懶人版」之類的。

    不過我並不推薦這樣的hack,因為他的原理是,先把所有文章的內容含圖片全部讀取,再讓你選擇要按下按鈕成為「全文」、「縮文」、「標題」等模式。

    你也知道先將所有文章的圖文讀入會花多久的時間,也可以評估訪客會不會因為讀取速度而決定離開網站,再決定是否裝這樣的工具。

    回覆刪除
  10. 感謝回覆囉~我再google看看~

    回覆刪除
  11. 的確,首頁輸入差了將近2秒

    回覆刪除
  12. <5279595723947338502>(以上內容請勿刪除,從括號之後開始留言)
    如果主要是文字內容為主的部落格,載入速度差比較少;如果是文章圖片很多的部落格,載入速度就差非常多了~

    回覆刪除
  13. Hi~我又來了 >"<

    終於改完標籤,也想弄成像你這裡一樣,可以切換文摘/標題,並且塞到單一分頁裡面(看起來比較有一致性)。愚昧如我又產生以下問題:

    1.展開/收合/標題/文摘,嘗試過調整位置但都沒反應,大概該如何調整?

    2.參考分頁功能相關的說明,操作後顯示結果空空如也,能否麻煩你抽空幫我瞧瞧?

    謝謝!>"<

    回覆刪除
  14. <1862716753155147595>(以上內容請勿刪除,從括號之後開始留言)你的logo做得很棒,效果很好,網站標籤區塊看起來很專業!

    1. 簡單的方法你查一下分頁功能第一篇,塞 "&#12288;" 及 "&nbsp;" 來調整;進階的方法讀一下 CSS 的書,用 margin 來調整。

    2. 標籤是個很重要的區塊,獨立一區吧!不要放在分頁裡;放在分頁的話那四個 logo 很難擺的。

    BTW,
    A. 建議右上角四個 logo 做大一點,滑鼠比較好點。
    B. 軟體>>功能 那一區的標籤,你的原意就是要 B,D,F 這三個次分類與 C,E,Z 這三個標籤交錯排列嗎?如果是的話就不必變動;如果否的話,我的新版樹狀標籤能自動把次分類集中,你不必把次分類的標籤名稱空一格(舊版才需要這麼做)

    回覆刪除
  15. 1.如果能用目前的方式顯示,將右邊四個小圖改大些,後續完工就把原始的標籤小工具隱藏,是不是就可以不理會改位置的問題?

    2.是打算讓它單獨一個區塊(單一分頁,不跟其他小工具並列),一如目前顯示的情況。但比較大的問題是~顯示內容不知道要塞什麼進去才能正常顯示。

    A.OK~目前圖片是暫時放上去,有個樣板,會再放上15*15的圖。
    B.對~原意就是要交錯,或者說當初排樹狀時沒注意到這個細節,導致結果看起來怪怪的。至於空一格則是因為做一半才發現,想說應該沒差所以就索性都空了一格。

    回覆刪除
  16. 謝謝你的稱讚,說專業太抬舉了,是你這位老師帶領的好~^^

    回覆刪除
  17. <5080577246412618636>(以上內容請勿刪除,從括號之後開始留言)
    1. 那四個圖示如原文所提,放在任何地方都行的。

    2. 你的情形跟這個討論串情形一樣:https://plus.google.com/106036476733026091983/posts/Y35BAeEGXbQ

    在網頁裝兩個一模一樣的工具很難不打架的

    回覆刪除
  18. 原來是打架了,已經整個重來...。

    所以整個是都在範本文件裡面修改成想要的樣子即可?
    想要如圖片的樣子,我該如何著手?完全沒有頭緒,真的要拜讀 CSS 的書嗎?>"<

    回覆刪除
  19. <5506521509048636957>(以上內容請勿刪除,從括號之後開始留言)
    只有一個小工具不需要安裝分頁功能,程式碼會搞得很複雜;我的「標籤」小工具看起來有使用分頁功能,其實只是用 CSS 把分頁的圖案畫上去而已。

    所以,想要弄類似分頁的圖案,只能自己畫了,或是參考我的原始檔(或是你也會用chrome的工具看),不過每個人的範本都不同,怎麼細調就得靠你自己的了!

    回覆刪除
  20. 嗯,了解~看來這是個更大的工程~ XD

    我先隨意操作看看,真不行只好放棄了,太困難。

    回覆刪除
  21. 哈哈!放棄用 CSS 畫圖(太困難),語法部分就更...XD,直接給了一張真的圖

    回覆刪除
  22. <1132930299220209327>(以上內容請勿刪除,從括號之後開始留言)這個解法也不錯,滿方便的。

    其實CSS語法很簡單,不難,有空可以參考「Google Chrome 開發人員工具__調整部落格版面實作」,從練習調margin開始,可以漸漸上手的。

    回覆刪除
  23. 請問怎樣預設'列出文章採標題模式'?

    回覆刪除
  24. <5435949941519848055>(以上內容請勿刪除,從括號之後開始留言)設定預設值時,採取多數人會設定的選項較佳。"標題模式"是少數人才會使用的選項,不適合當預設值。

    如果是自己想用標題模式,自行點擊"標題模式"的圖示即可,瀏覽器會儲存cookie。

    回覆刪除
  25. <7696481799056617307>(以上內容請勿刪除,從括號之後開始留言)了解,謝謝! ^^

    回覆刪除
  26. 我想請問一下..我安裝了文摘與標題的程式後...
    點選以下連結..有文章出來,但沒有列完,按"較舊文章"後..卻沒有出現文章...
    這要改哪裡??
    http://met-ncikywu.blogspot.tw/search/label/%E9%9B%BB%E8%A6%96-2010%20%E6%AD%A5%E6%AD%A5%E9%A9%9A%E5%BF%83-%E7%B7%9A%E4%B8%8A%E7%9C%8B

    回覆刪除
  27. <6123288953415025593>(以上內容請勿刪除,從括號之後開始留言)我把全部的程式都拿掉,也是這樣~~不知哪裡出問題>??

    回覆刪除
  28. <3542326226708057482>(以上內容請勿刪除,從括號之後開始留言)大概是你裝的那個分頁功能所引起的吧

    回覆刪除
  29. <1869267179398531043>(以上內容請勿刪除,從括號之後開始留言)真的投降了~~我把範本換掉..然後程式全清掉,還到最原始的標籤狀態,還是不行,不知為什麼??~~><

    回覆刪除
  30. <5621940460120249491>(以上內容請勿刪除,從括號之後開始留言)我大概知道原因了,不是跟其他小工具相衝,而是日期的緣故。你附的那個連結,該標籤的文章都是同一天發佈。你試著將發佈日期改為其他天,應該就正常了,試試看吧!

    回覆刪除
  31. <8126435508879769174>(以上內容請勿刪除,從括號之後開始留言)好,我試看看,但以下這個連結也是同一天,卻可以真奇怪!!~
    http://met-ncikywu.blogspot.tw/search/label/%E9%9B%BB%E8%A6%96-2008_09%20%E7%89%BD%E7%89%9B%E8%8A%B1%E9%96%8B%E7%9A%84%E6%97%A5%E5%AD%90-%E7%B7%9A%E4%B8%8A%E7%9C%8B

    回覆刪除
  32. <7820636223572335778>(以上內容請勿刪除,從括號之後開始留言)可以了,真的是這個問題,剛上面那個連結,雖然同一天,但時間都有差1秒,所以就找得出來。真是太感謝了!!^^~~

    回覆刪除
  33. <375883083277215890>(以上內容請勿刪除,從括號之後開始留言)不客氣~^^
    剛好也多瞭解了一種異常狀況!

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。