前の関連記事：Blogger:ページ番号付ページナビ(14)1MB制限に対応するナビの作成:その2
PageNaviIndex_Blogger.jsを読み込むHTML/JavaScriptガジェットを作成
テストブログのレイアウト画面で適当なところにHTML/JavaScriptガジェットを追加します。
今回はfooter-2-2に追加しました。
<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モジュールで表示させる
<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>
先ほどコメントアウトした<b:if cond='!data:mobile'>の下にこのコードを挿入します。これでウェブバージョンのインデックスページが置換されるはずです。
EclipseのPageNaviIndex_BloggerプロジェクトのWebContentフォルダ内のindex.htmlを右クリック→Run As→Run on Server。
これでHTTP Previewサーバーを起動します。
index.htmlからテストブログに飛んでみます。
ちょっとまだデザインを修正しないといけませんが、PageNaviIndex_Bloggerモジュールが動いていることが確認できました。
モバイルサイトのインデックスページをPageNaviIndex_Bloggerモジュールで表示させる
<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>
このBlog1ウィジェットのmobile-mainインクルードを書き換えます。 <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モジュールで表示させるようにしています。これだけではダメで、PageNaviIndex_Blogger.jsを読み込むHTML/JavaScriptガジェットをモバイルサイトでも有効にしないといけません。
Blogger：レイアウト編集(10)ウィジェットのIDを確認する方法で確認するとこのウィジェットIDはHTML1でした。
HTMLの編集でHTML1ウィジェットにmobile='yes'を設定しました。
これでモバイルサイトのインデックスページもPageNaviIndex_Bloggerモジュールで表示できるようになりましたが、だいぶ修正が要りそうですね。
0 件のコメント:
コメントを投稿