Node.js 템플릿 엔진 Jade에 대한 자세한 설명-JS 튜토리얼-php.cn

이 기사에서는 주로 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=&#39;main&#39;)
  a(href=&#39;http://csdn.net&#39;, title=&#39;csdn主页&#39;， target=&#39;_blank&#39;) CSDN:中国软件联盟
  form(action="/login")
    button(type="submit", value="提交")

로그인 후 복사

출력:

<p id="content" class=&#39;main&#39;>
  <a href=&#39;http://csdn.net&#39; title=&#39;csdn主页&#39; target=&#39;_blank&#39;> 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 = [&#39;<a>&#39;, &#39;<b>&#39;, &#39;<c>&#39;]
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를 코드는 없지만 핸들바는 개발자를 소수의 내장 및 사용자 지정 도우미로 제한합니다.

9. 댓글

Jade에는 두 가지 유형의 댓글이 있습니다.

<1>. 페이지에 출력 - "//"

<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 문

if 문에 접두사 -를 추가하면 표준 JavaScript 코드를 작성할 수 있습니다. 접두사나 괄호를 사용할 수도 없습니다. 물론 후자가 더 간결하다.

<!-- 普通注释，会输出到渲染后生成的HTML页面 -->
<p> Hello Jade content </p>

<p id="footer">copyright 2016</p>

로그인 후 복사

게다가, not or 와 같은 뜻인Unified도 있어요! .

참고: 각 코드 줄 끝에 세미콜론 ";"이 없습니다

11. 각 문

Jade의 반복은 매우 간단합니다. 각 문만 사용하면 됩니다.

- var user = {}
- user.admin = Math.random() > 0.5

if user.admin
  button(class = "launch") Launch Spacecraft
else 
  button(class = "login") Log in

로그인 후 복사

출력:

- var language = [&#39;JavaScript&#39;, &#39;Node&#39;, &#39;Python&#39;, &#39;Java&#39;]
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 = [&#39;JavaScript&#39;: -1, &#39;Node&#39;: 2, &#39;Python&#39;: 3, &#39;Java&#39;: 1]

p 
  each value, key in languages
    p= key + ":" + value

로그인 후 복사

12. 필터

Filter 변환기의 목적은 다음과 같습니다. 다른 언어 사용 텍스트 블록을 작성하려면

<p>
  <p>JavaScript: -1</p>
  <p>Node: 2</p>
  <p>Python: 3</p>
  <p>Java: 1</p>
</p>

로그인 후 복사

참고: Markdown 필터를 사용하려면 Markdown 모듈과 Marked 및 Markdown NPM 패키지를 설치해야 합니다. ㅋㅋㅋ 그들처럼.

声明的语法： 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: &#39;backbone&#39;}, {name: &#39;angular&#39;}, {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

로그인 후 복사