Blogger自作HTMLサイトマップ

Blogger用のラベル別サイトマップのjavascriptです。目次からラベルの場所に移動できます。

最近投稿された投稿のラベル順にラベルごとにまとめられます。ラベルの中の投稿はタイトル順になっていますが、公開日時の新しい順などへ簡単に変更できます。

feedで1度に取得できる最大件数は150件なので、150件取得を繰り返して全投稿を取得しています。javascriptのfetchは結果を待たない非同期処理なので、awaitを使用して結果を待ってから繰り返すようにしています。

サイトマップのjavascriptは以下になります。「ページ」の「新しいページ」の追加で、左上にある「HTMLビュー」と「作成ビュー」を切り替えるところを「HTMLビュー」にして、javascriptの内容を貼り付けるだけです。

<div id='sitemappage'></div>
<script>
/*<![CDATA[*/
makeSiteMap();
async function makeSiteMap(){
  let entrylist=new Array();
  let entrylistlength=0;
  for(let i=0;;i++){
    await getSiteMap(entrylist,i);
    if(entrylistlength==entrylist.length) break;
    entrylistlength=entrylist.length;
  }
  let labellist=new Array();
  for(let i=0;i<entrylist.length;i++){
    let label=entrylist[i]['label'];
    labellist[label]=(parseInt(labellist[label])||0)+1;
  }
  entrylist.sort((a,b)=>{
    if(a.title>b.title) return 1;
    if(a.title<b.title) return -1;
    return 0;
  });
  let htmllink='';
  let html='';
  for(label in labellist){
    let labelencode=encodeURIComponent(label);
    let labelurl=location.protocol+'//'+location.hostname+'/search/label/'+labelencode;
    htmllink+='<a href="#'+labelencode+'" class="sitemaplinktitle">'+label+' ('+labellist[label]+')</a>';
    html+='<div id="'+labelencode+'" class="sitemaplinkid"></div>';
    html+='<a href="'+labelurl+'">'+label+'</a>';
    html+='<ol>';
    for(let i=0;i<entrylist.length;i++){
      let entry=entrylist[i];
      if(entry['label']==label){
        html+='<li><a href="'+entry['url']+'">'+entry['title']+'</a></li>';
      }
    }
    html+='</ol>';
  }
  document.getElementById('sitemappage').innerHTML='<div id="sitemaplink">'+htmllink+'</div>'+html;
}
async function getSiteMap(entrylist,count){
  const queryMaxResults='150';
  const feedUrl='/feeds/posts/summary?alt=json&max-results='+queryMaxResults+'&start-index='+(count*queryMaxResults+1);
  await fetch(feedUrl)
  .then(response=>response.json())
  .then(json=>{
    if(!json.feed.entry) return;
    for(let i=0;i<json.feed.entry.length;i++){
      let entry=json.feed.entry[i];
      for(let j=0;j<entry.link.length;j++){
        if(entry.link[j].rel=='alternate'){
          for(let k=0;k<entry.category.length;k++){
            entrylist.push({url:entry.link[j].href,title:entry.title.$t,label:entry.category[k].term,published:entry.published.$t});
          }
          break;
        }
      }
    }
  })
  .catch(error=>console.log(error));
}
/*]]>*/
</script>
<style>
#sitemaplink{
padding:.25em;
border:1px solid #999;
}
.sitemaplinktitle{
padding:0 .5em;
}
.sitemaplinkid{
padding-bottom:2em;
}
</style>

<style>と</style>の間がcssになります。線の色や空白の広さを指定しています。

以下は変更例です。
タイトル順に並び変えているのは以下の部分です。

  entrylist.sort((a,b)=>{
    if(a.title>b.title) return 1;
    if(a.title<b.title) return -1;
    return 0;
  });

公開日時の新しい順の場合はこの部分を削除します。

公開日時の古い順の場合は以下のように変更します。

  entrylist.sort((a,b)=>{
    if(a.published<b.published) return 1;
    if(a.published>b.published) return -1;
    return 0;
  });

タイトルの横の番号を表示しない場合

    html+='<ol>';

    html+='</ol>';

この部分でタイトルの横に番号を表示するようにしています。以下のように変更すると番号は表示されなくなります。

    html+='<ul>';

    html+='</ul>';