EJSテンプレート言語の使用法


tmt-workflow は EJS パターン エンジンをサポートしています。これにより、HTML の作成プロセスで多くの作業が節約され、コードの行数が削減され、include、for 循环 等特性减少代码行数，提高代码的可读性。

我们采用 EJS 2.0 以上版本：https://github.com/mde/ejs

EJS 特性

输出

在页面中输出变量值，你可以这么用： <div><%= var01 %></div>include などの機能を通じてコードの効率が向上します。そして

for ループ の可読性。

EJS 2.0 以降を使用します: https://github.com/mde/ejs🎜

EJS 機能

出力

🎜ページ上に変数値を出力するには、これを使用できます: 🎜<div><%= var01 %></div> 🎜🎜If 変数値の内容をエスケープしたくない場合は、これを使用します: 🎜<div><%- var02 %></div>

モジュールロジックのサポート

<% %> で囲まれたすべてのコンテンツは Javascript にコンパイルされ、js を記述するようにコーディングでき、変数やスコープを宣言することもできます。テンプレートは Javascript 関数にコンパイルされるため、現在のテンプレート。

例:

    <% var name = "littledu" %>    <div>
    Hello, My Name is <%-name %>    </div>

Loop

JavaScriptを書くのと同じように

<ul>
    <% for(var i = 0; i < 10; i++) {%>
    <li>我是列表 <%-i %></li>
    <% } %>
<ul>

include

Includeは、html/index.htmlhtml/index.html 和 html/_block/head.html这两个文件，你就可以在 index.html 这么用 <% include _block/head.html %>やhtml/などの相対パスを持つテンプレートファイルを参照できます。 _block/head.html

これら 2 つのファイルは、index.html で <% include _block/head.html %>

を使用できます。

例
<ul>
    <% users.forEach(function(user){ %>
    <% include user/show %>
    <% }) %>
</ul>

TmT EJS ヘルパー

EJS に加えて、作業の一部を簡素化するためにいくつかの追加のテンプレート関数が提供されています。

GIT: https://github.com/willerce/tmt-ejs-helper

css()

ダウンストリームのフロントエンドで簡単に使用できるように、CSS ファイルをすばやく参照し、コメント行に CSS 絶対パスを添付します。 。 

<head>
    <title>页面标题</title>
    <%- css("style-workflow.css") %>
</head>

コンパイル後: 
<head>
    <title>页面标题</title>
    <link rel="stylesheet" href="../../dev/css/style-workflow.css"/>
    <!--<link rel="stylesheet" href="http://wximg.gtimg.com/tmt/workflow/dist/css/style-workflow.css"/>-->
</head>

js()

関数はcss()と一貫性があり、繰り返されません

img()プレースホルダー画像

配置画像、高さ、幅を指定できます、および className

<%- img(200, 400, 'block__img') %>

コンパイル後: 
<img src="http://temp.im/200x400" class="block__img"/>

text() プレースホルダー テキスト

指定された長さのプレースホルダー画像を生成します。 2 番目のパラメーターはオフセット ワード番号です

たとえば、次の関数はテキストを生成します。 7～13ビットの長さ。 

 <span><%- text(10, 3) %></span>

コンパイル済み: 
<span>一二三四五六七八九</span>

その他のテンプレート機能?お引き取りお待ちしております〜🎜🎜