punchは、サクッとHTMLを作れるパッケージです。JSONでデータ部分を、Mustacheでテンプレートを記述してサーバを起動するとHTMLができあがります。
$ npm install -g punch $ mkdir sample $ cd sample $ npm install mime $ punch setup
punch setup で以下のようなディレクトリが作成されます。
$ tree . . ├── config.json ├── contents └── templates
templatesディレクトリには、mustache形式でテンプレートを作成していきます。contentsディレクトリには、JSON形式でmustacheファイルへのデータwp記述します。
templates/about.mustache
<!doctype html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
<p>{{{overview}}}</p>
<ul>
{{#team}}
<li><strong>{{name}}</strong> - {{bio}}</li>
{{/team}}
</ul>
</body>
</html>
contents/about.json
{
"title": "About Us",
"team": [
{
"name": "Pointy-Haired Boss",
"bio": "Incompetent Manager"
},
{
"name": "Wally",
"bio": "Senior Engineer"
},
{
"name": "Dilbert",
"bio": "Engineer"
}
]
}
サーバを起動します。
$ punch server Server is running on localhost:9009 Generating the site... Serving requests...
ターミナルに戻ると、publicディレクトリにabout.htmlが作成されています。
<!doctype html>
<head>
<meta charset="utf-8">
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p></p>
<ul>
<li><strong>Pointy-Haired Boss</strong> - Incompetent Manager</li>
<li><strong>Wally</strong> - Senior Engineer</li>
<li><strong>Dilbert</strong> - Engineer</li>
</ul>
</body>
</html>
mustacheで見た目よくテンプレートを作成できます。ちょっとしたHTML作成にはいいかもれません。
0 件のコメント:
コメントを投稿