雑記

【備忘録】Bloggerテンプレートのページナビゲーション設定の修正と追加。

  /
【備忘録】Bloggerテンプレートのページナビゲーション設定の修正と追加。
このブログは（この記事を書いている時点で）Bloggerテンプレートの「Vaster」を使っている。

先日，このテンプレートのページナビゲーションを取得している

スプリクトファイルが消えてしまったようなので

新たにページナビゲーションを導入してみた。

ざっくりいうと……
  1. ページナビゲーション機能を導入する。

ページナビゲーション機能を導入する。

今回参照したWEBサイトは記事の最後に掲載する。

まずは端的に手段だけ並べる。

1. CSSの追加

Bloggerのダッシュボードから「テンプレート」を選択し

「HTMLの編集」を選択する。

次に，ショートカットCtrl+Fで検索ボックスを開き，

「</b:skin>」を検索する。

このタグの直前に以下のスクリプトを追加する。

#blog-pager{
  clear:both;margin:30px auto;
  text-align:center; padding: 7px;
}
.blog-pager {
  background: none;
}
.displaypageNum a,.showpage a,.pagecurrent{
  font-size: 14px;
  padding: 5px 12px;
  margin-right:5px; color: #666; 
  background-color:#eee;
}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{
  background:#359BED;
  text-decoration:none;
  color: #fff;
}
#blog-pager .pagecurrent{
  font-weight:bold;
  color: #fff;
  background:#359BED;
}
 .showpageOf{
  display:none!important
}
#blog-pager .pages{
  border:none;
}
]]>

2. HTMLの追加

次に，先ほどの検索ボックスを使って，

今度は「</body>」を検索する。

そして，このタグの直前に以下のスクリプトを追加する。

<b:if cond=' data:blog.pageType != &quot;item&quot;'>
<b:if cond=' data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>
/*<![CDATA[*/
var perPage=3;
var numPages=3;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
if(typeof firstText=="undefined")firstText="First";
if(typeof lastText=="undefined")lastText="Last";
var noPage;var currentPage;
var currentPageNo;
var postLabel;
pagecurrentg();
function looppagecurrentg(pageInfo){
    var html='';
    pageNumber=parseInt(numPages / 2);
  if(pageNumber==numPages-pageNumber){
    numPages=pageNumber*2+1
  }
  pageStart=currentPageNo-pageNumber;
  if(pageStart<1)
    pageStart=1;
    lastPageNo=parseInt(pageInfo / perPage)+1;
  if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;
    pageEnd=pageStart+numPages-1;
    if(pageEnd>lastPageNo)pageEnd=lastPageNo;
    html+="<span class='showpageOf'>Page "+currentPageNo+' of  '+lastPageNo+"</span>";
  var prevNumber=parseInt(currentPageNo)-1;
  if(currentPageNo>1){
    if(currentPage=="page"){
      html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'
    }else{
      html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'
    }
  }
  if(currentPageNo>2){
    if(currentPageNo==3){
      if(currentPage=="page"){
        html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'
      }else{
        html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'
      }
    }else{
      if(currentPage=="page"){
        html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');
      return false">'+prevText+'</a></span>'
      }else{
        html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');
      return false">'+prevText+'</a></span>'
      }
    }
  }
  if(pageStart>1){
    if(currentPage=="page"){
      html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'
    }else{
      html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'
    }
  }
  if(pageStart>2){
    html+=' ... '
  }for(var jj=pageStart;jj<=pageEnd;jj++){
    if(currentPageNo==jj){
      html+='<span class="pagecurrent">'+jj+'</span>'
    }else if(jj==1){
      if(currentPage=="page"){
        html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'
      }else{
        html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'
      }
    }else{
      if(currentPage=="page"){
        html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'
      }else{
        html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'
      }
    }
  }
  if(pageEnd<lastPageNo-1){
    html+='...'
  }
  if(pageEnd<lastPageNo){
    if(currentPage=="page"){
      html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');
    return false">'+lastPageNo+'</a></span>'
    }else{
      html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'
    }
  }
  var nextnumber=parseInt(currentPageNo)+1;
  if(currentPageNo<(lastPageNo-1)){
    if(currentPage=="page"){
      html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');
    return false">'+nextText+'</a></span>'
    }else{
      html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');
    return false">'+nextText+'</a></span>'
    }
  }
  if(currentPageNo<lastPageNo){
    if(currentPage=="page"){
      html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');
    return false">'+lastText+'</a></span>'
    }else{
      html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');
    return false">'+lastText+'</a></span>'
    }
  }
  var pageArea=document.getElementsByName("pageArea");
  var blogPager=document.getElementById("blog-pager");
  for(var p=0;p<pageArea.length;p++){
    pageArea[p].innerHTML=html
  }
  if(pageArea&&pageArea.length>0){
    html=''
  }
  if(blogPager){
    blogPager.innerHTML=html
  }
}
function totalcountdata(root){
  var feed=root.feed;
  var totaldata=parseInt(feed.openSearch$totalResults.$t,10);
  looppagecurrentg(totaldata)
}
function pagecurrentg(){
  var thisUrl=urlactivepage;
  if(thisUrl.indexOf("/search/label/")!=-1){
    if(thisUrl.indexOf("?updated-max")!=-1){ postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))
    }else{ postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))
    }
  }
  if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){
    if(thisUrl.indexOf("/search/label/")==-1){
      currentPage="page";
      if(urlactivepage.indexOf("#PageNo=")!=-1){         currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)
      }else{
        currentPageNo=1
      }
      document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")
      }else{
        currentPage="label";
        if(thisUrl.indexOf("&max-results=")==-1){
          perPage=20
        }
        if(urlactivepage.indexOf("#PageNo=")!=-1){           currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)
        }else{
          currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')
        }
      }
    }
    function redirectpage(numberpage){
      jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];
      var newInclude=document.createElement('script');
      newInclude.type='text/javascript';
      newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");
      nameBody.appendChild(newInclude)
    }
    function redirectlabel(numberpage){
      jsonstart=(numberpage-1)*perPage;noPage=numberpage;
      var nameBody=document.getElementsByTagName('head')[0];
      var newInclude=document.createElement('script');
      newInclude.type='text/javascript';
      newInc
lude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");
      nameBody.appendChild(newInclude)
    }
    function finddatepost(root){
      post=root.feed.entry[0];
      var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
      var timestamp=encodeURIComponent(timestamp1);
      if(currentPage=="page"){
        var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage
      }else{
        var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage
      }
      location.href=pAddress
    }
 /*]]>*/</script>
</b:if>
</b:if>

すると，以下のようなページナビゲーションが追加される。

3. ページナビゲーションの調整

このページナビゲーション，

初期設定は1ページ3記事までの表示になっているので

以下のスクリトの数字を変更して表示される記事件数を好みに合わせて

変更する。

perPage: 7,
numPages: 6,

これでおしまい。

参照

ABOUT ME
uru
日常生活と科学をむすぶ、学びのデザイナー。新しいガジェットやギアが大好き。好きなことは読書、バイク、旅、温泉、アニメ鑑賞その他いろいろ。生活をよりシンプルに心地よいものへ変えていきたい。
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。