이 기사에서는 주로 Node.js 템플릿 엔진 Jade에 대한 자세한 소개를 소개합니다. Jade는 Node.js의 템플릿 엔진이라고 생각합니다. 이제 공유하고 참고하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
Jade는 Node.js용 템플릿 엔진으로 Haml의 여러 측면을 활용하므로 해당 구문은 Haml과 비교적 유사합니다. 또한 Jade는 공백도 지원합니다.
1. 태그
Jade에서는 줄 시작 부분의 모든 텍스트가 기본적으로 HTML 태그로 해석됩니다. 그리고 시작 태그 메모만 작성하면 됩니다. "<>"를 추가할 필요가 없습니다. Jade가 우리를 위해 닫는 태그와 여는 태그를 렌더링해 주기 때문입니다. 예:
body
p
h1 Jade是Node.js的一个模板引擎
p 它借鉴了Haml的很多地方，所以语法上和Haml比较相近。
p
footer © Pandora위의 Jade 템플릿으로 렌더링된 최종 HTML 코드는 다음과 같습니다.
<body>
<p>
<h1> Jade是Node.js的一个模板引擎</h1>
<p>它借鉴了Haml的很多地方，所以语法上和Haml比较相近。</p>
</p>
<p>
<footer>© Pandora</footer>
</p>
</body>참고: 태그 이름을 쓰지 않으면 기본값은 p 태그입니다.
2. 변수/데이터
Jade 템플릿에 전달된 데이터를 로컬이라고 합니다. 변수의 값을 출력하려면 등호 "="를 사용하십시오.
(locals):
{
title: "Express.js Guide",
body: "The Comprehensive Book on Express.js"
}Jade 코드:
h1= title p= body
렌더링된 출력 HTML:
<h1>Express.js Guide</h1> <p>The Comprehensive Book on Express.js</p>
3 Jade에서 읽은 변수의 값. 통과되었습니다 # {name}님이 달성하세요. 예:
- var title = "Node"
p I love #{title} 변수의 값은 템플릿 컴파일 시 처리되므로 실행 가능한 JavaScript(-)에서는 사용하지 마세요.
4. 속성
속성은 레이블 뒤에 오고 "()"로 묶이며 여러 속성은 ","로 구분됩니다. 예: 본문(이름1 = "값1", 이름2 = "값2").
p(id="content", class='main')
a(href='http://csdn.net', title='csdn主页'， target='_blank') CSDN:中国软件联盟
form(action="/login")
button(type="submit", value="提交")출력:
<p id="content" class='main'>
<a href='http://csdn.net' title='csdn主页' target='_blank'> CSDN:中国软件联盟</a>
<form action="/login">
<button type="submit" value="提交">
</form>
</p>
동적 속성:
동적 속성은 속성 값이 동적이라는 의미입니다. 즉, 변수가 속성 값을 나타내는 데 사용됩니다. "|" 기호는 HTML 노드 내용을 새 줄에 쓸 수 있습니다. 예:
a(href=url, data-active=isActive) label input(type="checkbox", checked=isChecked) | yes / no
위 템플릿에 제공된 데이터:
{
url: "/logout",
isActive: true,
isChecked: false
} 최종 렌더링된 HTML 출력:
<a href="" data-active=" rel="external nofollow" data-active"></a> <label> <input type="checkbox" />yes / no </label>
참고: 값이 false인 속성은 HTML 코드를 출력할 때 무시됩니다. 속성 값이 전달되지 않으면 기본값은 true입니다.
5. 리터럴
수고를 덜려면 태그 이름 바로 뒤에 클래스 이름과 ID 이름을 쓰면 됩니다. 예:
p#content
p.lead.center
| Pandora_galen
#side-bar.pull-right // 没有标签名，默认为“p”
span.contact.span4
a(href="/contact" rel="external nofollow" rel="external nofollow" ) contact me렌더링된 출력 HTML:
<p id="content">
<p class="lead center">
Pandora_galen
<p id="side-bar" class="pull-right"></p>
<span class="contact span4">
<a href="/contact" rel="external nofollow" rel="external nofollow" > contact me </a>
</span>
</p>
6, text
원본 텍스트를 출력하려면 "|" 기호를 사용하세요.
p | 我两年前开始学习前端 | 在此之间，我学过了html, jQuery, JavaScript, Python， Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。
7. 스크립트 및 스타일 블록
HTML에서
script.
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");을 생성하려면 다음과 같은 스타일이 생성됩니다. lt ; 스타일>.
8. JavaScript 코드
-, = 또는!를 사용하세요. =이 세 가지 기호는 Jade에서 출력을 조작할 수 있는 실행 가능한 JS 코드를 작성하는 데 사용됩니다. 이는 HTML 요소를 출력하고 JavaScript를 삽입할 때 유용합니다. 그러나 이 작업을 수행할 때는 XSS(교차 사이트 스크립팅) 공격을 피하도록 주의해야 합니다.
예를 들어 사용할 수 있습니다! =배열 정의, 태그 데이터 출력:
<script>
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");
</script>- var arr = ['<a>', '<b>', '<c>']
ul
-for (var i = 0; i < arr.length; i++)
li
span= i
span!= "unescaped:" + arr[i] + "vs."
span= "escaped:" + arr[i]템플릿 엔진 Jade와 Handlebars의 주요 차이점은 다음과 같습니다. Jade는 거의 모든 JavaScript를 코드는 없지만 핸들바는 개발자를 소수의 내장 및 사용자 지정 도우미로 제한합니다.
<2>. "
<ul> <li><span>0</span><span>unescaped: <a>vs. </span><span>escaped: <a></span></li> <li><span>1</span><span>unescaped: <b>vs. </span><span>escaped: <b></span></li> <li><span>2</span><span>unescaped: <c>vs. </span><span>escaped: <c></span></li> </ul>
// 普通注释，会输出到渲染后生成的HTML页面 p Hello Jade content //- 特殊注释，不会输出到HTML页面 p (id="footer") copyright 2016
10. If 문
<!-- 普通注释，会输出到渲染后生成的HTML页面 --> <p> Hello Jade content </p> <p id="footer">copyright 2016</p>
11. 각 문
- var user = {}
- user.admin = Math.random() > 0.5
if user.admin
button(class = "launch") Launch Spacecraft
else
button(class = "login") Log in- var language = ['JavaScript', 'Node', 'Python', 'Java']
p
each value, index in language
p= index + "," + value예 2:
<p> <p>0. JavaScript</p> <p>1. Node</p> <p>2. Python</p> <p>3. Java</p> </p>
출력:
- var language = ['JavaScript': -1, 'Node': 2, 'Python': 3, 'Java': 1]
p
each value, key in languages
p= key + ":" + value
12. 필터
<p> <p>JavaScript: -1</p> <p>Node: 2</p> <p>Python: 3</p> <p>Java: 1</p> </p>
声明的语法： mixin name(param, param2, …….)
调用： +name(data)
mixin row(items)
tr
each item, index in items
td= item
mixin table(tableData)
table
each row, index in tableData
+row(row)
- var node = [{name: "express"}, {name: "Jade"}, {name: "Handlebars"}]
+table(node)
- var js = [{name: 'backbone'}, {name: 'angular'}, {name: "emberJS"}]
+table(js)输出：
<table>
<tr>
<td>express</td>
</tr>
<tr>
<td>Jade</td>
</tr>
<tr>
<td>Handlebars</td>
</tr>
</table>
<table>
<tr>
<td>backbone</td>
</tr>
<tr>
<td>angular</td>
</tr>
<tr>
<td>emberJS</td>
</tr>
</table>15、include
include与引入JS和CSS外部文件很相似。它是自顶向下的方法： 在include其它文件的主文件里，我们决定要用什么。主文件会被首先处理（可以在主文件了定义数据locals），然后才会再接着处理主文件里所包含进来的子文件（子文件里可以使用主文件中定义的数据locals）；
包含一个Jade模板，用include /path/filename.
例如，在文件A里：
include ./includes/header
注意： 这里不用给模板名以及路径添加双引号或者单引号。
再例如，从父目录开始查找：
include ../includes/footer
注意：不能再文件名和文件路径中使用变量，因为includes/partials是在编译时处理的，而不是在执行时。
对于使用Sass、Compass又或者Less的人这些事再熟悉不过的了。
16、extend
extend与include“唱对台戏”，正好相反，extend是一种自底向上的方法。它所包含的文件决定它要替换主文件中哪那一部分。
使用格式： extend filename 和 block blockname;
示例-1： 在文件file_a里：
block header p some default text block content p loading... block footer p copyright
示例-2： 在文件file_b里：
extend file_a block header p very specific text block content .main-content
相关推荐：
node+express+jade制作简单网站指南_node.js
위 내용은 Node.js 템플릿 엔진 Jade에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
