이 글에서는 주로 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>
참고: 속성 값이 전달되지 않으면 HTML 코드를 출력할 때 속성 값이 false인 속성이 무시됩니다. in, 기본값은 true입니다.
5. Literal
수고를 덜기 위해 태그 이름 바로 뒤에 클래스 이름과 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. 텍스트
원본 텍스트를 출력하려면 "|" 기호를 사용하세요.
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!");코드를 생성합니다.
<script>
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");
</script>마찬가지로 스타일은 을 생성합니다.
8. JavaScript 코드
-, = 또는!를 사용하세요. =이 세 가지 기호는 Jade에서 출력을 조작할 수 있는 실행 가능한 JS 코드를 작성하는 데 사용됩니다. 이는 HTML 요소를 출력하고 JavaScript를 삽입할 때 유용합니다. 그러나 이 작업을 수행할 때는 XSS(교차 사이트 스크립팅) 공격을 피하도록 주의해야 합니다.
예를 들어 사용할 수 있습니다! =배열 정의, 태그 데이터 출력:
- 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]생성된 코드는 다음과 같습니다.
<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>
템플릿 엔진 Jade와 Handlebars의 주요 차이점은 다음과 같습니다. Jade는 거의 모든 JavaScript를 코드에 작성할 수 있지만 Handlebars는 제한됩니다. 개발 인간은 소수의 내장 도우미와 사용자 정의 도우미만 사용할 수 있습니다.
9. 댓글
Jade의 댓글에는
<1> 두 가지 유형이 있습니다. 페이지에 출력되는 것 - "//"
<2> - "//- ”
// 普通注释，会输出到渲染后生成的HTML页面 p Hello Jade content //- 特殊注释，不会输出到HTML页面 p (id="footer") copyright 2016
출력:
<!-- 普通注释，会输出到渲染后生成的HTML页面 --> <p> Hello Jade content </p> <p id="footer">copyright 2016</p>
10. If 문
if 문에 접두사 -를 추가하면 표준 JavaScript 코드를 작성할 수 있습니다. 접두사나 대괄호를 사용할 수도 없습니다. 물론 후자가 더 간결하다.
- var user = {}
- user.admin = Math.random() > 0.5
if user.admin
button(class = "launch") Launch Spacecraft
else
button(class = "login") Log in게다가, also 와 동등한 Except 가 있습니다! .
참고: 각 코드 줄 끝에 세미콜론 ";"이 없습니다
11. 각 문
Jade의 반복은 매우 간단합니다. 각 문을 사용하면 됩니다.
- var language = ['JavaScript', 'Node', 'Python', 'Java']
p
each value, index in language
p= index + "," + value출력:
<p> <p>0. JavaScript</p> <p>1. Node</p> <p>2. Python</p> <p>3. Java</p> </p>
예 2:
- var language = ['JavaScript': -1, 'Node': 2, 'Python': 3, 'Java': 1]
p
each value, key in languages
p= key + ":" + value출력:
<p> <p>JavaScript: -1</p> <p>Node: 2</p> <p>Python: 3</p> <p>Java: 1</p> </p>
12.Filter
필터의 기능은 다음과 같습니다. 다른 언어로 텍스트 블록을 작성합니다. Markdown 필터를 사용하려면 Markdown 모듈과 Marked 및 Markdown NPM 패키지를 설치해야 합니다.
13, casep
:markdown
# practical Node.js
[This book](http://csdn.net) really helps to grasp many coponents needed for modern-day web development.
sass나 compass 믹스인을 사용해보신 분들이라면 분명 익숙하실 텐데요, Jade에서의 믹스인 사용법은 기본적으로 동일합니다.
선언 구문: mixin name(param, param2, …….)
Call: +name(data)
- var coins = Math.round(Math.random() * 10)
case coins
when 0
p You have no money
when 1
p You have a coin
default
p You have #{coins} coins!Output:
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)include는 외부 JS 및 CSS를 도입하는 것과 매우 유사합니다. 파일 유사. 이는 하향식 접근 방식입니다. 다른 파일을 포함하는 기본 파일에서 무엇을 사용할지 결정합니다. 메인 파일이 먼저 처리되고(데이터 로컬은 메인 파일에 정의될 수 있음), 그런 다음 메인 파일에 포함된 하위 파일이 처리됩니다(하위 파일은 메인 파일에 정의된 데이터 로컬을 사용할 수 있음).
포함 Jade 템플릿의 경우 include /path/filename을 사용합니다.예를 들어 파일 A에서는<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>include ./includes/header
对于使用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.js에서 Jade를 시작하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
