집 >웹 프론트엔드 >JS 튜토리얼 >Node.js 템플릿 엔진 옥 예제 설명

Node.js 템플릿 엔진 옥 예제 설명

小云云원래의: 2018-02-06 09:19:431755검색

이 글은 주로 Node.js 템플릿 엔진-옥 빠른 학습과 실전 전투를 기반으로 한 튜토리얼을 제공합니다. 1. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

환경 준비:

전역적으로 jade 설치: npm install jade -g

프로젝트 package.json 초기화: npm init --yes

설치가 완료된 후 jade --help를 사용하여 명령줄을 볼 수 있습니다. jade 사용법

1. 프로젝트 디렉토리

inde.jade 코드:

doctype html
html
  head
    meta(charset='utf-8')
    title
  body
    h3 欢迎学习jade

1에 새 index.jade 파일을 생성합니다. 라벨은 html

2의 들여쓰기 형식으로 작성됩니다. 괄호를 사용하세요

3. 라벨에 content 가 있으면 태그 바로 뒤에 쓸 수 있습니다.

그런 다음 명령줄에서 jade -P index.jade를 사용하여 index.jade 파일을 index.html 파일로 컴파일합니다. (코드를 들여쓰기 형식으로 구성하기 위해 이 매개변수가 제공되지 않으면 index.html은 압축된 형식이므로 읽기에 도움이 되지 않습니다.)

컴파일된 index.html 코드:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <h3>欢迎学习jade</h3>
 </body>
</html>

2. 클래스, ID 및 여러 줄 텍스트로

새 index2.jade 파일을 만듭니다. 코드는 다음과 같습니다.

doctype html
html
  head
    meta(charset='utf8')
    title jade template engine
  body
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    p#box.box1.box2(class='box3')
    #abc.box1.box2.box3
    h3.box1.box2(class='abc def')
    a(href='http://www.taobao.com',
    target = 'blank') 淘宝
    input(type='button', value='点我')
    br
    p.
      1,this is
      <strong>hello</strong>
      2,test
      3,string
    p
      |  1, this is
      strong hello
      |  2, test
      |  3, test string

컴파일 명령을 실행합니다. jade -P ghostwu.html index2.jade를 다음으로 컴파일합니다. ghostwu.html 파일에 컴파일된 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade template engine</title>
 </head>
 <body>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <p id="box" class="box1 box2 box3"></p>
  <p id="abc" class="box1 box2 box3"></p>
  <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" rel="external nofollow" target="blank">淘宝</a>
  <input type="button" value="点我"><br>
  <p>
   1,this is
   <strong>hello</strong>
   2,test
   3,string
  </p>
  <p> 1, this is<strong>hello</strong> 2, test
    3, test string
  </p>
 </body>
</html>

1, p#box.box1.box2(class ='box3') 이렇게 작성하는 방식은 emmet #id 속성 포인트(. ) 이는 클래스 속성 대괄호이며 속성

2, #abc.box1.box2.box3을 작성하는 방법이기도 합니다. 요소에 대한 레이블 이름은 전혀 없으며 기본값은 p 태그에 이러한 속성을 더한 것입니다.

3, 여러 줄 텍스트를 작성하는 두 가지 방법

1, 이것은
hello
2,test
3,string

다줄 텍스트의 첫 번째 방법 쓰기: p 태그 뒤에는 a가 와야 합니다. 원래 html 태그는 안에 작성되어야 합니다.

| 1, 이것은
strong hello
| 2, 테스트 문자열

. 2 작성 방법: 텍스트 앞에 세로 막대(|)를 사용하고 내용을

3. 댓글

jade 템플릿 코드:

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
  body
    h3 单行注释
    // p.box.box2 这是一段p
    h3 不会编译到html文件的注释
    //- p#box.box2.box3
    h3 块注释,也叫多行注释
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h3 这里不是注释
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

편집 후:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade模板引擎学习-by ghostwu</title>
 </head>
 <body>
  <h3>单行注释</h3>
  <!-- p.box.box2 这是一段p-->
  <h3>不会编译到html文件的注释</h3>
  <h3>块注释,也叫多行注释</h3>
  <h3>这里不是注释</h3>
  <input type="checkbox" name="meinv" value="仙女">仙女
  <input type="checkbox" name="meinv" value="御姐">御姐
 </body>
</html>

1, 한 줄 댓글

// p.box.box2 이것은 p

2의 문단으로, jade로만 주석 처리되어 html 파일로 컴파일되지 않습니다

//- p#box.box2.box3

3, 블록 주석(여러 줄 텍스트 주석), 주석이 달린 내용은 새 줄 시작

4이어야 합니다. 확인란 뒤의 표시 텍스트에 주의하세요. 속성 옆에 새 줄 시작을 적지 마세요. 4. Jade 템플릿 실제 메뉴

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    p#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

컴파일(jade index. jade -P -w 이후의 효과): -w: 파일 수정 사항을 실시간으로 모니터링하고, 저장 후 즉시 결과를 새로 고침합니다. 최신 프런트엔드 개발에서 널리 사용되는 핫 로딩 기술

5. 변수 해석

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    p#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

# {}: 변수를 해석할 수 있습니다. toUpperCase(): 변수를 대문자로 변환합니다.

json 파일 데이터를 템플릿에 전달합니다. 컴파일,

새 data.json 파일 만들기 data

{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
  body
    h3 #{content}

컴파일 명령: jade index2.jade -P - O data.json -O는 json 파일을 지정하고 json 파일의 데이터를 템플릿으로 전송합니다

컴파일된 결과 :

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>JADE模板引擎学习-BY GHOSTWU</title>
 </head>
 <body>
  <h3>跟着ghostwu学习jade</h3>
 </body>
</html>

Node.js 템플릿 엔진 옥 예제 설명

관련 기사