kkana's blog

新米コーダーの忘れそうなことメモ

hexoでブログ構築(2) EJSテンプレートエンジンことはじめ

hexoでテーマをカスタマイズするためにちょっとだけejsを触ったときのメモ。

ejsとは

テンプレートエンジン。node.jsで動く github.com

インストール

npm install ejs

html内に書くタグ

スクリプト側で用意した変数などを表示するのに使う(エスケープ処理あり)

<%= %>

エスケープ処理なしは

<%- 値 %>

node.js内で実行するスクリプトタグ

<% スクリプト %>

改行する場合

-%>

というふうに閉じる

配列を順番に処理するとき

<% data.forEach(function(val){ %>
    <li><%= val %></li>
<% }) %>

<% %>内では、何かを書き出して表示することはできない。 処理部分だけを<% %>内に書き、出力は<%= %>に書く。

レンダリング

.ejs拡張子で保存する。

<body>
    <header>
        <h1 id="h1"><%=title %></h1>
    </header>
    <div role="main">
        <p><%-content %></p>
    </div>
</body>

サーバーを起動して、レンダリングする。

var http = require('http');
var fs = require('fs');
//ejsの読み込み
var ejs = require('ejs');

var filedeta = fs.readFileSync('./index.ejs', 'utf8');

//サーバーを起動
var server = http.createServer();
//requestイベントハンドラを定義
server.on('request', doRequest);
//ポート番号400で待ち受け
server.listen(4000);

// リクエストの処理
function doRequest(req, res) {
    //テンプレートのレンダリング
    var filetext = ejs.render(/*テンプレートデータ*/filedeta, /*オプション*/ {
        title:"タイトル",
        content:"コンテンツ"
    });
    //ヘッダー情報にCintent-Typeを書く
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(filetext);
    res.end();
}

なんとなく分かったきがするのと、hexoにはレンダリングの機能があるので今回はその処理は書かなくていいということで、とりあえずここまで。