2009/10/03

Jump breaks!! Blogger 官方版的繼續閱讀(read more)功能




9月9日 blogger 官方部落格已宣佈開放繼續閱讀 (read more)的功能.設定方式很容易,也不需要自行加入程式碼,只要在寫文章時按一下 Jump breaks 鍵,就能在首頁時只顯示摘要,想看全文時,一按下閱讀全文的連結後,才連到該文章的頁面.



Blogger 日前發布了這篇文章You might as well jump裡,就宣佈了read more (閱讀全文)的功能.只是想使用這功能,還要先設定一些條件.

1. 要在 http://draft.blogger.com/裡使用, draft blogger 與 blogger 使用方式一樣, 只是draft blogger裡會有一些即將正式上線的新功能,可以搶先使用.

登入draft blogger後(使用的帳號密碼與blogger一樣), 點選 設定-->基本.


2. 在一般設定裡, 點選 新版文章編輯器 --> 按下 儲存, 不然目前還看不到 jump breaks 的按鈕.


3. 這時在文章頁面的撰寫模式下, 就會看到一個 Jump breaks 的按鈕.


4. 如果想改 閱讀全文的 文字, 可進到 版面配置中的網頁元素裡, 點選 網誌文章編輯按鈕.


5. 在這裡, 就可以更改 閱讀全文的 顯示文字.


6. 以後在寫文章時,想使用閱讀全文(read more)的功能, 只要在按下 Jump breaks 按鈕後, 就可以自動把文章切開. 看到的效果如下.


7. 在 HTML 頁面,可以看到其實是插入一行 程式碼 <!-- more -->.


8.發佈文章後, 就可以在首頁看到效果了.


這佪功能對於目前還沒加入改版程式碼的blogger而言,應該是很容易就能使用. 然而模板若是採用非blogger預設版型,且已加入其他的改版程式,有可能運作上會有些不同.

此時可參考這篇文章,做進一步修改.

參考來源:
Creating 'After the jump' summaries
You might as well jump

相關文章 :

44 comments:

◤kahyan™◢ 提到...

太棒了,之前在这里找到很多有用的功能,现在blogspot都内置了,希望赶快推出锁文章的功能,到时要劳烦skyvee你介绍了 [:

Skyvee 提到...

Kahyan,
謝謝你的留言, 最近blogger也有動作在收集大家的建議,也許很快就能看到鎖文章的功能了!:)

FLHS library 提到...

您好
無意中逛進來
因為剛玩blogger
覺得好像老是卡卡的
左下角訊息列老出現網頁錯誤

現在我遇到一個比較麻煩的問題是
我套了網路上的版型不喜歡再回來制式版型後
文章上的日期不見了
都出現undefined

就算我在設定有打勾還是沒用
不知您知道是那兒出問題嘛
打擾之處抱歉
謝謝

Skyvee 提到...

您好,
看起來,你少一段date-header, 不過我不知道你的版型是否適用,你可以先試看看.
先找到 <b:loop values='data:posts' var='post'>,在這行後面加入以下這段程式碼。

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
記得把全形<改成半形 < 喔!

Skippy 提到...

版主您好,

可否請問您,我本身的blogger常常會發生整個版面跑掉的情形。我目前是使用blogger的預設版面scribe,但是當我換版面時,常常側邊欄的一些小工具會被擠到整個版面的下方,可否請問這個問題該如何解決呢?謝謝您^^

Skyvee 提到...

skippy,您的blog不公開,我無法連進去看哩!不知道你所提的換版面是什麼意思?是指進入單篇文章時,側邊欄會被擠到下方嗎?那可以找找文章區(post) 寬度(width)的設定.

古家農場 提到...

我的BLOGGER也出現版面跑掉的問題...請你可以幫我去看一下嗎...我ㄧ直找不到問題.也試過上面的方法了..謝謝

Skippy 提到...

板主您好,

謝謝您的回答,我的問題正是您所說的那樣,可是我還是不會修正。可否請您幫我看一下呢?

抱歉我沒有公開個人簡歷頁,但請您照訪這個網址:
http://skippyho-health.blogspot.com/

謝謝您的幫忙

Skyvee 提到...

古家農場, Skippy 兩位好,

大略看了一下兩位的網頁原始碼,目前還無法確定原因,看樣子必須要跟兩位要原始碼了,如果方便的話,請提供原始碼讓我測看看.:)

Skippy 提到...

板主您好,

謝謝您熱心的幫忙,請問您說的原始碼是這個嗎?
http://www.sendspace.com/file/gnrsfq

古家農場 提到...

版主我也要謝謝你的熱心幫忙
希望你能幫我們解決這問題
感謝
http://www.sendspace.com/file/pyqvh6

Skyvee 提到...

兩位好,
目前已找到問題, 主要是因為jump-link這個blogger官方版的繼續閱讀功能,會在一些狀況下,讓文章版面出現問題,如sidebar會跑位.也就是說,如果文章中, 一整段的文章裡,<!-- more -->出現在被<div>XXXX</div>包住的情況下,很容易就會讓版面走樣.
舉例來說,我們在寫文章時,可能會習慣用粗體,黑體或改變字型大小,字體樣式,來特別標示文章中某些句子,通常會直接用編輯器上的功能或是自己下語法,如<div style="color: black; font-family: "Courier New",Courier,monospace;">這些文字這些文字這些文字這些文字這些文字這些文字</div>.
如果在這段文字中,加入jump breaks,也就是<!-- more -->, 如以下
<div style="color: black; font-family: "Courier New",Courier,monospace;">這些文字這些文字這些文字這些文字<!-- more -->這些文字這些文字</div>.
那這時, 版面就會出錯了.sidebar會移到文章下方.
如何確定是這問題呢? 進入單篇文章閱讀時,版面是正常的, 但是在首頁時就會有問題.
解決方式
1.不用jump breaks這功能
2.在文章的html頁面,找出<!-- more -->被埋在<div>XXXX</div>的段落,先讓前一個<div>結束掉,也就是改成<div style="color: black; font-family: "Courier New",Courier,monospace;">這些文字這些文字這些文字這些文字</div><!-- more --><div style="color: black; font-family: "Courier New",Courier,monospace;">這些文字這些文字</div>.
    這樣就行了。請參考。

Skippy 提到...

謝謝板主的幫忙,您真是太厲害啦.....完全就是您說的那個問題,依照您所說的方式,我已經解決問題啦!!太感謝您了^^

古家農場 提到...

真的很感謝版主...你幫我解決問題了!
希望有機會可以再跟你連絡..謝謝.
Skippy你也成功了啊.恭喜你

Skyvee 提到...

兩位不用客氣,要謝謝你們提出來,大家能一起研究,有成功我也很開心呢! ^^

光.軍 提到...

板主您好,

我試過修改HTML及把BLOGGER轉到"新版文章編輯器"而使用"READ MORE", 不到三秒鐘BROWSER就馬上強行關閉.

另外, 本來我的BLOG一版設定為顯示五篇文章, 最近發現不到三秒亦強行關閉, 不知是否BLOG內EMBED了歌曲而出現這個問題, 以前這個情況是沒有發生過的.

請問可否提供意見?因為這兩個情況發生令我有點想放棄寫BLOG了.

Skyvee 提到...

光.軍您好,

請問您用的是IE嗎? 通常會出現瀏覽器強行關閉的問題,都可能是語法的問題,不過因為每個人用的blog版型不同,所以我目前無法模擬出您的狀況,不能找到您是什麼問題?

另外,您說五篇文章就會強行關閉, 請問一下,那您試過4篇文章嗎?如果四篇文章沒問題,那可能是第五篇文章裡有語法錯誤的情況..只是猜測而已.可能也要您試試才行.

其實blog寫作是很有意思的,千萬不要因為這些問題而心煩啊!

光.軍 提到...

Skyvee您好,

謝謝您的回覆. 我用的是"IE", 我試過設定一頁為五篇, 三篇都被強行關閂, 最後唯有設定為"一頁一篇"才不致發生問題. 剛過去我試試再改為"一頁五篇", 第一頁及第二頁都沒問題, 但到第三頁的時候, "強行關閂"又再次出現了... 真是惱人的事情啊!

另外發現一個問題, 如在文章中便用"READ MORE", 它會將文章內的圖片移位, 無故刪除一部份文字, 或者不能使用. 還有"READ MORE"不是每一篇文章都能使用..

希望不介意我這麼的長篇大論, 只因為想瞭解及解決現有問題而已.

謝謝您的幫忙

Skyvee 提到...

光軍您好,

請問您用的是IE7嗎?

我用Firefox及IE8瀏覽您的blog,是正常的. 但在 IE8,blog開的比較慢, 但是沒有出現錯誤訊息.查了一下google,有看到這類的討論,有些CSS會與IE衝突.

Skyvee 提到...

比如說, msdn blog 也有提到部份. 不過究竟是哪些CSS衝到,真要花時間去找!網頁右下方的狀態列,不知是否有出現"網頁錯誤"的訊息?如果有的話, 不妨點入看一下,是哪一段語法出事了!

光.軍 提到...

Skyvee您好,

我用的是"IE7". 這兩天發現"強行關閉"的情況不是常常發生, 但是晚上發生的比較多, 當停留在"第三頁"五分鐘左右就不行了.

當使用"READ MORE"這功能后再按發報文章, 它沒有任何語法錯誤指示, 但是它(有時)就不能正常使用. 現在你看見我用到"READ MORE"的文章就是行運才成功的..

謝謝幫忙

Skyvee 提到...

光軍,
你的sidebar及首頁,同時播放多首歌曲,有時候是會造成網頁要開啟,需要較多記憶體或時間的.還是您先調整,將歌曲放在read more之後, 這樣點入單篇文章進去時,再聽歌?
read more如果不能用,可以參考第12個留言,看是否能解決?
不過點入您的繼續閱讀後, 網頁標題後,會掛上一堆#more#more....哩!好奇怪~

光.軍 提到...

Skyvee您好,

我也懷疑是"貼歌而所需要較多記憶體"的影響, 所以開始使用"read more"這功能, 現在一頁放五篇暫時還可以. 但是如果我在文章用"read more", 它總會將內容搞亂, 更差的會在"無警告"的情況將文字刪掉..


我把HTML放到這裡, 煩請指教一下, 謝謝!

http://keepxthexfaith.blogspot.com/2009/12/my-html-updated-on-dec-09.html

Skyvee 提到...

光軍您好,

我想有可能與原始碼無關, 有可能是在用read more時,因為html碼互相干擾,所以才會有內容混亂的問題.就是在隱藏的文字裡,如果有未結束的html標籤,就可能發生格式錯亂的問題,您可以檢查一下發生問題的文章格式,用html碼檢視看看.

光.軍 提到...

Skyvee您好,

謝謝您

may 提到...

板主你好,不好意思,我是路人May,想請問一下你blog最上面的5個小標籤叫什麼(HOME,部落格改板,部落格小玩意兒....),該怎麼去掉呢?因若不是用官方模板,一般下載到的模板最上面通常都會內建這樣一排的小標籤(HOME , POSTS RSS....),我不會設定,也不知道怎麼改,所以就一直沒辦法換喜愛的模板,覺得還滿可惜~~先謝謝了!

Skyvee 提到...

May您好,

可以在版面配置,網頁元素下, 看到blog(標題)標頭下,應該有一列網頁元素. 可以直接移除.不過每個範本寫法可能不同,不是都可以通用喔 !

::jouk:: 提到...

您好,

搜尋問題時闖進來。
請教一下,我要上傳影像,可是為甚麼我的功能表上沒有
“video icon” 反而是一個“jump break icon”,所以要怎麼才能上傳我電腦上已經有的video 呢?

Skyvee 提到...

jouk您好,
您要先將編輯器設為新版的,可以在設定-->基本 的頁面下方,"選取文章編輯器"的地方,選'新版文章編輯器",就可以看到較多功能了.

光.軍 提到...

skyvee您好,

不好意思想請教一下, 最近BLOG內的MEDIA PLAYER不能正常播放, 每次按"PLAY"鍵時它總說"不支緩"這個信息, 可以幫我查一下是什麼問題嗎?

這是我的LINK, 謝謝。
http://keepxthexfaith.blogspot.com/

Skyvee 提到...

光軍您好,
我試了一下, 你放在 myotherdrive 的那一首mp3, 必須要登入網站後才能播放, 也就是說直接透過mp3所在的網址播放,而你放在其他地方的mp3,就沒有這個問題.你要不要試看看把放在別處的mp3,放到文章中來播放看看?

光.軍 提到...

Hi skyvee,

先謝謝你的回覆, MP3放去myotherdrive那邊一直"不用登入"才可播放的, "不支緩"的情況在本星期才發生, 可會是我的BLOG的HTML CODE亂了才有此影響? 另外放去"entertonement.com"的MP3就沒這個問題發生。

"你要不要試看看把放在別處的mp3,放到文章中來播放看看?"<= 你可有一些HTML CODE給我試試看嗎?

很感謝你的解答及意見, THX!

光.軍

Skyvee 提到...

光軍, 請問你是使用myotherdrive的免費帳戶還是pro? 如果是免費帳號,在myotherdrive的網頁上有說明,如果是free的帳號,檔案是無法外連的,你是多久之前有測過,可以播放?

我的意思是,你可以直接把放去"entertonement.com"的MP3的HTML碼,取代myotherdrive的程式碼,試看看能不能播? 如果可以運作正常, 代表你blog的程式碼沒有問題.

光.軍 提到...

Skyvee您好,

想請教一下有關最近我登入BLOGGER後, 它總是出現這句提示"您的瀏覽器已不再支援 Blogger,Blogger 的某些功能將無法運作,您可能會遇到問題。如果您遇到任何問題,請試用 Google Chrome。| 關閉", 請問"BLOGGER"現在是否只支援"GOOGLE CHROME"? 謝謝回覆.

光.軍

Skyvee Tsai 提到...

光軍您好, 請問您是不是設成新的blogger管理介面? 似乎有些blogger會發生這問題, 變成無法登入blogger.建議您先用Chrome, 將blogger管理介面換回舊版的, 就是登入後, 在右上角有一個 齒輪狀, 點下去後就能看到 還原舊版的blogger, 先換成舊版, 不知道這問題是怎麼回事? 我再找看看是否有其他方法? :)

Skyvee Tsai 提到...

對了, 光軍, 請問你的瀏覽器版本是多少? 我是用Firfox 8.0, IE9, 沒有遇到這個問題.不知道是否跟 瀏覽器版本有關?

光.軍 提到...

Hi Skyvee,

謝謝您快速的回覆, 我今天用另一檯PC可以登, BLOGGER真的自動把我"舊有的設定"轉成它們的新版面, 那麼? 我是否在那個介面把它轉回"舊版面"呢?

用過那個"新版"真是很不USER FRIENDLY, 本以為可以正常使用, 回到常用的一檯PC, 登入後又是出現這個提示"您的瀏覽器已不再支援 Blogger,Blogger 的某些功能將無法運作,您可能會遇到問題。如果您遇到任何問題,請試用 Google Chrome。| 關閉"。

我用的是VISTA / IE7, 謝謝您的幫忙, 希望有別的辦法可以再正常登入BLOGGER, 不然就是為了BLOGGER而改用"CHROME"?? 這個真是太霸權了!

Skyvee Tsai 提到...

光軍您好,有沒有出現error code? 是否可以貼上error code?

我自己還是用舊版的, 不會被自動轉成新版面呢? 你可以先用另一台電腦看能不能設回舊版的.

我也不愛新版的工作介面. :P

光.軍 提到...

Hi Skyvee,

非常感謝您的幫忙, 我在另一檯PC把那個"新"介面轉回舊有的那個了, 現在可以重新發文章, 可是BLOG的面板照片就被改到不成比例. 唯一慶幸是"可用"...

不好意思常常要麻煩您, 聖誕節及新年快到了, 祝福您MERRY X'MAS & HAPPY NEW EAR~

PS: 那個新介面絕對不好用, 那個更新不是為了BLOGGER, 而是為了GOOGLE自己能把BLOGGER的所有文字及圖片放到網上而已...

光.軍

Skyvee 提到...

Hi 光軍,
不用這麼客氣, 也沒幫上什麼忙. 那個新介面看來不是很受歡迎, 希望google 能聽到大家的聲音.^_^

謝謝您的祝福, 也祝您 有個美好的聖誕假期!!

香香 提到...

你好!我是超級笨新手,想請您指點~在改版面時,我的部落格不見了,螢幕上方顯示:您的瀏覽器已不再支援 Blogger,Blogger 的某些功能將無法運作,於是我聽從建議,下載Google Chrome,結果更令人頭疼,還是無法看見之前設計好的版面,只看到自己的兩篇文章~~可否指點該如何才能恢復!謝謝!

Skyvee Tsai 提到...

香香您好,
很抱歉, 這麼晚才回覆, 看至您的部落格看, 文章己都出現, 應是已解決問題?

Ginger Chen 提到...

板主您好:

最近使用google 推出動態介面

照您說的方法安插 jump break

在閱讀時, 仍然無法作用.... 是新介面問題嘛??

以下是文章連結... 可以幫我看看嘛? 大感謝> <


http://yichun-chen.blogspot.tw/

Skyvee Blue 提到...

您好,
您要不要直接使用 html 語法, 在寫文章時, 切換到 修改 html 的功能,然後在想隱藏的段落前, 加入一行 <!--more-->
PS 由於 blogger 有限制特定語法, 請把< 改成半形文字 <

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.