2007-03-20

標籤/搜尋頁面只列出標題 (Simplify the result of label and search)

Blogger 首頁允許你設定最多顯示的文章數量,但是,其他的地方就不一定了。像是標籤、搜尋、網頁存檔等等匯總的頁面,文章一多一點進去,嘩啦一狗票的文章就通通連內文一併列出來,預設最多會出來 20 篇左右,但如果是歷史文章存檔的匯總,搞不好上限是 999,那通通都列出來還得了!因此,我們可能希望當點到標籤、列出搜尋結果或是歷史文章存檔,可以只列出時間和標題,有需要詳細內容的再點進去觀看。

這類的 Hack 很簡單也很普遍,後面的參考文章也都有提,但是我的需求有一點點不一樣,我「只」希望在標籤和搜尋頁面列出標題,但是在存檔頁面 (Archive) 裡面還是像首頁列出原文(不然,我做那麼多「繼續閱讀」的 Hack 效果只出現在首頁也浪費了),根據我之前的文章介紹 Blogger 內的四種頁面判斷句,也做了一點點修改。Hack 的第一個步驟,同樣是編輯範本的完整 HTML(要展開小裝置範本),找到下面的這一段(如果你裝過其他 Hack,可能不是長這樣,不過,關鍵是紅色那一行):

<b:loop values='data:posts' var='post'>
  <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
  </b:if>
  <b:include data='post' name='post'/>
  <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:post.allowComments'>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:loop>

解釋一下,這是樣版用來「列出文章」用的範本,「任何」一種狀況下適用,那段 date-header 的是列出日期,而紅色那一行的意思就是「列出全文」。我們要動的手腳正是:「只在某些條件下列出原文,其他情況,列出標題就好」,這樣的修改,只要把下面這一段判斷取代掉上述紅色的那一行即可:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "index"'>
    <!-- Show article title only -->
    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
  <b:else/>
    <b:include data='post' name='post'/>
  </b:if>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>

上面這一段的意思是:當現在所在的頁面「不是首頁」,而且,PageType 為 index (標籤/搜尋) 的時候,只列出文章的標題,否則,維持原樣列出完整內文。好!這樣就改好了!(很簡單吧!)如果你是想改的是「除了首頁」以外的頁面都只列出標題(也就是存檔頁面也要只列出標題),那麼可以把上面那段的第二行改成:

<b:if cond='data:blog.pageType != "item"'>

這樣就是:當現在所在頁面「不是首頁」,而且也「不是單篇文章的內文」時,就通通只列標題。

此外,其實這個 Hack 還有很多變化型,可以更動「只列出標題」頁面的樣式,像是「只列出標題卻不含日期」(那你要把上面 date-header 列出日期那段也塞入判斷句裡),或是更改 <h3 class='post-title'> 的 CSS。如果你也有用到我 Comment Toggling 的 Hack,那麼建議你關於 Comment: <b:if cond='data:post.allowComments'> 那三行最好也塞入判斷句裡去,這樣原始碼也會比較簡潔。

本來想偷懶不寫這一篇,因為自己的樣版已經不夠「標準」了,要怎麼 Hack 有點忘了,不過剛好有網友再問,所以還是依照我參考的原文,還有自己的一點點心得,整理了這一篇。

參考文章:
Blog工事紀實-進入標籤頁面後只顯示文章標題
Blogger-Beta Hack之“简洁的搜索/标签结果”

回應: 68

Unknown 提到...

感謝你這篇教學文章解決了我昨天所問的問題!不過你好像一開頭漏了一點東西,就是一開始的程式碼要開啟「展開小裝置範本」才找的到。因為我一開始找不到那段程式,後來看了你引用的第一篇reference才發現的。一點小意見當作參考囉:D

Abin 提到...

呵呵!我有講「Hack 的第一個步驟,同樣是編輯範本的完整 HTML」,「完整」的意思就是要「展開小裝置範本」啊!(其實這個翻譯「小裝置」= Widget 我不大喜歡,哈~)
沒關係,我還是補進去了,謝謝你的意見~

禾本族 提到...

您好~~我使用您的教學,可是我的變成可以直接縮放,或是點選到下頁,但是發現縮放功能(+-)會造成頁面LOAD很久,我要怎麼才能取消呢~~麻煩您了喔

http://radiohey.blogspot.com/search/label/.音樂23事

Abin 提到...

To禾本族: 我這一篇的教學,就是「只列出標題」,我故意不做內文能夠直接縮放,就是會有你說的問題。
所謂的縮放功能,就是不管三七二十一全部 Load 進來,然後 Hide 那個區塊,即使好像已經藏起來,其實那個部分還是在 Load,因此,只要你要保留那個「縮放功能」,Load 很久的問題就沒辦法解決(除非你文章很少)。
而我這篇的主題「只列出標題」,Load 完標題就換下一篇,內文跳過,因此文章一多對效率影響很有限,也不會有 Load 很久的問題。

禾本族 提到...

站長您好

對不起我又來請教您了...@@

我申請了一個網址
www.habun.com
但是我使用轉址後
發現瀏覽器下方會出現SCROLL BAR
而且我點選我右手邊留言、標籤時
頁面開啟後就會停住不動(我有只用HACK機制,就是那個頁面基本上是由TEMPLATE秀出來的訊息)

我後來用一個假的頁面
先進到那個頁面後
再轉址到BLOG

也是一樣的情況
我用兩個網址去是(www.dadacity.com)
都是一樣結果

請問您知道為什麼會這樣嗎...

困擾我好久
麻煩你了

Abin 提到...

To 禾本族,我試了你給的兩個網址,都連不到,我猜你用的是免費的轉址服務,而且是那種 donmain name -> domain name 的那種。
這類 redirect 轉址是不適用 Blogger 這類服務的,除了認證之外,很多的 Hack 其實都不吃轉址服務這一套,除非你用的是 Blogger 支援的合法正式 Domain Name (也就是要花錢註冊購買的網域名稱),不然其他這類的轉址服務多多少少都會有類似的問題。
我之前也試過這類免費轉址服務,免費的轉址服務有些還會強制偷藏 iframe (可能是你網頁下有 scroll bar 的原因),對於這類有網址的網站服務支援性又差,所以我也才花錢去註冊自己的名稱。所以如果你不想花錢註冊網域,就只能用 xxx.blogspot.com 這樣的網址囉!轉址的問題是沒辦法解決的。

禾本族 提到...

To 站長ABIN

這網址是我購買的哩,轉址也是我跟ISP購買,一年100元那種,所以才覺得怎都無法使用~><

還有就是想請教您關於輪播功能裡面,如何將文章成線變成是隨機的,而不是輪播,因為我將依些歷史文章設定的日期都是設定很早以前,會造成很多好文章被埋在裡面,所以才想說用隨機的方式應該比較好。

麻煩你了

感謝啦

Abin 提到...

To禾本族: 關於網址的問題,如果你想做的是 Blogger 套用你自己購買網域名稱,請看官方的說明,只有這種方法才可以做(我也是這樣做的,看來並不是所有付費的服務都支援),另外,我自己買的是官方推薦的 GoDaddy!,我這邊也有另外一篇文章說明。
至於隨機呈現文章的問題,我有另外一篇 Hack,它的作用是隨機「顯示相關文章」,原理是這樣的:根據某篇文章被設定的標籤 Label,每個標籤依時間列出若干文章,最後再從這些文章裡面隨機挑出五篇顯示標題和連結出來。
根據你的需求,可以根據這一篇做一些修改,只留下隨機挑出文章的程式碼 (參考 Math.random 函示),並且修改你要輪播的 RSS 網址(站內或站外的都可以),抱歉,我可能沒有時間直接寫給你看,你要自己參考著改。
不過有一個問題比較麻煩,你提到你很久以前的文章也想要加入輪播,我看你的 Blog 文章也不少,而篩選文章的原理都是用 RSS Feed,除非你指定很大的篩選文章數量(像是 max-results=500,不過這樣會很慢、效能很低),再從裡面隨機挑選文章來輪播才做得到,不過要評估會不會因此讓你的網站 Loading 變得很慢。

禾本族 提到...

TO 站長ABIN

我現在的作法是,將我想推薦的文章另外FEED到_top這標籤中,然後我想隨機輪播那標籤內的文章,所以就不會有落落長的文章去搜尋。

因為我ㄧ值找不到方式做隨機輪播,所以才想請教您,不知道原本那個文章輪播功能是否可以改成隨機的,因為我左手邊那個文章推薦就是利用您提供的輪播功能插件。

又麻煩你了喔~~@@

禾本族 提到...

請問站長,因為標籤限制是20則,我要怎麼增加則數呢~~

Abin 提到...

To 禾本族: 請搜尋你的樣版原始碼,有類似下面這段的字樣:
<a expr:href='data:label.url'>
它的意思是顯示顯示標籤的連結,只要在後面加參數,改成這樣:
<a expr:href='data:label.url + "?max-results=100"'>
就可以增加文章篇數到 100 篇了,數字請自行調整(越大,效率可能越差)。

讀書人 提到...

感恩分享~~~我用好了!
謝謝您!

fREE2Software 提到...

To ABIN's 站長

以下代碼已加了,不過還是不能全部顯示,有沒有其他方法可達成Labels可顯示全部,謝謝啦
這個是我的blog
http://free2sw.blogspot.com

a expr:href='data:label.url + "?max-results=100"'

fREE2Software 提到...

To ABIN's 站長

抱歉啦~原來我在設定上問題~已在ok了

打搞哂 :p

Tulia 提到...

謝謝你,我用了順利成功。

匿名 提到...

安!請問如果我要讓它都只出現標題及前5行內容,那麼應該更改些甚麼? 感謝呀

Abin 提到...

To Peter:
本文的 Hack,只是單就 Blogger 的模板程式碼調整、僅出現標題並隱藏整段內文。
內文的部份想要只出現五行,有兩個問題,第一,要另外寫程式,抓出所有內文,過濾出一定的字數,讓顯示「剛好」到五行。第二,這前五行的內容,還要小心不要切到可能會有的 HTML 程式碼標籤,不然可能導致整個頁面錯亂,風險很高。
第一個問題容易解決,但第二個問題比較困難,我也希望頁面有你所說得類似呈現,如果有找到好的辦法我會在另文紀錄。

fumiko 提到...

作者已經移除這則留言。

£öü 提到...

你好,我按照你的方式改了之後,確實成功了,但我點標題要讀全文時,卻變成文章會重複2次,不曉得哪裡出了問題?

£öü 提到...

不好意思,剛才那個問題我已經解決了,但我還有另一個問題(不好意思我很煩),我的部落格不管用什麼搜尋器不管輸入任何關鍵字都搜尋不到,我現在暫時用我舊的部落格當橋樑,不然除非直接在網址列輸入網址,否則別人是找不到我的部落格的,我該怎麼辦呢?我的部落格是http://monchermovie.blogspot.com/

Abin 提到...

To Chloë:

搜尋的問題我在這篇文章裡有提過,很多人以為,只要自己建立 Blog 或是網站,搜尋引擎就「應該」馬上能找得到,那是「不可能」的。
搜尋引擎的原理是定期、不定期在茫茫網海裡「拜訪」,拜訪完將內容暫存在它龐大的資料庫裡,一旦有人要找東西,它「只」去自己的資料庫裡找,找到後告訴你連結在哪。包括透過 RSS 來做的「部落格搜尋」,原理都是大同小異。因此,新建立的 Blog 如果不增加「曝光」的機會,搜尋引擎從來沒來拜訪過你、或是拜訪頻率很低,搜尋的效果就會很差。(至於多久有效果、有多少效果,都要看搜尋引擎了)
那要怎麼辦呢?就是多發表文章、多吸引人家來看、多註冊一些搜尋引擎、登錄在書籤網站....時間一久,效益慢慢出來以後,搜尋的效果才會出來。

Unknown 提到...

作者已經移除這則留言。

Unknown 提到...

超強的Abin大您好,我使用這個功能後發現按 "較舊的文章" 連結看舊文章的話,文章也都變成只顯示標題了。

您提到的頁面的四個顯示狀態我有試過,但好像"較舊的文章"都會被看成跟按標籤一樣的狀態。

該怎麼讓下一頁的內容也保持全文呢 ?
謝謝

例如 我的blog http://blog.mediakid.org/

Abin 提到...

To mediakid:

如果你有注意到,其實新舊文章頁面切換(較舊的文章),看起來好像是單純的「上一頁」、「下一頁」,但是注意一下連結,Blogger 基本上是套用「搜尋功能」加上範圍(時間)找出來的結果 (/search/),因此,如果你套用「搜尋頁面只列出標題」,新舊文章頁面切換也會變成只列標題。
標籤功能也是一樣,它是「搜尋網頁」加上範圍限制(隸屬同一個標籤),如果要改成全文代表標籤和搜尋都會連帶受影響,很難單就「某種需求」去調整「搜尋」的顯示結果。

Gwenyth 提到...

想請問一下,
為什麼我的文章列表會出現兩次阿?

史黛西 提到...

太感謝你了,我終於可以把我的分類文章用的整整齊齊囉,第一次這麼有成就感耶,謝謝哦!!

ChiehChou 提到...

Dear Abin.

已安裝label文章列表只顯示標題(title)及擴展/收合(expand/collapse)功能,但日期(date)及回應(comment)卻無法顯示,如欲顯示日期及回應,應該如何設定?謝謝。

Abin 提到...

To J.C.
根據本文修改,post.dateHeader 在標題的前面,所以本來就應該有日期,如果你無法顯示,請先檢查是否有調整樣板。(也可以看看我參考的文章連結)
另外,關於文章本身的其他資料(發表時間、作者、回應),在 Blogger 裡面算是 Post 的附屬資料,除非你載入全文內容,不然無法取得像是回應的詳細資料。這篇 Hack 的作法只列出標題,就是避免載入全文內容,如果想不要內文、卻要該文的其他資料,這個 Hack 沒辦法做到,要另外用其他比較複雜的方法。

Rachel 提到...

hi 你好壓 !!
Blogspot這種點進一項Lable後
會劈哩叭啦列出一堆內容的情況( 尤其像我這種超愛放圖的人)
真的是非常地困擾 !
今天一度想要轉換使用無名
可是又發現去無名重開又要重新設計版面....陷入CSS地獄裡.......

我在開部落格一個月後的今天也是忍無可忍了!!
終於! 看到你這篇超感動的ㄋㄟ

請問你是不是在yahoo工作啊?
高手!
厲害!
哈哈哈

Abin 提到...

To Rachel:
Blogger 是 Google 的服務,並不是 Yahoo 的...
玩 Blog 只是興趣,如果變成工作的話,那就太無趣了~ XD

Rachel 提到...

對網路如何運作這麼了解
你對 Google 很有興趣?
應該是 網站/程式設計師?
呵呵

Abin 提到...

哈,我只是對免費、好用、又有彈性可以修改的東西有興趣啦~
以前是 Software RD,但現在已經不寫程式了,所以三不五時可以透過這玩玩新技術溫故知新罷啦~

The Lee 提到...

謝謝您的教學
非常謝謝

Unknown 提到...

Dear Abin:
昨天照著這個教學修改,很順利
唯一的問題是跟回應中提到的一樣
當屬性為search時仍是以title顯示

是否有辦法只設定lab與月份分類時顯示標題
search跟較舊(新)文章仍保持原有樣式呢?

感謝

Abin 提到...

To 野孩子:
它 label 和 search 以及月份分類都是用一樣的方式來實現的,以上面的方法,是沒辦法做出區分的。

ALAN 提到...

請教Abin兄
小弟未使用繼續閱讀的HACK
如果想讓全部的頁面(首頁 標籤 搜尋等)只列出標題
該如何修改 謝謝

Abin 提到...

To ALAN:
把我上面要修改的判斷中,倒數第二行:
<b:include data='post' name='post'/>
改成上面數來第四行就行了。

BT 提到...

Abin你好,
很奇怪,我找不到以下(回應#11),是不是現在Template改版了?
a expr:href='data:label.url'

Abin 提到...

To BT:
這個連結只要啟用標籤顯示,在樣板原始碼裡就一定有,記得「展開小裝置範本」。

AK 提到...

您好:
關於「只列出標題卻不含日期」要把上面 date-header 列出日期那段也塞入判斷句裡這段我不太懂。
是要把date-header塞到哪裡去啊...?
麻煩指點一下了,謝謝

jijiong 提到...

abin大你好: 請教我的主網頁文章數預設是5篇,但很奇怪的是,現在的首頁只跑出一篇,且,再進入下一頁的舊文章時,每一頁跑出來的文章標題件數也不對,有時3件、有時4件、還有1件的,有點亂! 試著重新儲存blogger格式的文章數,結果也不行! 請教該如何調整呢?

白花花 提到...

回樓上~~
我前幾天也有發現相同的問題,到ptt的blog版發問才發現~~
這是Blogger為了加快存取速度所頒布的(爛)政策Orz,詳情請見下方網址裡的內容
http://buzz.blogger.com/2010/02/auto-pagination-on-blogger.html

簡單來說,就是Blogger讓瀏覽器根據文章內容的HTML長度或者圖片多寡
來決定每個分頁要顯示幾篇文章,如果都是純文字就會顯示比較多篇
有放照片或是五顏六色的文章就會顯示比較少篇,由於這技術不是透過範本達成的
所以目前無解>"<

jijiong 提到...

感謝白花花的回覆…原來是官方的問題哦!! 不過,我覺得這會與系統內原本設定的「主網頁文章數」互相矛盾!! 希望官方再重新設計,我覺得很不人性!

Hans 提到...

回樓上兩位:
是啊是啊,我也發現這個狀況,都一直無解…
謝謝白花花的回覆…

啊…我的Blog都是圖片說,難怪首頁只有2篇文章…
可是人家有用官方的「繼續閱讀」捏…應該沒差吧…
希望官方能快點改回來…Orz

白花花 提到...

話說我也是有用官方的繼續閱讀,可是主頁卻沒問題說
只有點進去某分類或某Archive的時候才會有這狀況,真的很吊詭

jijiong 提到...

我剛先試把abin大的這個hack先拿掉!保留原本程式碼,結果就回復正常自設的文章數,我猜測是因這個hack與官方繼續閱讀或新功能 auto pagination 互有干擾吧?! 各位可以試試看。另外,白花花大你的blog還沒開放哦^^^??

白花花 提到...

我前天出這問題時就有把迷你組件恢復預設值 (等同拿掉Blogger hack)
但是沒有用...之後這塊就一直保持著預設值的樣子沒去動
一直到剛剛看到樓上說得之後再點進去看,篇數就正常了@@
大概是有人去跟Blogger反應,所以又改了吧????? 希望是這樣呀~~
不然我前台的站內搜尋壞好久了,找文超不方便的

唉~真不知道Blogger的工程師腦袋在想什麼
要改善存取速度的話,不會把只列出標題這個hack官方化就好唷=3=

至於我的blog...目前走低調路線所以google不到
有緣的話會再遇見的,呵呵!請不要再借Abin的版面問我了,謝謝

jijiong 提到...

回樓上: 恩…認同!! 謝謝

Abin 提到...

呵呵,樓上討論真是熱烈,不過我回來看我這裡的 page,兩位提到的狀況我都沒發現。(不過我另一個 blog、有很多遊記照片的部份也受到影響...)
其實這和 Blog 文章內容有很大的關係,Blogger 官方的出發點是,希望透過減少首頁內容的方式,去改善 loading 過久的問題,因此文章裡提到兩個規則:a. HTML 的內容流量, b. 才是你設定的首頁文章數量,從優先權來看,如果首頁資料量太大,那麼 blogger 會無視你的設定,直接截掉後面的文章。
這裡的 Hack,大多都只是隱藏內容、只顯示標題或部份文章,但實際上 page load 的時候流量還是會被照算進去(就算流量是外連的照片,一樣被算到),這對照片多一點的文章,感覺就算只列標題,一樣受到波折,不管上不上 Hack,你會發現數量上還是一樣被卡住。
目前我還沒研究規避的方法,徹底一點,就是把搜尋和標籤頁面結果都交由自己的 JS 來處理,類似其他的 Hack,自己處理分頁和顯示的問題,不過工程也不小,要試試看才知道能不能動,現階段也只能被 blogger 給限制住,對 blog 的內容和資料無害,只是顯示上數量會忽大忽小~(min:2, max: 你設定的值)

白花花 提到...

不過這個hack在Label/Archive都只有列出標題
沒有用到<data.post.body>耶....
Blogger要從何判斷文章內容有多長呀@@

匿名 提到...

AK 提到...
您好:
關於「只列出標題卻不含日期」要把上面 date-header 列出日期那段也塞入判斷句裡這段我不太懂。
是要把date-header塞到哪裡去啊...?
麻煩指點一下了,謝謝

同問.我也完全不懂.只會複製,粘貼.

jijiong 提到...

作者已經移除這則留言。

jijiong 提到...

回樓上:請試著將
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2></b:if>
這段,搬到要"新取代code那段"下最後一個</b:if>的上面

匿名 提到...

看了您的blog受益良多,想請問就這篇的教學,我的問題剛好相反,帶有閱讀更多的文章,想要在選擇標籤後,全文列出該怎麼寫?謝謝~

希锐亚 提到...

非常感谢,这篇文章对我帮助很大。

小千 提到...

感謝你..我從新手就來你這了..(雖然還是新手..)
我有在網誌上截錄你一些文章喔..再次謝謝^^

imshosho 提到...

作者已經移除這則留言。

imshosho 提到...

作者已經移除這則留言。

imshosho 提到...

您好,我想請問一下
有沒有辦法讓那些清單,不要出現日期呢
謝謝

MAY 提到...

請問如何改能讓日期直接放在標題的前面,也就是日期和標題是同一行,因覺得這樣版面會比較精簡些,謝謝!

makotomorimoto 提到...

站長 您好,
我照著您所給的程式碼做了設定。
但除了首頁外,連結至第二頁時,卻也變成是以標題方式呈現。
想請教的是,我有哪個部分設錯嗎?(有照著設成"index")
還是是其他問題,進而影響到這個呈現方式?

btw
本來設一頁10篇時,配合那個頁數的外掛是沒問題的。
第二頁照樣和首頁的呈現方式一樣。
但當我設成一頁顯示12篇時,才發生問題。
再改回顯示10篇也救不回來了。

希望站長看到這篇留言,能撥空回覆,打擾了,謝謝。<(_ _)>

makotomorimoto 提到...

站長您好,再反覆看過這篇文章幾遍後。
似乎發現了自己的問題,但仍有些不太確定。
想問的是,上面那串程式的本身就是除了首頁和存檔之外的文章,都是用標題列出?(ex:點選"較舊的文章"也是?)
如果是的話,我想我瞭解了。
如果不是,還請站長撥個空回覆,再次打擾,真的很抱歉。<(_ _)>

kkw 提到...

站長 您好,
我照著您所給的程式碼做了設定。
按下標籤後,雖然有列出標題,但只能顯示前幾篇文章的標題,

無法顯示特定標籤分類的所有文章
請問該如何修改blogger呢?
謝謝~

appleseedshop 提到...

謝謝您的分享,很受用 ^^

Lin Kelly 提到...

hi hi 站長您好,
我的問題跟樓上的樓上kkw大大的問題一樣,
我想知道如何列出某標籤類的所有文章,
不知道該如何修改blogger呢!? ^^"

管家(MUMU) 提到...

改成了!!!!!
謝謝教學提供~

Sam 提到...

很讚! 感謝分享~

Rib 提到...

感謝站長的分享給我很好的參考,不過這個方法確實不能夠只改標籤頁,他連搜尋的部分也會變成只有標題列。想要只改標籤頁,請用:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'>
<!--Label Page-->
</b:if>
</b:if>

想看效果可到我的部落格看看。

詳細說明請看這篇:
http://mystady.com/2011/05/7-blogger-page-types-analysis-code.html#label-page-type

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!