Blogger自作最新記事と関連記事リスト・キャッシュ高速化

最新記事と関連記事を表示する自作テンプレートのjavascriptキャッシュ高速化版です。

Blogger自作最新記事と関連記事リスト のキャッシュ高速化版です。関連リストは表示されている記事を基準にその記事より新しい同じラベルの10件を表示し、10件未満ならその記事を含まない同じラベルの最新の10件を表示するようにしています。テンプレートの</body>の前に書きます。

<script>
/*<![CDATA[*/
function setSubList(){
  const queryMaxResults='10';
  let obj=document.getElementById('sublist');
  if(!obj) return;
  const textLabel=obj.textContent;
  let sublist=new Array();
  if(!textLabel){
    for(let i=0;i<ALLLIST.length&&i<queryMaxResults;i++) sublist.push(ALLLIST[i]);
  }else{
    for(let i=0;i<ALLLIST.length;i++){
      if(textLabel==ALLLIST[i]['label']){
        if(ALLLIST[i]['url']==NOWURL){
          if(sublist.length>=queryMaxResults){
            sublist.splice(0,sublist.length-queryMaxResults);
            break;
          }
        }else{
          sublist.push(ALLLIST[i]);
        }
      }
    }
  }
  let html='';
  for(let i=0;i<sublist.length&&i<queryMaxResults;i++) html+='<li><a href="'+sublist[i]['url']+'">'+sublist[i]['title']+'</a></li>';
  obj.innerHTML='<ol>'+html+'</ol>';
}
/*]]>*/
</script>

以下のhtmlをテンプレートの最新記事を表示したい位置に書きます。

<div id='sublist'></div>

以下のhtmlをテンプレートの「ブログの投稿」ガジェット内の関連記事を表示したい位置に書きます。

<b:loop values='data:post.labels' var='label'>
  <nav id='sublist'><data:label.name/></nav>
</b:loop>

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

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

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