公告版位

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


(Pic from: iconfinder.com)


最近在想,有沒有兩全起美的方法,讓我自己可以只看到標題,但訪客能看到完整的圖文簡介,而熟客若只想查資料時,也可自由選擇切換到標題模式?實作了一下發現這不是很容易的任務,最後是使用變通的方法解決,想瞭解原理請看「一、原理及 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. 把以上程式碼置換為以下內容──

全文已移往WFU BLOG 主站,請點:「讓「Blogger標籤/搜尋頁面」能隨時切換標題模式與文摘模式

創作者介紹

WFU BLOG

Wayne Fu 發表在 痞客邦 PIXNET 留言(33) 人氣()


留言列表 (33)

發表留言
  • 米直
  • hi,我是沈岱緯

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

    可否寫一種判斷式:

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

    否則便依舊列全文

    X為自訂數字

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

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

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

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

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

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

    前兩行都會擠在一起

    不知道為啥
  • Wayne Fu
  • <3993664479170214450>(以上內容請勿刪除,從括號之後開始留言)下次有異常情形先留著吧,刪了也看不到是什麼狀況。
  • 米直
  • 兩篇內容一模一樣

    因為黏在一起我才刪的
  • 米直
  • <2118844493563367630>(以上內容請勿刪除,從括號之後開始留言)

    又黏了@@

    奇怪的是在回覆視窗看又不黏了
  • Wayne Fu
  • <1264606444062666096>(以上內容請勿刪除,從括號之後開始留言)
    看來沒問題就好了,blogger三不五時有些小狀況~
  • 廖麥渴
  • 哈囉版主
    有直接按下去就切換的語法嗎?
  • Wayne Fu
  • <6453516532704314013>(以上內容請勿刪除,從括號之後開始留言)
    你要的功能前人有寫過,可以google關鍵字「繼續閱讀懶人版」之類的。

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

    你也知道先將所有文章的圖文讀入會花多久的時間,也可以評估訪客會不會因為讀取速度而決定離開網站,再決定是否裝這樣的工具。
  • 廖麥渴
  • 感謝回覆囉~我再google看看~
  • 廖麥渴
  • 的確,首頁輸入差了將近2秒
  • Wayne Fu
  • <5279595723947338502>(以上內容請勿刪除,從括號之後開始留言)
    如果主要是文字內容為主的部落格,載入速度差比較少;如果是文章圖片很多的部落格,載入速度就差非常多了~
  • 阿啦
  • Hi~我又來了 >"<

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

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

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

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

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

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

    BTW,
    A. 建議右上角四個 logo 做大一點,滑鼠比較好點。
    B. 軟體>>功能 那一區的標籤,你的原意就是要 B,D,F 這三個次分類與 C,E,Z 這三個標籤交錯排列嗎?如果是的話就不必變動;如果否的話,我的新版樹狀標籤能自動把次分類集中,你不必把次分類的標籤名稱空一格(舊版才需要這麼做)
  • 阿啦
  • 1.如果能用目前的方式顯示,將右邊四個小圖改大些,後續完工就把原始的標籤小工具隱藏,是不是就可以不理會改位置的問題?

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

    A.OK~目前圖片是暫時放上去,有個樣板,會再放上15*15的圖。
    B.對~原意就是要交錯,或者說當初排樹狀時沒注意到這個細節,導致結果看起來怪怪的。至於空一格則是因為做一半才發現,想說應該沒差所以就索性都空了一格。
  • 阿啦
  • 謝謝你的稱讚,說專業太抬舉了,是你這位老師帶領的好~^^
  • Wayne Fu
  • <5506521509048636957>(以上內容請勿刪除,從括號之後開始留言)
    只有一個小工具不需要安裝分頁功能,程式碼會搞得很複雜;我的「標籤」小工具看起來有使用分頁功能,其實只是用 CSS 把分頁的圖案畫上去而已。

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

    我先隨意操作看看,真不行只好放棄了,太困難。
  • 阿啦
  • 哈哈!放棄用 CSS 畫圖(太困難),語法部分就更...XD,直接給了一張真的圖
  • Wayne Fu
  • <1132930299220209327>(以上內容請勿刪除,從括號之後開始留言)這個解法也不錯,滿方便的。

    其實CSS語法很簡單,不難,有空可以參考「<a href="http://wayne-fu.blogspot.com/2012/10/chrome-developer-tool.html" rel="nofollow">Google Chrome 開發人員工具__調整部落格版面實作</a>」,從練習調margin開始,可以漸漸上手的。
  • Ken Lo
  • 請問怎樣預設'列出文章採標題模式'?
  • Wayne Fu
  • <5435949941519848055>(以上內容請勿刪除,從括號之後開始留言)設定預設值時,採取多數人會設定的選項較佳。"標題模式"是少數人才會使用的選項,不適合當預設值。

    如果是自己想用標題模式,自行點擊"標題模式"的圖示即可,瀏覽器會儲存cookie。
  • Ken Lo
  • <7696481799056617307>(以上內容請勿刪除,從括號之後開始留言)了解,謝謝! ^^
  • 遇見。吳奇隆
  • <6123288953415025593>(以上內容請勿刪除,從括號之後開始留言)我把全部的程式都拿掉,也是這樣~~不知哪裡出問題>??
  • Wayne Fu
  • <3542326226708057482>(以上內容請勿刪除,從括號之後開始留言)大概是你裝的那個分頁功能所引起的吧
  • 遇見。吳奇隆
  • <1869267179398531043>(以上內容請勿刪除,從括號之後開始留言)真的投降了~~我把範本換掉..然後程式全清掉,還到最原始的標籤狀態,還是不行,不知為什麼??~~><
  • Wayne Fu
  • <5621940460120249491>(以上內容請勿刪除,從括號之後開始留言)我大概知道原因了,不是跟其他小工具相衝,而是日期的緣故。你附的那個連結,該標籤的文章都是同一天發佈。你試著將發佈日期改為其他天,應該就正常了,試試看吧!
  • 遇見。吳奇隆
  • <7820636223572335778>(以上內容請勿刪除,從括號之後開始留言)可以了,真的是這個問題,剛上面那個連結,雖然同一天,但時間都有差1秒,所以就找得出來。真是太感謝了!!^^~~
  • Wayne Fu
  • <375883083277215890>(以上內容請勿刪除,從括號之後開始留言)不客氣~^^
    剛好也多瞭解了一種異常狀況!
找更多相關文章與討論