BEGINNER GUIDEの内容を途中まで簡単になぞってみる。わかりやすく説明してくれてるので詳しく知りたいはそちらをご覧ください。
DocPadのプロジェクトを作る
terminal.app を立ち上げ、適当なフォルダ内で下記コマンドを入力する。
$ docpad run
するとterminal.appの画面上でskeltonを選択できるようになるので、「No Skelton」の番号を入力する。
自動的にプロジェクトのファイルのダウンロードが始まるので、フォルダ内は下記のような構成になる。
|-- docpad.coffee
|-- node_modules
| |-- node_modules
| |-- docpad
|
|-- package.json
|-- README.md
|
|-- src
| |-- documents
| |-- files
| |-- layouts
ページを作る
srcフォルダ内にある documents files layouts フォルダの中身は空の状態になっている。まずは documents フォルダ内に下記のような内容のindex.htmlを作る
<html>
<head>
<title>Welcome! | My Website</title>
</head>
<body>
<h1>Welcome!</h1>
<p>Welcome to My Website!</p>
</body>
</html>
するとプロジェクトフォルダの直下に out フォルダが出来上がり、その中にもindex.htmlが出来上がっている。http://localhost:9778/とブラウザで入力すると、この out フォルダ内のファイルが表示されるようになる。
layouts を作る
次に、ページの共通部分などの外枠部分を layouts としてまとめる方法について。
layouts フォルダ内に下記のような内容のdefault.html.ecoを作る。
<html>
<head>
<title><%= @document.title %> | My Website</title>
</head>
<body>
<h1><%= @document.title %></h1>
<%- @content %>
</body>
</html>
続いて、 documents 内のindex.htmlを下記のように編集する。
---
title: "Welcome!"
layout: "default"
isPage: true
---
<p>Welcome to My Website!</p>
でもこのままではHTMLのWebページとしてちゃんと表示されないので、ecoというプラグインをインストールする。
$ docpad install eco
そうすることで layouts 内のファイルと documents 内のファイルを組み合わせて表示させることができる。http://localhost:9778/ を見てみると、ちゃんとWebページとして表示されていることが確認できると思う。試しにindex.htmlのp要素の中身を編集してブラウザをリロードすると編集内容が反映される。
こうすることでページ内のコンテンツを index.htmlの例のように簡潔に書くことができるし、共通部分とかは layouts に持たせておくことで、メンテナンスがしやすくなる。
DocPadでは、こういう感じでページを作っていくのがひとつのやり方になる。他にも便利なプラグインがたくさんあるので必要に応じてインストールすることで、効率的に制作をすすめることができる。
という感じ。
またそのうちBEGINNER GUIDEの続き書く。