Blogger自作アーカイブリスト・キャッシュ高速化

アーカイブリストを表示する自作テンプレートのjavascriptキャッシュ高速化版です。

Blogger公式ガジェットを使わずjavascriptだけで実現します。自作なので、年月表示も簡単にできます。年月をクリックしたときにタイトルを表示するイベントのjavascriptもあるので、Blogger標準javascriptを使いません。テンプレートの</body>の前に書きます。

<script>
/*<![CDATA[*/
function setArchiveList(){
  let sumlist=new Array();
  let nowurly='';
  let nowurlym='';
  for(let i=0;i<ALLLIST.length;i++){
    let archivey=ALLLIST[i]['published'].substring(0,4);
    let archiveym=ALLLIST[i]['published'].substring(0,7).replace('-','/');
    sumlist[archivey]=(sumlist[archivey]||0)+1;
    sumlist[archiveym]=(sumlist[archiveym]||0)+1;
    if(i==0||ALLLIST[i]['url']==NOWURL){
      nowurly=archivey;
      nowurlym=archiveym;
    }
  }
  const tagstartopen='<ul class="hierarchy"><li><a class="toggle" onclick="clickArchive(event)">▼</a> ';
  const tagstartclose='<ul class="hierarchy"><li class="nodisp"><a class="toggle" onclick="clickArchive(event)">►</a> ';
  const tagend='</li></ul>';
  let prey='';
  let preym='';
  let html='';
  for(let i=0;i<ALLLIST.length;i++){
    let nowy=ALLLIST[i]['published'].substring(0,4);
    let nowym=ALLLIST[i]['published'].substring(0,7).replace('-','/');
    let nexty=((i+1)!=ALLLIST.length) ? ALLLIST[i+1]['published'].substring(0,4) : '';
    let nextym=((i+1)!=ALLLIST.length) ? ALLLIST[i+1]['published'].substring(0,7).replace('-','/') : '';
    if(nowy!=prey){
      html+=(nowy==nowurly) ? tagstartopen : tagstartclose;
      html+='<a href="'+HOSTURL+'/'+nowy+'/">'+nowy+'年</a> ('+sumlist[nowy]+')';
    }
    if(nowym!=preym){
      html+=(nowym==nowurlym) ? tagstartopen : tagstartclose;
      html+='<a href="'+HOSTURL+'/'+nowym+'/">'+nowy+'年'+nowym.substring(5,7)+'月</a> ('+sumlist[nowym]+')';
    }
    if(nowym==nowurlym){
      if(nowym!=preym) html+='<ul class="posts">';
      html+='<li><a href="'+ALLLIST[i]['url']+'">'+ALLLIST[i]['title']+'</a></li>';
      if(nowym!=nextym) html+='</ul>';
    }
    if(nowym!=nextym) html+=tagend;
    if(nowy!=nexty) html+=tagend;
    prey=nowy;
    preym=nowym;
  }
  document.getElementById('ArchiveList').innerHTML=html;
}
function clickArchive(event){
  let filter=event.target.parentElement.getElementsByTagName('a')[1].getAttribute('href').replace(HOSTURL,'').slice(1,-1).replace('/','-');
  if(filter.length==7&&event.target.parentElement.getElementsByClassName('posts').length==0){
    let html='';
    for(let i=0;i<ALLLIST.length;i++) if(ALLLIST[i]['published'].substring(0,7)==filter) html+='<li><a href="'+ALLLIST[i]['url']+'">'+ALLLIST[i]['title']+'</a></li>';
    event.target.parentElement.insertAdjacentHTML('beforeend','<ul class="posts">'+html+'</ul>');
  }
  event.target.parentElement.classList.toggle('nodisp');
  event.target.textContent=(event.target.parentElement.classList.contains('nodisp')) ? '►' : '▼';
}
/*]]>*/
</script>

以下のhtmlをテンプレートのアーカイブ一覧を表示したい位置に書きます。

<section class='widgethtml'>
  <h3 class='widgettitle'>アーカイブ</h3>
  <nav id='ArchiveList' class='widgetbody'/>
</section>

HTMLサイトマップを読み込んだ後の処理のjavascriptは以下になります。

<script>
function mainMenu(){
  setArchiveList();
}
</script>

cssは以下になります。テンプレートの</head>の前に書きます。

<style>
.nodisp ul{
display:none;
}
.hierarchy .hierarchy{
padding:.5em 0 0 1.5em;
}
.posts{
list-style-type:decimal;
padding:.5em 0 0 0;
}
.toggle,.toggle:hover{
color:inherit;
text-decoration:none;
}
</style>

キャッシュ高速化には以下の変更も必要です。
Blogger自作テンプレートのキャッシュ高速化