在 Blogger 的文章中加入 "隱藏內文/繼續閱讀" 功能
Blogger 中的文章因為沒有 “隱藏內文” 及 “繼續閱讀” 的功能，所以就會把整個網頁拉得很長，較不利於閱讀。並且，如果文章內有很多圖片的話，那載入的時間就會變得很長。
以下的內容是我參考其它 Blogger 的做法所做的改良，主要的不同，就是我覺得其它 Blogger 在載入時會先顯示全文，再做隱藏，視覺上的效果比較不好，我把它改成一開始就會隱藏內文了，也可以避免自動載入內文的圖片。
安裝步驟
- 編輯樣版，搜尋 “</head>”，在其上方加入:
<b:if cond='data:blog.pageType != "item"'> <style> #fullpost { clear:both; display:none; } #read-more { float:left; color:#FFFFFF; background-color:#00FF00; border:1px outset; padding:2px; text-decoration:none; font-weight:bold; font-family:Arial; } </style> </b:if> - 繼續搜尋 “<body>”，在標籤內的 onload 事件加入:
if(window.readMore){readMore();}繼續在下一行加入:
<b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> var tagSpan = document.getElementsByTagName('span'); var more1 = new Array(); var more2 = new Array(); function readMore(){ var x = 0; for(var i=0; i<tagSpan.length; i++){ if(tagSpan[i].id == 'fullpost'){ more1[x] = tagSpan[i]; var readMore = document.createElement('a'); readMore.setAttribute('id','read-more'); readMore.setAttribute('href','javascript:toggleMore('+x+')'); readMore.setAttribute('onclick','toggleMore('+x+');return false;'); readMore.appendChild(document.createTextNode('Read more >>')); more2[x] = more1[x].parentNode.insertBefore(readMore,more1[x]); x++; } } } function toggleMore(theElement,theStatus){ if(theStatus == true || more1[theElement].style.display=='' || more1[theElement].style.display=='none'){ more1[theElement].style.display = 'block'; more2[theElement].innerHTML = '<< Less'; // more2[theElement].parentNode.removeChild(more2[theElement]); }else{ more1[theElement].style.display = 'none'; more2[theElement].innerHTML = 'Read more >>'; } } function expandAll(theStatus){ for(var i=0; i<more1.length; i++){ toggleMore(i,theStatus); } } </script> </b:if>請注意一下程式碼的第 25 行，如果將前面的註解拿掉，則訪客展開內文之後，”Read more” 的連結就會自動消失了。
- 儲存即可
使用方式
- 你必需在 Blogger 編輯文章時使用 “修改 HTML” 模式，在要顯示/隱藏內文的部份用下列標籤包起來:
前文 <span id="fullpost"> 欲隱藏的內文 </span>
全部展開/隱藏全文
- 你如果想要增加一個的控制項，可以用來展開或隱藏所有文章的內文，則請自行新增一個 “HTML/Javascript” 網頁元素，內容:
<input id="expand-all" onclick="if (window.expandAll){expandAll(this.checked)}" type="checkbox">
<label for="expand-all">Expand All</label>
解決 “隱藏內文/繼續閱讀” 失效的問題
- 一切看來似乎都很完美?!那可不，當你把 Blogger 拉到網頁的最下方，點選較新或較舊的文章連結，切到到新的內容時，你會發現 “隱藏內文/繼續閱讀” 的功能根本沒有作用，這個問題因為適用大部份相同功能的 Blogger，所以另外寫了一篇文章，請參考:
- 解決當 Blogger 的 “隱藏全文/繼續閱讀” 功能因為點選較新或較舊的文章而失效的狀況
您可能會對以下這些文章感興趣
2007
28
7月
- Posted by citypig at 10:08 am (2,654 views)
- Permalink for this entry
- Filed under: blogger
- RSS comments feed of this entry
- TrackBack URI
2009-04-12 15:34
你好，我照你的方法成功隱藏內文，但請問能將readMore…改成“繼續閱讀”中文顯示嗎？…:)
Browser:2009-04-12 18:39
可以的，請在第二個安裝步驟的第二個程式碼區段，將所有的: ‘Read more >>’ 以及 ‘<< Less’ 改成你要的中文即可。
Browser:2009-04-13 0:30
可以了，謝謝….:)
Browser: