Blogger自作ページネーション・高速化

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

Blogger自作ページネーション の高速化版で総件数の取得時間が短くなります。「ラベル」ガジェットの「ラベルごとに投稿数を表示する」を有効にしていて、1投稿に1つのラベルを付けている場合のみ有効です。ラベルを付けていなかったり、2つ以上付けてる場合は無効です。

feedを使わずに、ラベルの件数からラベルごとの総件数を取得し、全てを合計してトップページの総件数を取得しています。feedを使わないので、短時間で処理が終わります。

代表的な公式テンプレートのEmporioとSimpleに対応しています。Emporioはwidgetversion2、Simpleはwidgetversion1です。

ページネーションのjavascriptは以下になります。テンプレートの</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;
document.addEventListener('DOMContentLoaded',setIndexPager);
function setIndexPager(){
  if(textQuery){
    setIndexPagerQuery();
    return;
  }
  if(sumcnt==0){
    let objlist=document.getElementById('Label1').getElementsByTagName('li');
    let allcount=0;
    let linklist=new Array();
    for(let i=0;i<objlist.length;i++){
      let labellist=objlist[i].textContent.split(/\(|\)/);
      let labelname=labellist[0];
      let labelcount=parseInt(labellist[1])||0;
      if(labelcount==0){
        let spanlist=objlist[i].getElementsByTagName('span');
        if(spanlist.length==1){
          let spantext=spanlist[0].textContent;
          labelname=objlist[i].textContent.slice(0,-1*spantext.length);
          labelcount=parseInt(spantext.replace(/[^0-9]/g,''))||0;
        }
      }
      linklist[encodeURIComponent(labelname.trim())]=labelcount;
      allcount+=labelcount;
    }
    if(textLabel){
      sumcnt=linklist[textLabel]||0;
    }else{
      sumcnt=allcount;
    }
  }
  if(sumcnt>0){
    setHtmlPager();
    return;
  }
}
function setIndexPagerQuery(){
  if(sumcnt>0&&(sumcnt%queryMaxResults)!=0){
    setHtmlPager();
    return;
  }
  let feedUrl='/feeds/posts/summary?alt=json&q='+textQuery+'&max-results=1&start-index='+(sumcnt+queryMaxResults+1);
  fetch(feedUrl)
  .then(response=>response.json())
  .then(json=>{
    let totalResults=parseInt(json.feed.openSearch$totalResults.$t)||0;
    if(totalResults==1){
      sumcnt+=queryMaxResults;
      setHtmlPager();
      return;
    }
    feedUrl='/feeds/posts/summary?alt=json&q='+textQuery+'&max-results='+(queryMaxResults-maxResults+1)+'&start-index='+(sumcnt+1);
    fetch(feedUrl)
    .then(response=>response.json())
    .then(json=>{
      let totalResults=parseInt(json.feed.openSearch$totalResults.$t)||0;
      sumcnt+=totalResults;
      setHtmlPager();
    })
    .catch(error=>console.log(error));
  })
  .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="#" class="pager-a" onclick="return pager('+(currentPage-1)+')"><</a>';
      html+='<a href="#" class="pager-a" onclick="return pager('+i+')">'+i+'</a>';
    }else if(i==totalPage){
      html+='<a href="#" class="pager-a" onclick="return pager('+i+')">'+i+'</a>';
      html+='<a href="#" class="pager-a" onclick="return pager('+(currentPage+1)+')">></a>';
    }else if(Math.abs(i-currentPage)<dispPage){
      html+='<a href="#" class="pager-a" onclick="return pager('+i+')">'+i+'</a>';
    }else if(Math.abs(i-currentPage)==dispPage){
      html+='...';
    }
  }
  pagerobj.innerHTML=html;
}
function pager(targetPage){
  if(textQuery){
    location.href='/search?q='+textQuery+'&max-results='+maxResults+'&by-date=true&start='+(targetPage-1)*maxResults+'&sumcnt='+sumcnt;
  }else if(targetPage==1&&textLabel){
    location.href=location.pathname;
  }else if(targetPage==1){
    location.href='/';
  }else{
    let feedUrl='/feeds/posts/summary';
    if(textLabel) feedUrl+='/-/'+textLabel;
    feedUrl+='?alt=json&max-results=1&start-index='+(targetPage-1)*maxResults;
    fetch(feedUrl)
    .then(response=>response.json())
    .then(json=>{
      let pubDate=json.feed.entry[0].published.$t;
      pubDate=encodeURIComponent(pubDate.substring(0,19)+pubDate.substring(23,29));
      let url='/search';
      if(textLabel) url+='/label/'+textLabel;
      location.href=url+'?updated-max='+pubDate+'&max-results='+maxResults+'&start='+(targetPage-1)*maxResults+'&sumcnt='+sumcnt;
    })
    .catch(error=>console.log(error));
  }
  return false;
}
function getUrlParam(key){
  let searchlist=location.search.substring(1).split('&');
  for(let i=0;i<searchlist.length;i++) if(searchlist[i].split('=')[0]==key) return decodeURI(searchlist[i].split('=')[1]);
  return '';
}
/*]]>*/
</script>
</b:if>

cssは以下のようになります。大きさや色はブログにあうように変えてください。

<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>