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

이 글은 주로 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 코드:

nbsp;html>

 
  <meta>
  <title></title>
 
 
  <h3 id="欢迎学习jade">欢迎学习jade</h3>
 

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 파일에 컴파일된 코드는 다음과 같습니다.

nbsp;html>

 
  <meta>
  <title>jade template engine</title>
 
 
  <h1 id="jade-template-engine">jade template engine</h1>
  <h1 id="jade-template-engine">jade template engine</h1>
  <h1 id="jade-template-engine">jade template engine</h1>
  <h1 id="jade-template-engine">jade template engine</h1>
  <p></p>
  <p></p>
  <h3></h3><a>淘宝</a>
  <input><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>
 

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

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

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

p.

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

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

p

| 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='御姐')
    | 御姐

편집 후:

nbsp;html>

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

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 파일의 데이터를 템플릿으로 전송합니다

컴파일된 결과 :

nbsp;html>

 
  <meta>
  <title>JADE模板引擎学习-BY GHOSTWU</title>
 
 
  <h3 id="跟着ghostwu学习jade">跟着ghostwu学习jade</h3>
 

관련 추천:

Node.js 템플릿 엔진 Jade 상세 설명

위 내용은 Node.js 템플릿 엔진 옥 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!