Utilisation du langage du modèle EJS


tmt-workflow prend en charge le moteur de modèles EJS, ce qui peut économiser beaucoup de travail dans le processus d'écriture HTML, réduire le nombre de lignes de code et améliorer l'efficacité du code grâce à des fonctionnalités telles que include、for 循环 等特性减少代码行数，提高代码的可读性。

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

EJS 特性

输出

在页面中输出变量值，你可以这么用： <div><%= var01 %></div>include et

pour la lisibilité de la boucle.

Nous utilisons EJS 2.0 ou supérieur : https://github.com/mde/ejs🎜

Fonctionnalités EJS

Sortie

🎜Pour afficher les valeurs des variables sur la page, vous pouvez utiliser ceci : 🎜<div><%= var01 %></div> 🎜🎜Si vous ne souhaitez pas que le contenu de la valeur de la variable soit échappé, utilisez ceci : 🎜<div><%- var02 %></div>

Prise en charge de la logique du module

Tout le contenu entouré de <% %> sera compilé en Javascript. Vous pouvez coder dans le fichier modèle comme écrire du js, et vous permettre également de déclarer des variables et des portées. modèle actuel, car un modèle sera compilé dans une fonction Javascript.

Exemple :

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

Loop

Tout comme l'écriture de Javascript

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

Includes

Include peut référencer des fichiers de modèle avec des chemins relatifs, tels que html/index.htmlhtml/index.html 和 html/_block/head.html这两个文件，你就可以在 index.html 这么用 <% include _block/head.html %> et html / _block/head.html

Ces deux fichiers, vous pouvez utiliser <% include _block/head.html %>

dans index.html.

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

TmT EJS Helper

En plus d'EJS, nous fournissons des fonctions de modèle supplémentaires pour simplifier une partie de notre travail.

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

css()

Référencez rapidement les fichiers CSS et attachez le chemin absolu CSS sur la ligne de commentaire pour une utilisation facile par les frontaux en aval . 

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

Après compilation : 
<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()

La fonction est cohérente avec css() et ne sera pas répétée

img() image de réserve

Image de placement, vous pouvez spécifier la hauteur, la largeur , et className

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

Après la compilation : 
<img src="http://temp.im/200x400" class="block__img"/>

text() Texte d'espace réservé

Générer une image d'espace réservé de la longueur spécifiée Le deuxième paramètre est le numéro de mot décalé

Par exemple, la fonction suivante peut générer un texte. longueur de 7 à 13 bits. 

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

Compilé : 
<span>一二三四五六七八九</span>

Plus de fonctions de modèle ? J'attends que tu le récupères~🎜🎜