javascript 如何在 Blogger 博客上显示所​​有帖子的列表？

How to display the lists of all posts on a Blogger blog?

提问by Basavaraj Walikar

I have a blogger blog, but I'm a little lost with their API. I would like to know if it's possible to create a page which list all the posts of my blog.

我有一个博主博客，但我对他们的 API 有点迷茫。我想知道是否可以创建一个页面来列出我博客的所有帖子。

I found some answers on the Internet, but most of them doesn't work anymore :(

我在互联网上找到了一些答案，但大多数都不再适用了:(

Another question I have : it is possible to work with the db without using javascript? I may be wrong, but I think most of the widgets uses AJAX (it call some JSON to get all the info and displays them in JS).

我的另一个问题是：可以在不使用 javascript 的情况下使用 db 吗？我可能错了，但我认为大多数小部件都使用 AJAX（它调用一些 JSON 来获取所有信息并在 JS 中显示它们）。

Thanks !

谢谢 ！

回答by yaqoob

To list all blogposts, you don't need to access Blogger API. Using blog's feed and a snippet of Javascript can do that for you.

要列出所有博客文章，您无需访问 Blogger API。使用博客的提要和一段 Javascript 代码可以为您做到这一点。

Working Example can be seen here:http://codepen.io/yaqoob/pen/GqJDy/

工作示例可以在这里看到：http : //codepen.io/yaqoob/pen/GqJDy/

Here is the Javascript Code:

这是Javascript代码：

<script type="text/javascript">
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/><a href="http://feeds2.feedburner.com/YourFeed" style="font-size: 11px; text-decoration:none; color: #616469;">Subscribe to Our RSS Feed and Get all the updates On the Fly</a></br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><a href="'+postYearMonth2[b]+'">'+temp1+"</a></p><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
</script>

And Here's the Javascript Callback.

这是 Javascript 回调。

<script src="http://domain.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

Replace blog's link your own.

替换您自己的博客链接。

回答by Basavaraj Walikar

Hi here i Find best solution

嗨，我找到了最佳解决方案

Make HTMl JAVA/SCript widget

制作 HTMl JAVA/脚本小部件

and simple post the code, it works great

并简单地发布代码，效果很好

<div><ul id="postList12"></ul></div>

<script type="text/javascript">

var startIndex = 1;
var maxResults = 100;

function sendQuery12()
{
   var scpt = document.createElement("script");
   scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;

   document.body.appendChild(scpt);
}

function processPostList12(root)
{
   var elmt = document.getElementById("postList12");
   if (!elmt)
      return;

   var feed = root.feed;

   if (feed.entry.length > 0)
   {
      for (var i = 0; i < feed.entry.length; i++)
      {
         var entry = feed.entry[i];

         var title = entry.title.$t;

         for (var j = 0; j < entry.link.length; j++)
         {
            if (entry.link[j].rel == "alternate")
            {
               var url = entry.link[j].href;

               if (url && url.length > 0 && title && title.length > 0)
               {
                  var liE = document.createElement("li");

                  var a1E = document.createElement("a");
                  a1E.href = url;
                  a1E.textContent = title;

                  liE.appendChild(a1E);

                  elmt.appendChild(liE);
               }

               break;
            }
         }
      }

      if (feed.entry.length >= maxResults)
      {
         startIndex += maxResults;
         sendQuery12();
      }
   }
}

sendQuery12();