EJS 템플릿 언어 사용


tmt-workflow는 HTML 작성 과정에서 많은 작업을 줄일 수 있는 EJS 패턴 엔진을 지원하고, 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> 🎜🎜변수 값의 내용을 이스케이프하지 않으려면 다음을 사용하세요. 🎜<div><%- var02 %></div>

모듈 로직 지원

<% %>로 둘러싸인 모든 내용은 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>

Includes

Include는 html/index.htmlhtml/index.html 和 html/_block/head.html这两个文件，你就可以在 index.html 这么用 <% include _block/head.html %> 및 html/과 같은 상대 경로가 있는 템플릿 파일을 참조할 수 있습니다. _block/head.html

이 두 파일은 index.html에서 <% include _block/head.html %>

를 사용할 수 있습니다.

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

TmT EJS Helper

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() 자리 표시자 텍스트

두 번째 매개 변수는 오프셋 단어 번호입니다

예를 들어 다음 함수는 텍스트를 생성할 수 있습니다. 길이는 7~13비트이다. 

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

컴파일됨: 
<span>一二三四五六七八九</span>

더 많은 템플릿 기능이 필요하신가요? 데리러 오길 기다리고 있어요~🎜🎜