前の関連記事：Blogger:ページ番号付ページナビ(14)1MB制限に対応するナビの作成:その2
PageNaviIndex_Blogger.jsを読み込むHTML/JavaScriptガジェットを作成
テストブログのレイアウト画面で適当なところにHTML/JavaScriptガジェットを追加します。
今回はfooter-2-2に追加しました。
1 |
<script src = "http://localhost:8080/PageNaviIndex_Blogger/PageNaviIndex_Blogger.js"></script> |
これでEclipseでHTTP Previewサーバーを起動しておけば、PageNaviIndex_Blogger.jsがテストブログに読み込まれることになります。
ブログのテンプレートを編集する
PageNaviIndex_Bloggerモジュールは表示させる投稿の繰り返しまでするので、loopの部分を置き換えます。
テーマの「HTMLの編集」ボタンをクリック。
ウィジェットへ移動→Blog1。
まずBlogger:ページ番号付ページナビ(13)1MB制限に対応するナビの作成:その1と同様にまずウェブバージョンを置き換えます。
Blog1ウィジェットのmainインクルードの中にある<b:if cond='!data:mobile'>の行頭をクリックして折りたたんだ後その上下に<style>/*と*/</style>を挿入してコメントアウトします。
(2017.3.5追記。このようにコメントアウトしていても、変数に投稿内容が代入されるようで、投稿内のタグに反応するのか、おかしな表示なるときがあるので、最終的にはコメントアウトではなく、削除することにしました。)
「テーマを保存」ボタンをクリックしてテンプレートを保存したあとウェブバージョンのメインページをみてみると、投稿の表示がすべて消えているのがわかります。
モバイルバージョンの方も確認してみます。
Chromiumで表示させたページ内で右クリック→検証。
Toggle device toolbarボタンをクリックして、再読込ボタンをクリックするとモバイルバージョンが表示されます。
普通に表示されます。
モバイルサイトにHTMLの編集が反映されるようにします。
テーマでギアボタンをクリック。
「プレビュー」ボタンをクリックするとウェブバージョンと同様に投稿が表示されていないことがわかります。
ちゃんとHTMLの編集の結果が反映されています。
ウェブバージョンのインデックスページをPageNaviIndex_Bloggerモジュールで表示させる
967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 |
<b:if cond='!data:mobile'> <!-- モバイルサイトでないとき --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <b:if cond='(data:blog.pageType == "index") or (data:blog.searchLabel;) or (data:blog.pageType == "archive")'> <!-- インデックスページのとき、ラベルインデックスページのとき、月のアーカイブページのとき --> <div class='blog-pager' id='pagenaviindex'/><!-- ページナビとインデックスページ --> <b:else/> <!-- 上記以外のページのとき --> <b:loop values='data:posts' var='post'> <div class='post-outer'> <b:include data='post' name='post'/> </div> <b:include name='nextprev'/> <b:include name='feedLinks'/> </b:loop> </b:if> <b:if cond='data:numPosts != 0'> </div></div> <!-- これがないとカラムがずれる --> </b:if> </div> <b:else/> <!-- モバイルサイトのとき --> <b:include name='mobile-main'/></b:if> |
これでウェブバージョンのインデックスページが置換されるはずです。
EclipseのPageNaviIndex_BloggerプロジェクトのWebContentフォルダ内のindex.htmlを右クリック→Run As→Run on Server。
これでHTTP Previewサーバーを起動します。
index.htmlからテストブログに飛んでみます。
ちょっとまだデザインを修正しないといけませんが、PageNaviIndex_Bloggerモジュールが動いていることが確認できました。
モバイルサイトのインデックスページをPageNaviIndex_Bloggerモジュールで表示させる
1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 |
<b:includable id='mobile-main' var='top'> <!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <b:if cond='data:blog.pageType == "index"'> <b:loop values='data:posts' var='post'> <b:include data='post' name='mobile-index-post'/> </b:loop> <b:else/> <b:loop values='data:posts' var='post'> <b:include data='post' name='mobile-post'/> </b:loop> </b:if> </div> <b:include name='mobile-nextprev'/></b:includable> |
1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 |
<b:includable id='mobile-main' var='top'> <!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/><b:if cond='(data:blog.pageType == "index") or (data:blog.searchLabel;) or (data:blog.pageType == "archive")'> <!-- インデックスページのとき、ラベルインデックスページのとき、月のアーカイブページのとき --> <div class='blog-pager' id='pagenaviindex'/><!-- ページナビとインデックスページ --> <b:else/> <b:loop values='data:posts' var='post'> <b:include data='post' name='mobile-post'/> </b:loop><b:include name='mobile-nextprev'/> </b:if> </div><!-- <b:include name='mobile-nextprev'/> --></b:includable> |
これだけではダメで、PageNaviIndex_Blogger.jsを読み込むHTML/JavaScriptガジェットをモバイルサイトでも有効にしないといけません。
Blogger：レイアウト編集(10)ウィジェットのIDを確認する方法で確認するとこのウィジェットIDはHTML1でした。
HTMLの編集でHTML1ウィジェットにmobile='yes'を設定しました。
これでモバイルサイトのインデックスページもPageNaviIndex_Bloggerモジュールで表示できるようになりましたが、だいぶ修正が要りそうですね。
0 件のコメント:
コメントを投稿