Blogger:ページ番号付ページナビ(15)1MB制限に対応するナビの作成:その3

EclipseのHTTP Preview サーバを使ってインデックスページをPageNaviIndex_Bloggerモジュールで表示させるところまでです。

前の関連記事: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 == &quot;index&quot;) or (data:blog.searchLabel;) or (data:blog.pageType == &quot;archive&quot;)'> <!-- インデックスページのとき、ラベルインデックスページのとき、月のアーカイブページのとき -->
         <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'>
  &lt;/div&gt;&lt;/div&gt; <!-- これがないとカラムがずれる -->
 </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 == &quot;index&quot;'>
        <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 == &quot;index&quot;) or (data:blog.searchLabel;) or (data:blog.pageType == &quot;archive&quot;)'> <!-- インデックスページのとき&#12289;ラベルインデックスページのとき&#12289;月のアーカイブページのとき -->
         <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モジュールで表示できるようになりましたが、だいぶ修正が要りそうですね。

次の関連記事:Blogger:ページ番号付ページナビ(16)1MB制限に対応するナビの作成:その4

PR

0 件のコメント:

コメントを投稿