- Vixual - http://www.vixual.net/blog -

在 Blogger 的文章中加入 "隱藏內文/繼續閱讀" 功能

Posted By citypig On In WebApp | 5 Comments

Blogger 中的文章因為沒有 “隱藏內文” 及 “繼續閱讀” 的功能，所以就會把整個網頁拉得很長，較不利於閱讀。並且，如果文章內有很多圖片的話，那載入的時間就會變得很長。

以下的內容是我參考其它 Blogger 的做法所做的改良，主要的不同，就是我覺得其它 Blogger 在載入時會先顯示全文，再做隱藏，視覺上的效果比較不好，我把它改成一開始就會隱藏內文了，也可以避免自動載入內文的圖片。

安裝步驟

  1. 編輯樣版，搜尋 “</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>
  2. 繼續搜尋 “<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&lt;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 &gt;&gt;'));
      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 = '&lt;&lt; Less';
//  more2[theElement].parentNode.removeChild(more2[theElement]);
  }else{
    more1[theElement].style.display = 'none';
    more2[theElement].innerHTML = 'Read more &gt;&gt;';
  }
}
function expandAll(theStatus){
  for(var i=0; i&lt;more1.length; i++){
    toggleMore(i,theStatus);
  }
}
</script>
</b:if>

    請注意一下程式碼的第 25 行，如果將前面的註解拿掉，則訪客展開內文之後，”Read more” 的連結就會自動消失了。

  3. 儲存即可

使用方式

全部展開/隱藏全文

解決 “隱藏內文/繼續閱讀” 失效的問題