前の関連記事：Blogger:ページ番号付ページナビ(10)ボタンの折り返し表示をやめる
圧縮したJavaScriptを圧縮した前のコードに入れ替える
Blogger:ページ番号付ページナビ(10)ボタンの折り返し表示をやめるでJavaScriptをClosure Compilerで圧縮してHTML/JavaScriptガジェットに入れました。
Chromeのデバッガで整形してもこの圧縮コードは整形できなかったので、まず圧縮コードを圧縮していまいものに入れ替えました。
あまり長いコードだとガジェットの中に入りきらないのですが、今回は入りきり、動作もしました。
モバイルサイトのアイテムページでもページナビが表示されることへの対策
まず単に表示されるdiv要素の初期化をしていないところを修正しました。
PageNavi2_Blogger/PageNavi2_Blogger.js at 35b9229907f7f7a12c3ea9697190c16462fea45a · p--q/PageNavi2_Blogger
140 141 142 143 144 145 |
vars.elements.forEach(function(elem){ elem.textContent = null; // 要素を初期化。 dupNode = divNode.cloneNode(true); // ボタンノードを子ノードとするdivノードを複製する。デフォルトのプロパティしかコピーされない。イベントもコピーされない。 dupNode.onclick = onclickEvent; // 複製したノードにイベントのプロパティを追加する。 elem.appendChild(dupNode); // 既存のノードに追加して表示させる。}); |
アイテムページではページナビが表示されないようにしないといけません。
idがblog-pagerというdivをテンプレートにもともとあったものを置換しているのでアイテムページではページナビに置換されているのです。
しかし、ウェブバージョンでは置換されていないのはどうしてだかわかりません。
これは根本的解決としてページナビを使わないページでは、ページナビモジュールをいれたガジェットを表示させないようにします。
レイアウト画面でガジェットのidを確認するとHTML8でした。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<b:widget id='HTML8' locked='false' mobile='yes' title='' type='HTML' visible='true'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/></b:includable> </b:widget> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<b:widget id='HTML8' locked='false' mobile='yes' title='' type='HTML' visible='true'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'><b:if cond='data:blog.pageType == "index"'> <!-- インデックスページのみに表示させる --> <data:content/></b:if> </div> <b:include name='quickedit'/></b:includable> </b:widget> |
iOS Safariでウェブバージョンのラベルインデックスページをみるとページナビが表示されないことへの対策
これはURLからラベルが取得できていないのが原因でした。
モバイルデバイスからウェブバージョンのラベルインデックスページを見たときのURLはこのようになっていました。
https://p--q.blogspot.jp/search/label/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA?m=0?max-results=7
?が二つあるので正規表現でうまくラベルが取得できていません。
86 87 88 |
if (/\/search\/label\//i.test(thisUrl)) { // ラベルインデックスページの場合URLからラベル名を取得。 vars.postLabel = /\/search\/label\/(.+)(?=\?)/i.exec(thisUrl)[1]; // 後読みは未実装の可能性あるので使わない。} |
86 87 88 89 |
if (/\/search\/label\//i.test(thisUrl)) { // ラベルインデックスページの場合URLからラベル名を取得。 thisUrl = thisUrl.replace("m=0?",""); // モバイルデバイスからウェブバージョンを見た時の文字列を削除。 vars.postLabel = /\/search\/label\/(.+)(?=\?)/i.exec(thisUrl)[1]; // 後読みは未実装の可能性あるので使わない。} |
これで問題が解決しました。
PageNavi2_Blogger/PageNavi2_Blogger.js at 5bcf0855e0bbe4afe71e7ceaaa5e50d9fdb77581 · p--q/PageNavi2_Blogger
再度圧縮したコードに入れ替えて修正完了です。
(2016.12.20追記。ボタンのページ番号はname属性にもたせていましたが、title属性に変更しました。
PageNavi2_Blogger/PageNavi2_Blogger.js at 90090ca3d750637787c5e6e2cfbcd6b3d9fd0c7b · p--q/PageNavi2_Blogger）
0 件のコメント:
コメントを投稿