前の関連記事：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の関数は引数の数が呼び出し側と一致しなくてもエラーにならないようです。
0 件のコメント:
コメントを投稿