2009年3月16日星期一

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

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. 儲存即可


使用方式


    你必需在 Blogger 編輯文章時使用 “修改 HTML” 模式，在要顯示/隱藏內文的部份用下列標籤包起來:
    前文
    <span id="fullpost">
    欲隱藏的內文
    </span>



全部展開/隱藏全文


    你如果想要增加一個的控制項，可以用來展開或隱藏所有文章的內文，則請自行新增一個 “HTML/Javascript” 網頁元素，內容:

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

没有评论:

发表评论