關於 web service, unity, blogger 等軟體工程筆記

Blogger 文章列表 (Blogger archive list page)

Edit icon 沒有留言
Blogger archive page

之前在找 Blogger 資料時發現的這一篇,Create an Archive List/Page for Blogger。文章列表讓你的舊文章不再只能在充滿黑暗的角落長灰塵,且讓你的訪客能更容易尋找部落格的文章。

小工具的文章列表不就夠用了嗎?當我看到這一篇所做的效果,跟比較小工具所提供的頁面設計,我想是時候也弄一個版本來試試看。

原先的設計是根據每月分類呈現,再修改完後變成每年分類,此外加上標籤,配合 Bootstrap 排版變成以下的樣子,還算是可以接受吧。也許未來可以考慮加上縮圖之類的。

Archive page preview

網頁 > 新網頁,貼下以下 Javascript 程式碼:

<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>
<script src="/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive"></script>
  • Line 28-37: 處理原始資料,把標題標籤等資料拉出來
  • Line 47-56: 當「年」改變時,輸出標題 h3 以及表格 table
  • Line 60-68: 輸出每筆文章以及標籤
  • Line 63: 輸出分隔,要讓標籤不要跟連結在同一行
  • Line 64-67: 輸出標籤
  • Line 75: 主資料來源,max-results=500 可以調整,這表示此頁最多會有 500 個文章連結

然後再追加 CSS 設定,要求第一欄不要自動換行,寬度不要太大,標籤間距調整:

<style>
table.list-archive tr td:nth-child(1) {
   white-space: nowrap;
   width: 1%;
}

table.list-archive .label {
   margin-left: 4px;
}
</style>

也許還需要 Bootstrap 排版?(若排版原先不是使用 Boostrap,這可能會造成 Blogger 排版大亂)

<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'/>
View on Github

沒有留言: