April 5, 2014

Bloggerのテンプレートの構造と編集方法(3)-実際の記述ー

ついに実際のコードにたどり着きました。
制御構造とデータについて説明します。

ブログ全体や投稿のデータを読出し、それを制御して成形してウィジットとして表示していく、実際の処理の部分の記載方法について示します。
  1. Bloggerのテンプレートの構造と編集方法(1)-ブログシステム全体像-
  2. Bloggerのテンプレートの構造と編集方法(2)-テンプレートの全体像-
  3. Bloggerのテンプレートの構造と編集方法(3)-実際の記述-(この記事)


呼び出し構造(include, includable)

Bloggerのテンプレートが分かりにくく感じるのは呼び出し構造が階層的になっているからだと思います。ここでいう呼び出し構造というのは、includableとincludeを使った仕組みのことです。

includableはプログラムでいうサブルーチン・関数・サブプログラムに当たるもので、includeによって呼び出すことができます。この仕組みを使って、ループにより繰り返し処理することで同じフォーマットの投稿記事の表示命令を簡素化したり、条件に応じて呼び出すincludableを変えることで、メインページ、アイテムページ、モバイルページなどすべてのBloggerのページの表現を行っています。 呼び出し構造のイメージを以下に示します。 繰り返しを行うloop命令によって、postが呼び出されて繰り返され、出力されています。

<b:includable id='main'>
   <b:loop var='i' values='posts'>

       
       <b:include name='post' data='i'/>
   </b:loop>
</b:includable>

<b:includable id='post' var='p'>
   Title: <data:p.title/>
</b:includable>
[Not supported by viewer]
<b:includable id='main'>
   <b:loop var='i' values='posts'>
     
Title: <data:i.title/>
   </b:loop>
</b:includable>
[Not supported by viewer]
<b:includable id='main'>
  
Title: <data:post1.title/>
   Title: <data:post2.title/>
   Title: <data:post3.title/>    ...
</b:includable>
[Not supported by viewer]
IncludeLoop

loop, if/elseによる制御

先ほどのコードで出てきたloopは繰り返しを制御する文です。他にif/else文による条件分岐もできます。条件分岐を上手く使えば、トップページにだけコンテンツを追加したり、月替わりの表示をしたりできるようです。
レイアウト用ウィジット タグ - Blogger ヘルプ
https://support.google.com/blogger/answer/46995?hl=ja

データの呼び出し

様々なデータを呼び出して表示することが可能です。呼び出したデータは前項の制御文の引き数に指定できるので、データと制御の組み合わせで色々なことが出来ます。 コード例はもう少し勉強してから掲載予定…。
レイアウト データ タグ - Blogger ヘルプ
https://support.google.com/blogger/answer/47270
found, known and done.: Bloggerのメインページの投稿の上にコンテンツを表示する
http://foundknownanddone.blogspot.jp/2014/04/blogger-add-contents-above-posts-in-main-page.html

その他

どうやって編集するんだろう、と眺めてばかりいたテンプレートですが、少しづつ理解が進んできました。
記事を書こうとして、ついでにSVGの勉強にになったり。
オンラインで便利なエディタが色々公開されてるんですね。
Untitled Diagram.xml - draw.io
https://www.draw.io/#

No comments :

Post a Comment