2009-09-23

官方版「繼續閱讀」(Jump Break Link)

才 Po 完一個新功能,沒多久又來一個,這次是幾乎大部分人都會用的「繼續閱讀」功能(官方叫它 Jump Break)。沒錯,這又是 Blogger 獨漏的功能之一,其實我在一開始玩 Blog 沒多久,就做了類似的 Hack:「首頁長篇文章的收合」,顧名思義,主要是做在首頁的一個修改,有些文章篇幅太大,一旦讀者連到首頁,多篇文章過多的文字和大圖擠在首頁,在閱讀和載入時都很花時間,於是很多 Blog 系統提供了類似文章摘要的設計,在首頁只顯示一部分內文,如果讀者有興趣,再點「繼續閱讀」的連結跳轉該文章的完整連結。因為當時 Blogger 不支援,所以大部分做在 Blogger 的 Hack,顯示在首頁的並不是真正的「文章摘要」,而是仍載入全文、透過 CSS 的手法隱藏掉部份段落,讓版面上比較精簡,讀取上稍稍變快(因為沒顯示出來,但還是要全載入),所以我從來不叫這類 Hack 為首頁摘要或是繼續閱讀,因為原理上是透過「隱藏」的手段顯示部份內文。也因為這樣,我之前的 Hack 才能夠提供兩種模式:一種是動態收合 (id=detail,點了連結馬上在首頁展開),另一種才是繼續閱讀 (id=fullpost)、點連結跳轉完整文章。這次官方提供的「繼續閱讀」功能,作法是在想分段的地方插入程式碼,當首頁讀到這個標記,後半段內文就都直接「不載入」,這和我 Hack 的 CSS 收合隱藏作法大不相同(雖然畫面上看起來很像),但這才是正確、有效率的「繼續閱讀」,也是一般 Hack 所做不到的。

此功能一出,網路上的教學和介紹文章也蜂擁而至,不過我第一次要試用,卻沒有人家講的那麼簡單。首先,人家說有個「插入 Jump/Break 指令」的圖示在編輯工具列,我卻看不到!除非登入「Blogger Draft」,不然那個功能圖示也出不來。原來是要先到後台的「設定」、「基本」最下面,「選取文章編輯器」時切換到「新版文章編輯器」,這樣才看得到那個圖示(新版編輯器的功能說明在此)。有了那個圖示,代表你的編輯器可以直接插入用來做「繼續閱讀」的程式碼啦!

要先套用「新版文章編輯器」

編輯器才會有插入「繼續閱讀」標籤的工具圖示

受限於文章發表的介面,Blogger 沒辦法像部份 BSP 提供的辦法,將文章發表分成「摘要」和「內文」兩個區塊來寫作(摘要就是只顯示在首頁的部份,摘要+內文是完整文章),作法是發表新文章時,透過插入 Jump 指令的圖示,或是編輯文章原始碼,手動加入摘要和內文的分隔語法也行(語法:<!-- more -->),就可以在文章內識別出摘要的段落了。如果覺得「閱讀更多>>」這個字樣太醜,也可以到「版面配置」、「網頁元素」的設定頁面,編輯「網誌文章」的屬性,這個字樣內容就可以修改了。

插入 Jump Break Link 以後的編輯畫面,會有一條明顯的分隔線

如果不想用預設的「閱讀更多>>」字樣,也可以自己修改

問題又來啦!有了「插入跳行」圖示,或你手動插入分隔語法,甚至也改了「閱讀更多」的字樣,怎麼 Po 了文,還是只有「摘要」出現在首頁,繼續閱讀的連結根本沒出現?老問題,如果你和我一樣 Hack 過程式碼,因為原始碼被動過,Blogger 可不敢貿然動你的 Code,所以這個新增功能所需的代碼並不會被插入樣板,這要靠自己手動補進去啦!檢查一下樣板原始碼(展開小裝置範本),先找到顯示內文的主要標籤(這句應該只有一個地方,如果你有用過其他 Hack,請視自己的狀況斟酌修改):

<data:post.body/>

在內文的後面插入顯示「閱讀更多」字樣標籤的程式碼:

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
  </div>
</b:if>

上面這段程式碼的意思是,如果這篇文章內有 Jump Link (也就是繼續閱讀的程式碼標記),於是在文章的最後放上該文章的連結網址、套用 CSS class=jump-link、顯示文字變數 post.jumpText (就是上面提到可以改的「閱讀更多>>」字樣)。也因此如果對這個 Jump Link 的 CSS 樣式不滿意,也可以在自己的樣板裡(</style> 標籤前面),加入這個連結的樣式定義,像我用的範例類似是這樣(靠右、有框):

/* Style for Jump-Link */
.jump-link {
  float: right;
  border: 1px solid #333333;
  background: #222222;
  font-size: 8pt;
  margin: 0;
  padding: 2px 10px 2px 10px;
}

以上可以依照自己的需求樣式去修改(如果要插入圖示,也可以直接在字樣標籤的程式碼裡 <data:post.jumpText/> 前後插入圖示連結)。

到此我們有了新版編輯器插「繼續閱讀」的編輯圖示,解決「繼續閱讀」連結出不來的問題,甚至也能自訂連結的樣式,官方版「繼續閱讀」的功能在一般改過樣板原始碼的 Blog 在套用上應該都沒問題了!最後我想麻煩的只剩那些過去用過收合 Hack 所發表的文章,當然它們沒機會再出現在首頁、但如果有用其他 Hack 顯示在搜尋或存檔的列表,可能多少還是要檢查一下,確保完全沒問題後才去移除掉文章收合相關 Hack 的程式碼。如果沒有要用到「動態收合」的效果,那麼這個官方版的「繼續閱讀」功能,不管在效率、操作和使用上,都比坊間任何類似的 Hack 來得好,只希望 Blogger 還有這類由官方版來實現比手動 Hack 更棒的功能,拜託趕緊都釋出,即便過渡時期我原來的 Hack 會失效或需要調整,至少更人性化、更有彈性的操作和閱讀環境,都是大家所樂見的~(本文已經套用新的「繼續閱讀」啦!不過透過 RSS 閱讀的看不到,請連到我 Blog 首頁才看得到..)

不瞭解 Blogger 的人,別再說 Blogger 只有自訂的彈性,一般該有的 Blog 功能它都已經具備,甚至更強更好用了(除非手賤和我一樣亂改樣板,不然套用官方樣板的還能享有無痛的各種功能升級..)~

回應: 24

Housing 提到...

感受的到其實blogger已經在慢慢與人更貼近了,只是就像您說的該釋出的還是要盡快,不然跟一些hack衝突,再來修正其實蠻麻煩的,尤其又是一些本來就應該有的基本功能..共勉之啦..(一個blogger的死忠..orz)

riceone 提到...

太常改的下場就是當官方版支援時得再手動改回很麻煩,但這也是Blogger的樂趣阿

Davin 提到...

Blogger真的一直都在進步,希望不久的將來...
除了老外愛用,華人也都會喜歡這平台。

阿達瑪醫生 提到...

謝謝Abin大大的詳盡說明
分享一些使用此功能的經驗

我是用在BTemplates下載的版型,也裝了幾個前輩心血結晶的hacks
一開始用blogger這個新功能
我遇到的問題是: 整個版面會跑掉

因為沒經驗,搞不清楚問題出在哪邊;試著移除幾個hacks來找問題
後來才發現是因為用了這個繼續閱讀功能

試了幾個方法,發現好像跟我文章本來打在word後再直接貼到blogger之文章邊及介面有關;這樣會有很多html語法的錯誤。不要用這種方式打文章,問題就解決了

Abin 提到...

To 阿達瑪醫生:
你提到的編輯方式有一個很大的問題,因為 Word 本身也是 xml-based 的編輯工具,意思是你編輯的文章,背地裡的原始碼還是由一堆標籤組成,如果直接貿然貼入 Blogger 的一般編輯器,這堆標籤和標準 HTML 標籤可能會衝突,導致版面錯亂或 Hack 失效。
我自己是用 Google Doc 當編輯器,因為它的文章可以轉成 HTML 原始碼、然後我再把原始碼貼入 Blogger 的 HTML 編輯區,這樣可以避免編輯器亂塞垃圾標籤在文章裡,也可以避免你碰到的狀況(不過還是要手動檢查調整)。

TinTin Deo 提到...

板主您好...有個問題困擾我很久,就是意見,標籤,張貼者那個部分,區塊一直無法移動,參考了你之前的說明,移動程式碼,但怎麼移語法都是錯誤(汗),移動
data:postLabelsLabel/的話,頂多是把標籤移到上面去,但標籤的分類文字卻停在原地...不知可否請板主幫我看看問題在哪裡,

我想把標籤(也就我網頁中的分類)放在第一列的最右邊

順序是 發表於 > 留言 > "分類" >快速編輯,感謝您

Abin 提到...

To TinTin Deo:
首先,你的問題和這篇文章標題無關,如要提問可以 Po 在留言板
其次,你移的 data:postLabelsLabel 只是個顯示用的字串,整個分類標籤的內容是 <span class='post-labels'> 到 </span>中間那些行的程式碼(有 if 判斷、有 loop 迴圈),要移動的話要整段搬走。
要知道,也許你在畫面上看到「發表於」、「分類」或許只是一小句,但樣板原始碼裡可能是一大段的程式碼在轉換和計算產生的動態結果,從變數名稱、span 區段,才能看出實際上那個資訊是由哪些語法產生的。

主夫 提到...

ABIN版主,

看您多年來改善 blogger 的努力與用心,十分敬佩。想借您一角舒張個人的看法和想望,更希望版主等高人能從而編寫出更完美的繼續閱讀功能僅惠大家。

我只會一些css,對xml並不懂精通,當然不知編纂當中的辛苦所在。但我個人挑剔的認為,blogger新加增的「繼續閱讀」功能,只是趕潮流應付應付使用者,新意則不多見。

我之所以這麼說只是因為blogger的繼續閱讀只能展示文章開始的部份,隱藏下文,而不能在文章裡選擇精彩部份展現。
相信所有的人都知道,文章的精彩段落絕不一定局限在開始部份,只靠開閤文章的起頭幾句(段)實在難以吸引雲遊過客。反之,如果作者有稱手工具,能在文章裡自由選取精要的部份來「掛」在標題下,相信「文宣」效果肯定不凡。

謝謝。

Abin 提到...

To 主夫:
如果你接觸過夠多的 Blog 系統,會發現,大多的 Blog 在首頁大多也只採用文章摘要的方式,吸引人家去點入全文閱讀。
您提到只想顯示「中間」的精彩段落,不只是 Blogger,我想大多的 Blog 系統都不支援這樣的特殊需求,不過我之前做的 Hack 「文篇文章收合」,只要在要隱藏的段落前後加入 span 標籤,可以支援隱藏一到多個段落。
另外再注意一點,如果你專注在寫作,首頁如果限定只顯示十篇文章的話,其實兩週前寫的文章就不會出現在首頁了!也就是,單篇文章這個「繼續閱讀」或「長篇文章收合」的效果大概只能有兩週(一天一篇、兩週十四篇,首頁只顯示十篇就看不到了),什麼「文宣」和吸引讀者如果要靠「首頁」,還不如多重視一下內容、或是文章在搜尋引擎裡的曝光率,這樣才能在茫茫網海中,讓人有機會看到你的文章「全文」,首頁內顯示哪些「摘要」,其實沒那麼重要。

提到...

請問您是否知道如何將blogger「單一文章」點入後,變得沒有日期標示、也沒有發文者和發文時間,
甚至是在該篇文章隱藏側邊欄呢?
我主要就是要將我網誌中ABOUT、GALLERY、LINKS、CONTACT這四個橫排連結到的文章,
變得沒有標題、日期標示、發文者和發文時間、側邊欄~(就是只剩本文啦~)
如果您了解的話,希望不吝賜教!謝謝!

Abin 提到...

你提到的問題是大工程,當然 Blogger 都做得到,首先你要很清楚 Blogger 的樣本架構,以及點入一文章時樣版的切換判斷(可以參考這篇文章),如果上面兩篇文章都看懂,自己就能改了(反正就是點入文章,隱藏掉整個 sidebar-wrapper)。
至於日期標示、發文者、發文時間,這個你在管理介面的「版面配置」->「網頁元素」->「網誌文章」-> 「編輯」頁面裡,自行勾選能決定顯示與否。如果你要點入文章後才消失,一樣在顯示這些資料的前後加上 if 的判斷句,就能藏起來了。

提到...

感謝回覆~^ ^ 我會試著研究看看的~

IAN 提到...

Blogger 又推出 pages 的功能了 http://goo.gl/Drb6

kimihu 提到...

不知道blogger是否可以做到......
顯示每篇文章被瀏覽的次數紀錄ㄋ ?

buythecow 提到...

等了這個功能很久了!!

mrbeartw 提到...

版主您好
請問有方法能夠做出「列出兩個標籤交集的文章」嗎?
比如說有標籤1和標籤2
能夠列出包含標籤1和標籤2的文章嗎

Victor 提到...

大感謝!!開頁變好快~讚!!

Rachel 提到...

大大地感謝分享!
之前瞄到新版文章編輯器時
都很懶得去了解
這才發現原來是Blogger遲來的文章摘要顯示功能啊!
不過新版編輯器的文字顏色選擇都好醜喔.....
濛濛的藍濛濛的綠
sigh.....

JHksem 提到...

抱歉有個問題想問一下
若使用「繼續閱讀」的功能,點選「繼續閱讀」後
新開出的頁面,會將插入「繼續閱讀」語法的下一行做為顯示頁面的第一行
但我覺得這樣畫面跳來跳去的很亂
所以,想問一下,該怎麼修改
才能像您的blog一樣,點了「繼續閱讀」後
新開的頁面還是從頂端開始,而不會從一半的地方開始呢?

表達得有點亂,希望您看得懂^^"

Abin 提到...

To JHksem:
會跳來跳去是因為官方的語法裡有指定「錨點」(Anchor),也就是多了一句 #more,以上面的範例,原始碼是:
a expr:href='data:post.url + "#more"'
只要把那個拿掉就行了,變成
a expr:href='data:post.url'

JHksem 提到...

謝謝你:)
每次遇到問題都可以在你這邊找到答案
真的真的很謝謝你無私的分享

Martin 提到...

我在使用了「繼續閱讀」的功能後,造成界面亂跳的情形.
看了上面的留言後,也改成a expr:href='data:post.url' ,問題就解決了!

非常感謝您寫的這篇文章!! 感恩~

Jchou Chung 提到...

您好,請問這個官方版的Jump Break可以套用在標籤(tag)分類頁或blog存檔(archive)頁嗎? 謝謝。

涼二 提到...

請問一下
我的文章摘要處沒有辦法自動斷行
這個問題有辦法解決嗎?

在CSS上加了word-wrap: break-word;也沒有辦法。

張貼留言

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