No SkeltonでDocPadのプロジェクトを作る #docpad

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を作る

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を作る。

default.html.eco

<html>
<head>
    <title><%= @document.title %> | My Website</title>
</head>
<body>
    <h1><%= @document.title %></h1>
    <%- @content %>
</body>
</html>

続いて、documents 内のindex.htmlを下記のように編集する。

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の続き書く。