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にはレンダリングの機能があるので今回はその処理は書かなくていいということで、とりあえずここまで。