Nov 15, 2006

Blogger Beta 中 Read More 與 Archive 只顯示標題 作法

從 referral 中發現有人在搜尋 Blogger.com Beta 改版後 Read more 與 Archive 只顯示標題的作法,我是「遵循 Blogger 古法」的邏輯再配上新系統內建的語法後,自己摸出來感覺比較簡潔的作法 ,不過原來早有在 Blogger.com 架站的網友公開了其他的作法。
首先在 EDIT HTML 頁面中點選 Expand Widget Templates 後,在</b:skin>標籤後加入下列區段:
..........略
]]></b:skin>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if>
在語法中搜尋 <data:post.body/>,原本的樣子是:
<p><data:post.body/><p>
改成:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<data:post.body/>
<br/><a expr:href='data:post.url'> read more... </a>
</b:if>
加<br/>是為了讓 read more 接本文時可以斷行,寫文章的時候,只要把想要隱藏的文章區段用<span class="fullpost">...</span>包起來即可:
本文.....<span class="fullpost">(本文要隱藏的部分)</span>
收工。
用這個方法跟網友所提供以 Java Script 一樣的地方是,使用者都要自己下語法去包要隱藏的文字部分;不一樣的是這個方法只用系統平台所提供的 IF/ELSE 來做,簡單易改容易變化,平常在編輯 Tamplate 時沒有展開 Widget 是不會看到多餘語法的,編輯 Template 的時候比較簡潔之外,輸出頁面的檔頭也比較簡潔,另外是內文的部分而非區塊的部分儘量使用 span 標籤與 class 層級設定,且 Blog 文章主要都以文字呈現的話,檔頭的 Java Script 越少速度一定越快,尤其像我現在使用 56K Moden 撥接上線... CSS 設定可以跟使用者以前依照 Blogger Help 教學所做出來的設定相容,所以升級到 Blogger.com Beta 後其他舊文章一樣有 read more,不用回頭一篇一篇改。

另外我也試過如果要在Archive 中只顯示標題的作法,這也是我所說簡單易改的地方,只要在同樣的位置改成:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<data:post.body/>
<br/><a expr:href='data:post.url'> read more... </a>
<b:else/>
<br/><a expr:href='data:post.url'> read more... </a>
</b:if>
</b:if>
即可直接二合一,Label 中還可以看到沒有被隱藏的本文,知道文章的內容在講啥,不過這樣就變成在 Archive 頁面中完全沒有本文(文章都只剩下標題而已),減少被搜尋引擎搜尋到的機會,不建議用;如果要連 Label 都要設定成只出現標題,可以直接去參考網友寫的教學。

原本正在試做月份雲跟標籤雲,但是看到有人已經將作法放了出來(Phydeaux3:Code for Beta Blogger Label Cloud),我也懶得試了~請直接參考即可~:Chagg's 嘴砲日記將Blogger Beta的Label作成Label CloudBlogger Beta讓Lable及Archive頁面只顯示標題Blogger Beta讓Lable及Archive頁面只顯示標題

42 comments:

smantou said...

關於Read more, 之前參照一些其他用java的方法都行不通, 很洩氣!! 謝謝你提供這個方法, 終於把 我的blogger 折疊起來了, 但是發現一個小問題, </span> 會在</p> 或是<p> 之前結束, 如果文章裡因為先前的編輯有用到換行 </p>或<p> 就會出現折錯地方或是沒折到的狀況, 不知這算不算是bug, 不好意思, 我是新手, 也不太懂網頁設計的語法, 如有冒犯, 請見諒, 謝謝

Muser said...

到「設定\格式」當中將BR那個功能取消掉,之後你在輸入文章後 Enter 換行就不會用 P 段來處理,要空比較大的段落就是兩次 enter(兩次 BR),這樣就不會遇到 span 斷在錯誤的位置。
而我則是整篇文章打完之後,才進 HTML 編輯中決定文章要從哪裡開始折疊,這樣折疊起來才會好看,你沒發現我的文章長短都不一樣,但是都算得上是整齊美觀嗎?我都是這樣用的~:P

Muser said...

這是我發現另一個使用 JavaScript 且速度表現不錯的方式:Blogger Beta:繼續閱讀

Muser said...

小技巧:
當你在使用 read more 功能的時候,
原本是:

開頭
<span class='fullpost'>
本文
</span>

會變成:

開頭
...
Read More

如果改成:

開頭<span class='fullpost'>
本文
</span>

就會變成:

開頭...
Read More

-------------------
這樣就更有 read more 的感覺了。

Emily said...

您好:謝謝您提供這個方法 我有個問題 若寫的文章很短 不需要隱藏時 用這個程式改了之後 還是每篇最後會出現read more. 要如何修正

謝謝

Muser said...

一旦使用就會每篇都出現 read more,沒得修正,要修正就是不要用這個功能。

flower said...

Muser 您好,
請教您一個問題,
我要怎樣設定才能讓Archives目錄不會展開呢?
就像您首頁一樣,Archives只顯示年月份而不展開主題?

Muser said...

在編輯網頁元素的頁面修改 Archive 那個網頁元素就可以改了
0.0

flower said...

看到了...^^///

謝謝哦..!!

Iris said...

Muse:

This article offers solution for what I am confused about. However, i tried, but could not find data:post.body inisde my template. I am very naive about any code. Just want my article looks concise and neat. Help. Thank you

iris

Muser said...

At first, make sure that your blogger's template is New type or Classic one. If your template page has the "Customize Design" function, upgrade it.

(a)Get into "Layout/Edit HTML" page
(b)Check "Expand Widget Templates" on the top-right of the editing area.
(c)Focus your mouse in the editing area, search (CTRL+F) "data:post.body" & you'll see it.

Iris said...

Muse:
Thank you. Mine blog layout is beta version.
I have done it.
However, the "read more" message shows up on the bottom of every post, but I could not use the code you mentioned (span class=fullpost span) to hide the rest of my post.
Help, I have been spending the whole morning fixing this problem, but nothing changed.
Frustrated.:((
Thank you again for your share.
iris

Muser said...

You can't use compose mode to insert the code when you edit your article.

If you are sure that you have done this hack without any mistake, after editing the article you need to turn the edit mode to "Edit Html"(not compose mode), insert code like this:
-------------------
part of the article you dont want to hide
<span class="fullpost">
part of the aticle You WANT TO HIDE
</span>
-------------------

If you still get problems in using this SIMPLE hack, check other widgets you use or other hacks you use or you must get some mistakes without others know.(How can I know?)

You can try to do this hacks AGAIN from the original clean template code:
1.Get into Layout/Edit HTML pages.
2.Click the links "Revert widget templates to default" on the buttom-left of the edit area.

After that, check this official tutorial & follow the steps carefully.

Iris said...

Dear Muser:

Thank you for your patient and prompt reply. I did the Html editing on my powerbook and turned out I could not hide the article. But magically, later when I went to my office and saw the editing results came out perfectly on my PC. Every post was wrapped nicely. For some reason I dont understand, it does not work on mac.
Thank you so much.
iris

ARki said...

您好,請問一下,如果我是在"版面配置"->"新增網頁元素"中的"文字"那一個欄位裡面,是否也可也使用Read more的功能呢? 要怎麼做呢? 不好意思,麻煩您啊!感溫感溫!

Muser said...

這個種問題太怪異,根本不知道怎麼回答;要在文字欄位加READMORE ,問題是你要跳去哪一頁?已經預設要去哪一頁不就直接加HTML的LINK就好了?
你看有誰這樣做然後去問那個人可能比較快...這種問題很像是這是一篇車門修改教學,結果你要在引擎蓋上面加車門一樣...

ARki said...

呃,原來這樣做是很怪異..@@"(三條線中...),真的是見笑了,不懂的我被抓包了,歹勢歹勢,請多多包涵!歹勢歹勢...

ARki said...

啊,驚到忘了說謝謝,謝謝!謝謝!...^^"

Jonas said...

不好意思~我還是看不懂ㄋ!我對語法一竅不通~可是我正想要把我網誌的文章變成只出現標題,文章內容點選"Read More"這個功能,不然一上我的網誌,我的每篇文章都是展開來的....這是我的網址:http://watanmahon.blogspot.com/ ...可以請大大再簡單一點的教我嗎?謝謝

Venus said...

您好,我最近剛用這個部落格
看了好多網路上的教學還是理不出個頭緒
不知道該怎麼樣設計
看到大家的版面都很漂亮
也很想將自己的版面做些修改但卻不知道該怎麼用?
為什麼我打出的文章不能換行?而是一直連在一起?
CSS的語法到底要去哪裡變更呀?
語法要怎麼修改?
如果要首頁只顯示摘要是不是在每篇文章裡面就要加語法?
還是可以在某一部分加上特定語法就可以?

我要怎麼樣才可以換我的版面?
為什麼我首頁的地方會有什麼edit me的連結?
我該如何取消?
我每篇文章中都有Subscribe to Post Comments [Atom]

<$I18N$LinksToThisPost>: <$BlogBacklinkTitle$>
<$BlogBacklinkSnippet$>
<$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$>
Create a Link

<< Home
這是什麼東西?可以取消嗎?要怎麼用?


我現在已經快被這個搞的一個頭兩個大
看了網路上很多教學,
始終找不出方向
反而走入一個越來越複雜的迷宮裡!!
希望知道的人可以幫幫我!!
謝謝!!
這是我的網址
http://venustcy.blogspot.com/

小鳥 said...

只顯示標題的作法我做到了,但是[+/-]顯示/隱藏連結
這個方法不懂@@",可以教教我嗎@@?

Allyson said...

那個「古法」老實說我一直不是很懂,看了版主的說明,果然弄成功了。謝謝版主!

Belle said...

不好意思,我用您提供的語法修改後,
我的blog首頁的文章呈現空白(sidebar可以顯示),
後來,我想先換template看看是否可以解決問題,
結果沒有...

現在,點選archive中的任一月份都無法跳出文章,
點選標籤中的任一項,則是列出所有文章...

不知道是否可以幫我看一下問題在哪?
http://theater-of-nordic-ideas.blogspot.com/
可以告訴我一下該如何處理?
打擾了,謝謝。

Muser said...

你可以回復TEMPLATE到原本預設內容再重新套用一次看看,
通常會有問題都是使用者有先改了其他的東西所造成的,
要看原本的 XML 才知道問題,所以幫不了你。

Belle said...

謝謝你的答覆:)

Nell said...

你好
想請問問題
我使用了你的語法
結果對於單純只有文字(html碼很單純)的文章就work
可是其他有插照片(html碼很複雜)就沒有隱藏起來
因為我是新手 不太懂語法  但是看到前面說好像有<p></p>之類的會影響 但是我看了一下我語法裡有提到<p></p>之類的好像跟字型顏色有關 而不是跟換行有關
所以 請問有任何解決方法嗎
希望你可以懂我的疑問

Muser said...

照片的HTML一樣包進去要隱藏的地方就一樣看不見了,就是有照片的HTML也是整大塊放進本文的位置,沒有包進去就會被看見,跟P或其他HTML無關....
還是我沒搞懂你的問題?

Nell said...

嗯...不好意思 應該是我自己搞不好
再研究後 發現還是p跟/p搞的鬼
因為我是圖跟字穿插 所以會有很多段
雖然我有參考你第一篇回覆中說要改br功能
但是我該成"否"之後仍然一樣分段會自動出現p跟/p
不知道這跟我用wlw是否有關
總之現在只能土法煉鋼 每一段都插span class='fullpost'
/span
還是你有什麼建議呢 謝謝

Muser said...

你有用其他軟體發BLOG?(WLW是啥?)
如果是直接上BLOGGER發應該不會,只要設定過連BR都看不到,直接會用BR處理
你也可以:
span
p ......... /p
p ......... /p
/span
整個包起來,不用每段分。

Nell said...

wlw=windows live writer啦
今天好好研究了一下

我今天本來文章打這樣
p...span.../p
p.../p
p.../p /span
結果IE可以隱藏 但FIREFOX只能隱藏第一段

後來改成
p...span.../p
span p .../p
p.../p /span
FIREFOX居然可以隱藏 但IE則是直接網頁錯誤

最後是用
p...span.../p /span
span p.../p
p.../p /span
兩者就都ok啦
我想我有抓到方法
之後再來試試看

謝謝囉

said...

弄了几天终于好了,太感谢了...

Xavier said...

請問一下有辦法不顯示繼續閱讀嗎?
我用了這版的繼續閱讀後
有的文章比較短不需要繼續閱讀的功能
我沒加上繼續閱讀的語法
但是文章最下面還是會顯示出來
請問一下這有辦法修改嗎

Muser said...

沒有,只能全部取消不用(出現全文)或是全部都出現繼續閱讀(短文也有)。

或是自行去參考 JavaScript 的判斷法(請愛用搜尋),但是用 JavaScript 不是我欣賞與喜歡的作法,因此我也不會。

Xavier said...

謝謝囉~感謝解答

Maiza said...

想請問,我用了您提供的語法後,會出現read more...的選項。但是是出現在每一篇文章的最末尾,使用 本文.....(本文要隱藏的部分)這個方法,也無法將文章包起來,我的文章就全部攤開,然後在文章的末端出現read more...,唉,可我是按照您的方法把語法貼進去啊!可以幫幫我嗎?

Muser said...

請檢查css的設定部份是否正確,另外是文章寫得時候只能用 html 格式寫,其他的部份請自行參考文章中的用法說明,這已經是step by step的教學,沒有任何更進一步說明或方法了,如果沒辦法使用也只能請你放棄使用。

專業&不專業 said...

請問一下大大!!文章我有成功隱藏起來了,不過就沒有出現...閱讀全文>>這段文字,那要怎麼弄出來呢?

Muser said...

這就表示你有東西沒加到...

Housing said...

羊大..此語法是指每發表一篇文章都得到後台html去做包文的工作是嗎?謝啦!

Muser said...

發文的時候做包文的動作,不是到EDIT版型的地方做包文的動作。

草葉集 said...

我想請問一下我有照你的方法做

但文章都無法縮文…為何呢><~~~

Muser said...

我也不知道。
其他邊攔東西先拿掉,重頭來一遍,一步一步來。再不行,試試看這邊的TEMPLATE,沒有喜歡的,我也幫不上忙。

Post a Comment

在超過五天以上的文章當中留言將受到管理,請勿重複留言。
New comments are moderated on the posts older than 5 days.
與文章無關的留言或回應將會被刪除。
Irrelevant Comments will be deleted or rejected without any warning.