Blogger自作ページネーション・キャッシュ高速化

一覧の下のページ送りやページャーと呼ばれるページごとのリンクの自作テンプレートのjavascriptキャッシュ高速化版です。

Blogger自作ページネーション のキャッシュ高速化版です。検索以外はfeedを1度も使わず、検索は100件以上検索されることが無かったのでfeedを1回だけに簡略化しています。テンプレートの</body>の前に書きます。

<b:if cond='data:view.isMultipleItems and !data:view.isArchive'>
<script>
/*<![CDATA[*/
const maxResults=10;
const dispPage=3;
const queryMaxResults=maxResults*10;
const textQuery=getUrlParam('q');
const textLabel=location.pathname.split('/search/label/')[1]||'';
const start=parseInt(getUrlParam('start'))||0;
let sumcnt=parseInt(getUrlParam('sumcnt'))||0;
if(start>sumcnt) sumcnt=start+maxResults;
function setIndexPager(){
  if(textQuery){
    setIndexPagerQuery();
    return;
  }
  if(sumcnt==0&&textLabel){
    for(let i=0;i<ALLLIST.length;i++) if(textLabel==encodeURIComponent(ALLLIST[i]['label'])) sumcnt++;
  }else if(sumcnt==0){
    sumcnt=Object.keys(ALLURLLIST).length;
  }
  if(sumcnt>0) setHtmlPager();
}
function setIndexPagerQuery(){
  if(sumcnt>0&&(sumcnt%queryMaxResults)!=0){
    setHtmlPager();
    return;
  }
  let feedUrl='/feeds/posts/summary?alt=json&q='+textQuery+'&max-results='+queryMaxResults+'&start-index='+(sumcnt+1);
  fetch(feedUrl)
  .then(response=>response.json())
  .then(json=>{
    let totalResults=parseInt(json.feed.openSearch$totalResults.$t)||0;
    if(totalResults==0) totalResults=-1;
    sumcnt+=totalResults;
    setHtmlPager();
  })
  .catch(error=>console.log(error));
}
function setHtmlPager(){
  let pagerobj=document.getElementById('blog-pager');
  if(!pagerobj) return;
  let currentPage=start/maxResults+1;
  let totalPage=Math.ceil(sumcnt/maxResults);
  let html='';
  for(let i=1;i<=totalPage;i++){
    if(i==currentPage){
      html+='<span id="pager-current">'+i+'</span>';
    }else if(i==1){
      html+='<a href="'+getPagerUrl(currentPage-1)+'" class="pager-a"><</a>';
      html+='<a href="'+getPagerUrl(i)+'" class="pager-a">'+i+'</a>';
    }else if(i==totalPage){
      html+='<a href="'+getPagerUrl(i)+'" class="pager-a">'+i+'</a>';
      html+='<a href="'+getPagerUrl(currentPage+1)+'" class="pager-a">></a>';
    }else if(Math.abs(i-currentPage)<dispPage){
      html+='<a href="'+getPagerUrl(i)+'" class="pager-a">'+i+'</a>';
    }else if(Math.abs(i-currentPage)==dispPage){
      html+='...';
    }
  }
  pagerobj.innerHTML=html;
}
function getPagerUrl(targetPage){
  let returl='';
  if(textQuery){
    returl='/search?q='+textQuery+'&max-results='+maxResults+'&by-date=true&start='+(targetPage-1)*maxResults+'&sumcnt='+sumcnt;
  }else if(targetPage==1&&textLabel){
    returl=location.pathname;
  }else if(targetPage==1){
    returl='/';
  }else{
    for(let i=0,count=0;i<ALLLIST.length;i++){
      if((!textLabel)||(textLabel==encodeURIComponent(ALLLIST[i]['label']))) count++;
      if(count==((targetPage-1)*maxResults)){
        let pubDate=encodeURIComponent(ALLLIST[i]['published'].substring(0,19)+ALLLIST[i]['published'].substring(23,29));
        let url='/search';
        if(textLabel) url+='/label/'+textLabel;
        returl=url+'?updated-max='+pubDate+'&max-results='+maxResults+'&start='+(targetPage-1)*maxResults+'&sumcnt='+sumcnt;
        break;
      }
    }
  }
  return returl;
}
/*]]>*/
</script>
</b:if>

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

<script>
function mainMenu(){
<b:if cond='data:view.isMultipleItems and !data:view.isArchive'>
  setIndexPager();
</b:if>
}
</script>

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

<style>
#pager-current,.pager-a{
display:inline-block;
padding:.4em .8em;
margin:0 .2em;
border-radius:.5em;
}
#pager-current{
color:#fff;
background:#999;
}
.pager-a{
color:inherit;
background:#fff;
border:1px solid #999;
}
</style>

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