archive page

#程式語言、#Blogger文章列表頁面

<2016.Feb.14<Blogger 文章列表 (Blogger archive list page)>>﹙成功了﹚，詳情見GitHub

 
<!-- Modified from http://sarwrites.blogspot.tw/2015/09/create-archive-listpage-for-blogger.html -->
<!-- Need Bootstrap -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
function LoadTheArchive(TotalFeed) {
 var PostTitles = new Array();
 var PostLabels = new Array();
 var PostURLs = new Array();
 var PostYears = new Array();
 var PostMonths = new Array();
 var PostDays = new Array();
 if ("entry" in TotalFeed.feed) {
  var PostEntries = TotalFeed.feed.entry.length;
  for (var PostNum = 0; PostNum < PostEntries; PostNum++) {
   var ThisPost = TotalFeed.feed.entry[PostNum];
   PostTitles.push(ThisPost.title.$t);
   PostYears.push(ThisPost.published.$t.substring(0, 4));
   PostMonths.push(ThisPost.published.$t.substring(5, 7));
   PostDays.push(ThisPost.published.$t.substring(8, 10));
   
   var labels = new Array();
   if (ThisPost.category) {
    for (var cat in ThisPost.category) {
     labels.push(ThisPost.category[cat].term);
    }
   }
   PostLabels.push(labels);
   
   var ThisPostURL;
   for (var LinkNum = 0; LinkNum < ThisPost.link.length; LinkNum++) {
    if (ThisPost.link[LinkNum].rel == "alternate") {
     ThisPostURL = ThisPost.link[LinkNum].href;
     break;
    }
   }
   PostURLs.push(ThisPostURL);
  }
 }
 
 DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays, PostLabels);
}
function DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays,
 PostLabels) {
 var currentMonth = "";
 var currentYear = "";
 var first = true;
 for (var EntryNum = 0; EntryNum < PostTitles.length; EntryNum++) {
  var monthD = parseInt(PostMonths[EntryNum], 10);
  var dayD = parseInt(PostDays[EntryNum], 10);
  if (currentYear != PostYears[EntryNum]) {
   currentYear = PostYears[EntryNum];
   if (!first) {
    document.write('</table>');
   } else {
    first = false;
   }
   document.write('<h3>' + currentYear + '</h3>');
   document.write('<table class="table table-striped list-archive">');
  }
  
  var monthPad = ("0" + monthD).slice(-2);
  var dayPad = ("0" + dayD).slice(-2);
  document.write('<tr>');
  document.write('<td>' + monthPad + '-' + dayPad + '</td>');
  document.write('<td><a href ="' + PostURLs[EntryNum] + '">' + PostTitles[EntryNum] + '</a> ');
  document.write('<div style="clear: both;"/>');
  for (var cat in PostLabels[EntryNum]) {
   var catName = PostLabels[EntryNum][cat];
   document.write('<a href="/search/label/' + encodeURI(catName) + '" class="label label-default pull-right">' + catName + '</a> ');
  }
  document.write('</td></tr>');
 }
 if (!first) {
  document.write('</table>');
 }
}
</script>

<style>
table.list-archive tr td:nth-child(1){
 white-space: nowrap;
 width: 1%;
}
table.list-archive .label {
 margin-left: 4px;
}
</style>
<script src="/feeds/posts/default?max-results=1000&amp;alt=json-in-script&amp;callback=LoadTheArchive"></script>

<2015.sep.02<Create an Archive List/Page for Blogger - Life is so full of tae!>>

 
<script type="text/javascript">
function LoadTheArchive(TotalFeed) {
    var PostTitles = new Array();
    var PostURLs = new Array();
    var PostYears = new Array();
    var PostMonths = new Array();
    var PostDays = new Array();
    if("entry" in TotalFeed.feed) {
 var PostEntries=TotalFeed.feed.entry.length;
 for(var PostNum=0; PostNum<PostEntries ; PostNum++) {
     var ThisPost = TotalFeed.feed.entry[PostNum];
     PostTitles.push(ThisPost.title.$t);
     PostYears.push(ThisPost.published.$t.substring(0,4));
     PostMonths.push(ThisPost.published.$t.substring(5,7));
     PostDays.push(ThisPost.published.$t.substring(8,10));

  var ThisPostURL;
  for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++) {
     if(ThisPost.link[LinkNum].rel == "alternate") {
      ThisPostURL = ThisPost.link[LinkNum].href;
      break
  }
     }
     PostURLs.push(ThisPostURL);
 }
    }
    DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}

function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
    var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];
    var NumberOfEntries=PostTitles.length;

    var currentMonth = "";
    var currentYear = "";

    for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) {
 NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]

 if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
  currentMonth = NameOfMonth;
  currentYear = PostYears[EntryNum];

  document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>");
 }

  document.write('<a href ="'+PostURLs[EntryNum]+'"><div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+":&nbsp;&nbsp;</div> "+PostTitles[EntryNum]+"</a><br />");
    }
}
</script>

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

- - 文字可刪 - - Since there has been a change in Blogger, your blog feed will only return 150 posts. To show all your posts, you have to manually fetch your posts using the script below:
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive"></script>
The script will populate 1001 posts (see start-index of the last line). If you need to populate more posts, just add one line of the script and change the start-index count (by adding 150).- - 文字可刪 - - 

<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
     color:#000;
     font-weight:bold;
     font-size: 15px;
     font-family: Arial, sans-serif;
     margin: 0;
}

.dayStyle {
     color:#000;
     font-weight:bold;
     font-family: Arial, sans-serif;
     display: inline-block;
}

</style>