サイト制作の下準備 PaniniのPartialsを使ってレイアウトしてみる

2016年3月6日

foundation, Panini, Partials

Foundationの機能にあるPaniniのPartialsを使って、サイト制作の下準備をしていきます。詳細は以下を参照してください。

1. foundation newでZurb Templateを選んで、Projectを作成します。

2. Projectに、bowerでhtml5shivをインストールします。下記参照（とは言えこれで正しいのか未確認）

『foundation6でhtml5shivを使う　bowerでインストールしよう』
http://foundation-site.com/archives/219.html

3. src/layouts/default.htmlを編集します。とりあえず</head>の前にhtml5shivを読み込んでおきます。

4. さらにsrc/layouts/default.htmlを編集します。body内のヘッダー部分、グローバルナビゲーション部分、フッター部分を、それぞれ別ファイルに切り出しておきます。

PaniniのPartialsを利用して読み込むため、以下のように編集します。

  
    {{> header}}
    {{> navigation}}
    {{> body}}
    {{> footer}}

5. body部分は、src/pages/index.htmlが読み込まれます。現在のコードを元にページを作っても構いませんが、一旦すべて消去します。とりあえず、以下だけ書いておきます。

index.html


ボディーです

6. header、navigation、footer部分は、src/partials以下に、それぞれファイルを作成します。

header.html


ヘッダーです

navigation.html


グローバルナビゲーションです

footer.html


フッターです

7. すべて整ったら、http://localhost:8000にアクセスしてみます。以下が表示されればOKです。

    ヘッダーです
    グローバルナビゲーションです
    ボディーです
    フッターです

最後に、dist/index.htmlのコードを見てみましょう。



  
    
    
    
    Foundation for Sites
    

  
  

    
    ヘッダーです

    
    グローバルナビゲーションです

    
    ボディーです

    
    フッターです

これまでPHPでやっていたことが簡単にできてしまいました。これをベースに、ページを組み立てていきましょう。