LayoutBlockプラグインβ1(その3・テンプレートの作り方)

LayoutBlockプラグインの続きで、テンプレートの作り方を解説します。

1.モジュールの作成

LayoutBlockプラグインでは、レイアウトしたブロックの中に「モジュール」を入れて、ページに出力する内容を決めます。
モジュールは、Movable Type標準のテンプレートモジュールの機能で作ります。

テンプレートタグの組み方は、一般のテンプレートモジュールと同じです。
ただし、一般のテンプレートモジュールと区別するために、テンプレート編集画面の「テンプレートの設定」の「テンプレートモジュールのタイプ」のところで、「レイアウト用」を選択します。

テンプレートモジュールを「レイアウト用」に設定

2.レイアウトを行うテンプレートタグ

次に、インデックステンプレートやアーカイブテンプレートで、レイアウトに沿って出力したい部分に、以下のようなテンプレートタグを入れます。 

<mt:Layout name="レイアウトの名前">
  <mt:LayoutRows>
    行の先頭に出力するHTML等
    <mt:LayoutBlocks>
      ブロックの先頭に出力するHTML等
      <mt:LayoutModules>
        <$mt:IncludeLayoutModule$>
      </mt:LayoutModules>
      <$mt:LayoutRecurse$>
      ブロックの最後に出力するHTML等
    </mt:LayoutBlocks>
    行の最後に出力するHTML等
  </mt:LayoutRows>
</mt:Layout>

「レイアウトの名前」には、レイアウトを作成した時に付けた名前を指定します。
行／ブロックの先頭と最後に出力するHTMLは、お使いのCSSフレームワーク等（のグリッドシステム）に合わせます。

ブロックの先頭のHTMLでは、そのブロックのカラム数（および、必要であれば行全体のカラム数）を、クラスで指定します。
ブロックのカラム数／行全体のカラム数は、それぞれMTLayoutBlockColumnCount／MTLayoutRowColumnCountというテンプレートタグで出力することができます。

3.テンプレートタグの組み方の例

例えば、CSSフレームワークのFoundationの場合、グリッドシステムは以下のようにマークアップするようになっています。
行を表すdiv要素には「row」のクラスをつけます。
また、ブロックを表すdiv要素には、「colmns」と「large-XX」のクラスを付けます（XXはカラム数）。 

<div class="row">
  <div class="large-XX columns">
    ブロックの中身
  </div>
  <div class="large-XX columns">
    ブロックの中身
  </div>
  ・・・
</div>

これをLayoutBlockプラグイン用に書き換えると、以下のようになります。 

<mt:Layout name="レイアウトの名前">
  <mt:LayoutRows>
    <div class="row">
    <mt:LayoutBlocks>
      <div class="large-<$mt:LayoutBlockColumnCount$> columns">
      <mt:LayoutModules>
        <$mt:IncludeLayoutModule$>
      </mt:LayoutModules>
      <$mt:LayoutRecurse$>
      </div>
    </mt:LayoutBlocks>
    </div>
  </mt:LayoutRows>
</mt:Layout>