Blogger:ページ番号付ページナビ(8)Paginavi_Bloggerモジュールの導入

p--q/PageNavi_Bloggerモジュールをこのブログに導入します。

前の関連記事:Blogger:ページ番号付ページナビ(7)複数表示とモバイルサイトへの対応


BloggerのHTMLのテンプレートの編集した部分の確認


まずPageNavi_Bloggerモジュールがいじるhtml要素を確認します。

 pagenavi.jsはPageNavi_Blogger.all()の引数にいれた配列の要素をidとするhtml要素を置換してページナビを表示させます。

デフォルトのページナビのid="blog-pager"のdiv要素に加えて、このブログではインデックスページの上部にBlogger:ページ番号付ページナビ(7)複数表示とモバイルサイトへの対応でid="blog-pager2"のdiv要素も追加しました。

 さらにアイテムページにはBlogger:ページナビの横に「上に戻る」ボタンを作るで作成した「記事タイトルに戻る」ボタンを追加しており、それらをBlogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法のCSSで修飾しているので、そのCSSに該当する部分をBlogger:ページ番号付ページナビ(4)投稿数が150個を超えても使えるように修正するで抽出しpagenavi.cssに追加しています。

アイテムページのページナビのhtmlを変更していない場合はPageNavi_Blogger/pagenavi.cssの「/*インデックスページ以外のナビのためのCSS*/」以下は不要です。

HTML/JavaScriptガジェットにCSSとJavaScriptを入れる


PageNavi_Blogger/public_html at master · p--q/PageNavi_Bloggerのpagenavi.min.cssはlinuxBean14.04(128)Closure StylesheetsでCSSを圧縮するでpagenavi.cssを圧縮したものです。

この中身をレイアウト画面でfooter-1のセクションに追加したHTML/JavaScriptガジェットに入れます。
<style type="text/css">
#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}#blog-pager2{clear:both;text-align:center;padding:7px;overflow:hidden}.blog-pager{background:none}.displaypageNum a,.showpage a{padding:5px 10px;margin-right:5px;color:#fff;background-color:#2973fc;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}.pagecurrent{padding:5px 10px;margin-right:5px;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}.displaypageNum a:hover,.showpage a:hover{background:#000;text-decoration:none;color:#fff}.pagecurrent{background:#000;text-decoration:none}#blog-pager .showpage,#blog-pager,.pagecurrent{font-weight:bold;color:#fff}#blog-pager .pages{border:#2973fc;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}#blog-pager a{margin:0 5px 0 0;padding:2px 10px 3px;text-decoration:none;color:#fff;background:#2973fc;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}#blog-pager a:hover{color:#fff;text-decoration:none;background:#000}#blog-pager-older-link,#blog-pager-newer-link{float:none}
</style>
次にこれに続けてlinuxBean14.04(126)Closure CompilerでJavaScriptを圧縮するで作成したpagenavi.min.jsの中身を同じHTML/JavaScriptガジェットに貼り付けます。
<script type="text/javascript">
var PageNavi_Blogger=PageNavi_Blogger||function(){function n(){var a=location.href;if(-1!=a.indexOf("/search/label/")){var c=-1==a.indexOf("?updated-max")?"?max":"?updated-max";b.postLabel=a.substring(a.indexOf("/search/label/")+14,a.indexOf(c))}-1==a.indexOf("?q=")&&-1==a.indexOf(".html")&&(b.currentPageNo=-1==a.indexOf("#PageNo=")?1:a.substring(a.indexOf("#PageNo=")+8,a.length),m(b.postLabel?"/feeds/posts/summary/-/"+b.postLabel+"?alt=json-in-script&callback=PageNavi_Blogger.callback.getTotalPostCount&max-results=1":
"/feeds/posts/summary?max-results=1&alt=json-in-script&callback=PageNavi_Blogger.callback.getTotalPostCount"))}function f(a,c){return'<span class="displaypageNum"><a href="#" onclick="PageNavi_Blogger.buttuns.redirect('+a+","+b.perPage+",'"+b.postLabel+"');return false\">"+c+"</a></span>"}function l(a){return b.postLabel?'<span class="displaypageNum"><a href="/search/label/'+b.postLabel+"?max-results="+b.perPage+'">'+a+"</a></span>":'<span class="displaypageNum"><a href="/">'+a+"</a></span>"}function m(a){var b=
document.createElement("script");b.type="text/javascript";b.setAttribute("src",a);document.getElementsByTagName("head")[0].appendChild(b)}function p(a,c,e){var g=b.left_html.join(""),d=b.center_html.join(""),f=b.right_html.join(""),h;if(window.innerWidth>b.window_width||11>c||a>e-b.numPages)h=g+d+f;else if(c>=e-2&&(d+=f,f=null),h='<div style="text-align: center;line-height:2.2;">'+d+"</div>",g||f)h+='<div style="line-height:2.4;">',g&&(h+='<span style="text-align: left;float: left;">'+g+"</span>"),
f&&(h+='<span style="float: right;">'+f+"</span>"),h+="</div>";b.elements.forEach(function(b){b.innerHTML=h})}var k={defaults:{perPage:10,numPages:5,window_width:320},buttuns:{redirect:function(a){b.pageNo=a;"undefined"==b.postLabel&&(b.postLabel=!1);a=(b.pageNo-1)*b.perPage;m(b.postLabel?"/feeds/posts/summary/-/"+b.postLabel+"?start-index="+a+"&max-results=1&alt=json-in-script&callback=PageNavi_Blogger.callback.getURL":"/feeds/posts/summary?start-index="+a+"&max-results=1&alt=json-in-script&callback=PageNavi_Blogger.callback.getURL")}},
callback:{getURL:function(a){a=a.feed.entry[0];var c=encodeURIComponent(a.published.$t.substring(0,19)+a.published.$t.substring(23,29));a="/search/label/"+b.postLabel+"?updated-max="+c+"&max-results="+b.perPage+"#PageNo="+b.pageNo;c="/search?updated-max="+c+"&max-results="+b.perPage+"#PageNo="+b.pageNo;location.href=b.postLabel?a:c},getTotalPostCount:function(a){var c=parseInt(a.feed.openSearch$totalResults.$t,10),e=b.numPages,g=Math.floor(e/2);a=b.currentPageNo-g;1>a&&(a=1);c=Math.ceil(c/b.perPage);
e=a+e-1;e>c&&(e=c);1<a&&b.left_html.push(l(1));3==a&&b.left_html.push(f(2,2));if(3<a){var d=a-b.jumpPages+g;2>d?b.left_html.push(l("\u00ab")):b.left_html.push(f(d,"\u00ab"))}for(d=a;d<=e;d++)b.center_html.push(d==b.currentPageNo?'<span class="pagecurrent">'+d+"</span>":1==d?l(d):f(d,d));e==c-2&&b.right_html.push(f(c-1,c-1));e<c-2&&(g=e+1+g,g>c&&(g=c),b.right_html.push(f(g,"\u00bb")));e<c&&b.right_html.push(f(c,c));p(a,e,c)}},all:function(a){a.forEach(function(a){(a=document.getElementById(a))&&b.elements.push(a)});
0<b.elements.length&&n()}},b={perPage:k.defaults.perPage,numPages:k.defaults.numPages,window_width:k.defaults.window_width,jumpPages:k.defaults.numPages,postLabel:null,pageNo:null,currentPageNo:null,elements:[],left_html:[],right_html:[],center_html:[]};return k}();
</script>
これで準備完了です。

あとはこのPaginavi_Bloggerモジュールを呼び出すJavaScriptを適当な場所から実行すればよいわけです。
<script type="text/javascript">
PageNavi_Blogger.all(["blog-pager","blog-pager2"]);
</script>
今回は同じHTML/JavaScriptガジェットに続けて入れました。

forGadget.html

HTML/JavaScriptガジェットに入れるものを全部まとめるとこのようになります。

これでPaginavi_Bloggerモジュールの導入完了です。

(2016.12.3追記。モバイルバージョンのラベルインデックスページでうまくラベル名が取得できずページナビが表示されていません。モバイルバージョンではm=1とう変数がURLに入っているのが原因です。)

(2016.12.5追記。関数のredirect()の引数が一つなのに3つつけて呼び出していることに気が付きました。JavaScriptでは引数の数はチェックされずエラーにならないようです。HTML5時代のJavaScript入門 - クセが強いJavaScriptの引数を使いこなす:ITpro参照。)

参考にしたサイト


p--q/PageNavi_Blogger
 Paginavi_BloggerモジュールのGitHubリポジトリ。

 HTML5時代のJavaScript入門 - クセが強いJavaScriptの引数を使いこなす:ITpro
JavaScritpの関数は引数の数が呼び出し側と一致しなくてもエラーにならないようです。

次の関連記事:Blogger:ページ番号付ページナビ(9)Paginavi2_Bloggerモジュールの導入

PR

0 件のコメント:

コメントを投稿