HTMLテンプレートエンジンをインストールする【pug】
使えることを確認した。
成果物
前提
$ node -v v16.14.2 $ npm -v 8.5.0
情報源
手順
sudo npm install -g pug sudo npm install -g pug-cli
| npm | 概要 |
|---|---|
pug |
Node.jsのJSコードで利用するライブラリ |
pug-cli |
端末で使うpugコマンド |
バージョン確認
pug --version
pug version: 2.0.4 pug-cli version: 1.0.0-alpha6
pug --version
ヘルプ確認
pug --help
Usage: pug [options] [dir|file ...] Options: -V, --version output the version number -O, --obj <str|path> JSON/JavaScript options object or file -o, --out <dir> output the rendered HTML or compiled JavaScript to <dir> -p, --path <path> filename used to resolve includes -b, --basedir <path> path used as root directory to resolve absolute includes -P, --pretty compile pretty HTML output -c, --client compile function for client-side -n, --name <str> the name of the compiled template (requires --client) -D, --no-debug compile without debugging (smaller functions) -w, --watch watch files for changes and automatically re-render -E, --extension <ext> specify the output file extension -s, --silent do not output logs --name-after-file name the template after the last section of the file path (requires --client and overriden by --name) --doctype <str> specify the doctype on the command line (useful if it is not specified by the template) -h, --help output usage information Examples: # Render all files in the `templates` directory: $ pug templates # Create {foo,bar}.html: $ pug {foo,bar}.pug # Using `pug` over standard input and output streams $ pug < my.pug > my.html $ echo 'h1 Pug!' | pug # Render all files in `foo` and `bar` directories to `/tmp`: $ pug foo bar --out /tmp # Specify options through a string: $ pug -O '{"doctype": "html"}' foo.pug # or, using JavaScript instead of JSON $ pug -O "{doctype: 'html'}" foo.pug # Specify options through a file: $ echo "exports.doctype = 'html';" > options.js $ pug -O options.js foo.pug # or, JSON works too $ echo '{"doctype": "html"}' > options.json $ pug -O options.json foo.pug
Hello World
テキストエディタで以下some.pugファイルをつくる。
some.pug
doctype html
html
head
meta(charset="utf-8")
title タイトル
body
h1 見出し
p 本文。
以下pugコマンドでHTMLファイルを出力する。
pug some.pug --pretty
出力されたHTMLファイルの内容は以下。
some.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <h1>見出し</h1> <p>本文。</p> </body> </html>
HTMLより圧倒的に楽！
<,>不要- 閉じタグ不要
でも、属性には()やクォートが必要なのかよ……。
変数を使ってみる
テンプレートエンジンの基本である変数を使ってみる。HTMLの一部を指定した値にセットしたいときに便利。
とりあえず今回は以下のようにしてみる。
| 変数 | 値 | HTML |
|---|---|---|
doctype |
html |
<!DOCTYPE html> |
title |
タイトル |
<title>タイトル</title> |
headline |
見出し |
<h1>見出し</h1> |
content |
本文。 |
<p>本文。</p> |
pugにて、HTMLに変数をセットしたいときは要素名= 変数名のようにする。
var.pug
html
head
meta(charset="utf-8")
title= title
body
h1= headline
p= content
変数はJSON形式で指定する。JSONはテキストでもいいし、ファイルを用意したらそのパスを指定することでも可能。
pug var.pug -PO '{"doctype":"html", "title": "タイトル2", "headline": "見出し2", "content": "本文2。"}'
出力したHTMLが以下。
var.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>タイトル2</title> </head> <body> <h1>見出し2</h1> <p>本文2。</p> </body> </html>
もし変数がなければ値は出力されない
pug var.pug -P
<html> <head> <meta charset="utf-8"/> <title></title> </head> <body> <h1></h1> <p></p> </body> </html>
値は出力されないけれど、タグは出力されてしまう。私としては、値がないときはタグごと出力しないで欲しかった。たぶんそれを実装するにはif構文を使わねばならないのだろう。面倒くさいし冗長だなぁ。
変数JSONファイルを使ってみる
今度はJSONファイルを外部ファイルにしてみる。
var.json
{
"doctype":"html",
"title": "タイトル3",
"headline": "見出し3",
"content": "本文3。"
}
pug var.pug -PO var.json
出力したHTMLが以下。
var.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>タイトル3</title> </head> <body> <h1>見出し3</h1> <p>本文3。</p> </body> </html>
所感
ほかにも外部ファイルと結合するincludeや関数からテキスト整形するfilterなどの機能もある。詳細はpug参照。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
