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

Foundationサイト制作イメージ Partials

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

Panini | Foundation for Sites 6 Docs
A flat file compiler that powers our prototyping template. Create pages with consistent layouts and reusable partials with ease.

作業手順

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を利用して読み込むため、以下のように編集します。

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

index.html

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

Foundationサイト制作イメージ2

header.html

navigation.html

footer.html

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

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

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

コメント

  1. […] partialsで分解してある各部を修正していきましょう。 ⇒ Partialsの復習はこちらをご覧ください。 […]