テンプレートエンジン
1.1テンプレートエンジン
- テンプレートエンジンはノード自体によって提供されるのではなく、サードパーティのモジュールです。
- 目的は、開発者がよりわかりやすい方法で文字列をつなぎ合わせて、プロジェクトコードをより明確にし、保守しやすくすることです。
1.2アートテンプレート
-
インストール
npm install art-template -
let template = require('art-template')インポートテンプレートエンジンを使用する -
スプライスするデータとテンプレートがどこにあるかをテンプレートエンジンに伝えます
const html = template(‘模板路径’，数据);- データはオブジェクトタイプです
- template（）の戻り値は連結された文字列です
完全な使用プロセス
1.01.jsファイルを作成します
let template = require("art-template");
let path = require("path");
let view = path.join(__dirname,'views','01.art');
//第一个参数是路径
//第二个参数是数据，对象类型
//返回值是拼接好的字符串
let html = template(view,{
name:"张三"
})
console.log(html);
2.01.artファイルを作成します
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--标准语法-->
<p>{
{
name }}</p>
<!--原始语法-->
<p><%= name %></p>
</body>
</html>
- 01.jsファイルを実行する
node 01.js
1.3出力構文
-
art-templateは、標準構文と元の構文をサポートしています。標準の文法ではテンプレートの読み取りと書き込みが簡単ですが、元の文法には強力な論理表現機能があります。
- 標準構文{ {値}}
- 元の構文<％=値％>
-
データにHTMLタグが含まれている場合、デフォルトのテンプレートエンジンはタグを解析せず、エスケープ後に出力します。これは安全上の理由によるものです
-
let template = require("art-template"); let path = require("path"); let view = path.join(__dirname,'views','01.art'); let html = template(view,{ content:'<h1>我是标题</h1>' }) console.log(html); -
{ {content}}を使用 して出力すると、次の結果が得られます
-
{ { content}} // <h1>我是标题</h1>
-
-
-
元の出力：元の出力文は、セキュリティ上のリスクがある可能性があるHTMLコンテンツをエスケープしません。注意して使用してください。
- 標準文法
{ { @数据 }} - 元の構文：、
<%- 数据 %>=をマイナス記号に変更
- 標準文法
1.4条件付き判断
-
テンプレートでは、条件に基づいて表示するHTMLコードを決定できます。
-
標準文法
{ {if value}} ... { {/if}} { {if v1}} ... { {else if v2}} ... { {/if}} <!--标准语法--> { {if age >= 20}} <p>年龄大于等于20</p> { {else if age < 15}} <p>年龄小于15</p> { {else}} <h1>年龄不符合要求</h1> { {/if}} -
オリジナルの文法
<% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %> <!--原始语法--> <% if(age >= 20) { %> <p>年龄大于等于20</p> <% } else if(age < 15) { %> <p>年龄小于15</p> <% } else {%> <h1>年龄不符合要求</h1> <% } %>
-
1.5ループ構文
-
標準文法
- $ indexは、現在のループのインデックスを表します
- $ valueは、現在のループデータを表します
{ {each target}} { {$index}} { {$value}} { {/each}} -
オリジナルの文法
<% for(var i = 0; i < target.length; i++){ %> <%= i %> <%= target[i] %> <% } %> -
target反復、そのデフォルト値をサポートarrayしobjectます$data。 -
$valueそしてカスタマイズ$indexすることが{ {each target val key}}できます：。
1.6サブテンプレート
-
サブテンプレートを使用して、Webサイトのパブリックブロック（頭、下）を個別のファイルに抽出します。
-
標準文法
{ {include './header.art'}} { {include './header.art' data}} -
オリジナルの文法
<% include('./header.art') %> <% include('./header.art', data) %>
1.7テンプレートの継承
-
テンプレート継承を使用すると、WebサイトのHTMLスケルトンを別のファイルに抽出でき、他のページテンプレートはスケルトンファイルを継承できます。
-
標準文法
{ {extend './layout.art'}} { {block 'head'}} ... { {/block}} -
オリジナルの文法
<% extend('./layout.art') %> <% block('head', function(){ %> ... <% }) %> -
テンプレートの継承により、サイトの共通要素を含む基本的なテンプレート「スケルトン」を構築できます。例：
<!--layout.art--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>{ {block 'title'}}My Site{ {/block}}</title> { {block 'head'}} <link rel="stylesheet" href="main.css"> { {/block}} </head> <body> { {block 'content'}}{ {/block}} </body> </html> -
<!--index.art--> { {extend './layout.art'}} { {block 'title'}}{ {title}}{ {/block}} { {block 'head'}} <link rel="stylesheet" href="custom.css"> { {/block}} { {block 'content'}} <p>This is just an awesome page.</p> { {/block}}
1.8テンプレート構成
-
テンプレート変数
template.defaults.imports.变量名=变量值;変数値に導入されるのは、メソッドを提供するサードパーティモジュールである可能性があります-
let template = require("art-template"); let path = require("path"); let dateFormat = require('dateformat'); let view = path.join(__dirname, 'views', '06.art') //默认情况下，在模板中**.art中是不能使用dateFormat方法的，所以需要导入 //导入模板变量 template.defaults.imports.dateFormat = dateFormat let html = template(view, { time: new Date() }) console.log(html); -
{ { dateFormat(time,'yyyy-mm-dd') }}
-
-
テンプレートルートディレクトリを設定する
template.defaults.root = 模板目录 -
テンプレートのデフォルトのサフィックスを設定する
template.defaults.extname = '.art'