[BLOGGER]繼續閱讀懶人版(For Blogger New)
注意:此篇僅適用Blogger Beta,原Blogger舊版專用的版本在這
注意2:此篇已有新版本,請到這裡觀看
這個版本是參考:
Chagg's 嘴砲日記: Blogger Beta 繼續閱讀功能改良
修改而成的懶人版,在此特別致謝
優點:不需要逐篇插入特殊的標記,會自動套用在整個Blog(懶人適用)
缺點:行數是固定的,所以沒有辦法每篇自訂中斷處
使用前說明:
本程式碼是使用JavaScript去抓<br>(換行標籤),每個<br>就代表一行
所以要確定你的文章裡面有足夠數量的<br>,繼續閱讀才會成功
修改template(記得修改前請備份!!)
步驟1:在</b:skin>和</head>中間,插入以下程式碼
<script type="text/javascript">
function hidePost(PostBodyId,postUrl)
{
var pbody = document.getElementById('PS_' + PostBodyId);
var tagbr = pbody.getElementsByTagName('br');
if (tagbr.length > 3)
{
var britem = tagbr.item(3);
while (britem.nextSibling!=null)
{
britem.parentNode.removeChild(britem.nextSibling);
}
britem.parentNode.appendChild(document.createElement("br"));
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","繼續閱讀");
eA.appendChild(document.createTextNode("...繼續閱讀"));
eB = document.createElement("div");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
britem.parentNode.appendChild(eB);
}
}
</script>
步驟2:找到類似以下的區塊
<div class="post-body">
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>
用以下的程式碼取代:
<div class="post-body">
<div expr:id='"PS_"+ data:post.id'>
<data:post.body/>
</div>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.id/>','<data:post.url/>');</script>
</b:if>
</b:if>
<div style='clear: both;'/>
</div>
步驟3:Save Template,Enjoy It
補充說明:
前面的程式碼,預設是每篇會保留前四行
要加大或縮小的話,請修改步驟1的程式碼:
if (tagbr.length > 3)
{
var britem = tagbr.item(3);
把兩個數字'3'換成你要的行數即可
不好意思,我發現這篇的作法雖然方便,但可能有些問題:懶人版可能發生的問題
回覆刪除另外也想請問一下,Javascript是否也有用抓字數取代抓取br的做法呢?
To Chen-Hai, Teng
回覆刪除抓字數的方式,應該是可以的,我在google上有查到 element.value.length 可以取得element的字數
但這種方式應該是取得包含tag的總字數,所以分割的時候可能會切到tag造成顯示不正常(而且可能有中文支援的問題...搞不好字也會被切對半變成亂碼)
其實Javascript我並不熟,一點小想法提供您參考
您好,我現在使用的是新版的「harbor」範本,也想加入「繼續閱讀」的功能,可是我找不到和步驟二類似的程式碼,請問可能的問題為何?又要如何解決呢?
回覆刪除謝謝。
To 法賓
回覆刪除在修改範本時,[文字框右上角]有一個[展開小裝置範本]的選項,把他勾起來之後,會顯示更詳細的範本HTML碼,裡面就有你要找的那個程式區塊。
To chen jim hao:
回覆刪除謝謝,我已經改好了。
抱歉,我發現用 WinXP SP2 的 IE6 開啟有含這種 JavaScript 的頁面,會開不出來。
回覆刪除有什麼好意見嗎?
我想請問,為什麼我和朋友貼完之後,整篇文章的行距變得很狹窄呢?不知道要改那邊的語法?謝謝。
回覆刪除To wini和gummi
回覆刪除麻煩請給我你們有發生問題的網址
要看過才知道問題在哪
To wini
我這個blog也有套用繼續閱讀功能,不管是用ie6、ie7或firefox開起來都沒有問題...
我猜可能是你的某篇文章內容切掉之後產生亂碼或是其他有問題的東西,讓ie產生錯誤。
建議你把首頁文章都先藏起來(存草稿),然後一篇一篇發佈上去,看是哪一篇會讓ie出錯(內容有貼程式碼,或是html碼的,是兇手的機會比較大)
To Chen Jim Hao
回覆刪除感謝回覆,不過如果有這種 bug 的話,我想可能還是不用比較安全。
順帶一提,我已經把繼續閱讀拿掉了,大概沒法子給你看網址了。
感謝 m(_ _)m
我發現,如果是開頭三行是在quoteblock之內的話,他會把在quoteblock之內的文章隱藏,產生『繼續閱讀』,但是之外的則仍然繼續顯示,並沒有隱藏。
回覆刪除請看我的blog:
http://qq0526.blogspot.com/
抱歉,我因為受不了錯誤,所以先還原了。但情況就像我上面敘述的那樣。
回覆刪除請問能在產生『繼續閱讀』前,先判斷quoteblock是否存在,然後產生相對應的/quoteblock嗎?我想這樣或許可以解決問題。
To qq0526:
回覆刪除我趁年假修改了新的版本,請到這裡試用看看,應該可以解決你的問題
你好~
回覆刪除我有個小問題..
我按照上面所說的方法修改後..
在blogger首頁的文章是會自動變成"繼續閱讀"..
不過第二頁之後的文章,還是會整篇跑出來耶...
不知道是哪裡有問題咧..@@
感謝大大的帖
回覆刪除在下已服用
希望可以頭好壯壯
感謝閣下能造福人群 蔽蔭蒼生呀
弄了半天終於弄好了!!
回覆刪除看到自己部落格那一長串文字被縮減為幾行、
還有那可愛的"...More"出現時,
心中真是充滿感動!!!!!
謝謝!!!!!
這樣自動的真的方便多了XD 謝謝
回覆刪除好棒的懶人包!謝謝你壓~!!!
回覆刪除Thank you that your share and I've got it to bulid my blog.
回覆刪除