Blogger 小元件--最新文章與最新回應(Atom格式)

在建置這個 Blog 的過程中, 為了提供最新文章與最新回應, 在網站上也找到了別人寫好的程式, 但一來我喜歡研究新東西, 二來研究完發現網站上提供的程式似乎有點問題, 於是就想自己來寫個小元件(Widget)

最新文章(Previous Posts)

<div id="new-posts">Loading...</div>
<script type='text/javascript'>
function mf_getAtomMsg(s_atomUrl,i_count,s_wrapperName){
  var s_errMsg = '<ul><li>Your browser does not support this widget.</li></ul>';
  function fn_generateHTML(){
    if(xmldom.firstChild==null){
      document.getElementById(s_wrapperName).innerHTML=s_errMsg;
      return;
    }
    var nodeList = xmldom.getElementsByTagName('entry');
    var s = '<ul>';
    for(var i=0;i< nodeList.length && i< i_count;i++){
      var node_title = nodeList.item(i).getElementsByTagName('title').item(0);
      var node_link = nodeList.item(i).getElementsByTagName('link').item(0);
      s+='<li><a href="'+node_link.getAttribute('href')+'">'
        +node_title.firstChild.nodeValue+'</a></li>';
    }
    if( nodeList.length==0 ){
      s+='<li>No data</li>';
    }
    s += '</ul>';
    document.getElementById(s_wrapperName).innerHTML=s;
  }
  var xmldom;
  if(window.ActiveXObject){
    var xmldom = new ActiveXObject('Microsoft.XMLDOM');
    xmldom.async = true;
    xmldom.load(s_atomUrl);
    xmldom.onreadystatechange=function(){
      if (xmldom.readyState == 4){
        fn_generateHTML();
      }
    }
  }else if(window.XMLHttpRequest){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
      if( xmlhttp.readyState==4 ){
        xmldom = xmlhttp.responseXML;
        fn_generateHTML();
      }
    }
    xmlhttp.open('GET', s_atomUrl, true );
    xmlhttp.send(null);
  }
}
var s_atomUrl = '/feeds/posts/default';
mf_getAtomMsg(s_atomUrl,5,'new-posts');
</script>

最新回應(Previous Comments)

<div id="new-comments">Loading...</div>
<script type='text/javascript'>
function mf_getAtomMsg(s_atomUrl,i_count,s_wrapperName){
  var s_errMsg = '<ul><li>Your browser does not support this widget.</li></ul>';
  function fn_generateHTML(){
    if(xmldom.firstChild==null){
      document.getElementById(s_wrapperName).innerHTML=s_errMsg;
      return;
    }
    var nodeList = xmldom.getElementsByTagName('entry');
    var s = '<ul>';
    for(var i=0;i< nodeList.length && i< i_count;i++){
      var node_title = nodeList.item(i).getElementsByTagName('title').item(0);
      var node_link = nodeList.item(i).getElementsByTagName('link').item(0);
      s+='<li><a href="'+node_link.getAttribute('href')+'">'
        +node_title.firstChild.nodeValue+'</a></li>';
    }
    if( nodeList.length==0 ){
      s+='<li>No data</li>';
    }
    s += '</ul>';
    document.getElementById(s_wrapperName).innerHTML=s;
  }
  var xmldom;
  if(window.ActiveXObject){
    var xmldom = new ActiveXObject('Microsoft.XMLDOM');
    xmldom.async = true;
    xmldom.load(s_atomUrl);
    xmldom.onreadystatechange=function(){
      if (xmldom.readyState == 4){
        fn_generateHTML();
      }
    }
  }else if(window.XMLHttpRequest){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
      if( xmlhttp.readyState==4 ){
        xmldom = xmlhttp.responseXML;
        fn_generateHTML();
      }
    }
    xmlhttp.open('GET', s_atomUrl, true );
    xmlhttp.send(null);
  }
}
var s_atomUrl = '/feeds/comments/default';
mf_getAtomMsg(s_atomUrl,5,'new-comments');
</script>

眼尖的朋友們應該可以看出來, 上面兩個元件的 function 是一樣的, 所以若你同時要用這兩個元件, 那麼 function 那一段寫一次就好, 當然, 必須是寫在前面的那一個, 否則若寫在後面一個時, 那麼前面那一個要呼叫 function 時很容易因找不到 function 而發生錯誤

或者是在版面設置中, 直接修改 HTML 內容, 將該 function 寫到 HEAD 區塊內, 那麼在新增網頁元素時, 就不須要再寫那個 function 了, 不過這種做法有點風險, 若你有可能更換版面, 那麼那段 function 的語法就有可能會遺失, 因為 Blogger 只會保留你的網頁元素內容, 所以我個人還是把它寫在 第一個 widget 內, 變成最新回應只有下面的語法

<div id="new-comments">Loading...</div>
<script type="text/javascript">
var s_atomUrl = '/feeds/comments/default';
mf_getAtomMsg(s_atomUrl,5,'new-comments');
</script>

因此, 你也可以發現, 不只是最新文章與最新回應, 只要是 Atom 格式的資料來源, 都可以使用這組元件, 只要改變以下粉紅色那些地方就可以了

<div id="給一個唯一的識別名稱">Loading...</div>
<script type="text/javascript">
var s_atomUrl = 'Atom資料URL';
mf_getAtomMsg(s_atomUrl,要列出幾篇,'上面div的id名稱');
</script>

--gs--
{Blogger 小元件widget}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。