Node.js 템 플 릿 엔진 튜 토리 얼 기반-jade 속 학 및 실전 1

환경 준비:
전역 설치 jade:npm install jade-g
프로젝트 패키지 초기 화.json:npm init--yes
설치 완료 후,jade--help 를 사용 하여 jade 의 명령 행 용법 을 볼 수 있 습 니 다.
1.프로젝트 디 렉 터 리 에 index.jade 파일 을 새로 만 듭 니 다.
inde.jade 코드:

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

1.라벨 은 html 의 들 여 쓰기 형식 에 따라 쓴다.
2.라벨 의 속성 은 괄호 를 사용 할 수 있 습 니 다.
3.라벨 에 내용 이 있 으 면 라벨 뒤에 직접 쓸 수 있 습 니 다.
그리고 명령 행 에서 jade-P index.jade 로 index.jade 파일 을 index.html 파일 로 컴 파일 합 니 다.-P(코드 를 들 여 쓰기 형식 으로 정리 합 니 다.이 인자 가 없 으 면 index.html 는 압축 형식 으로 읽 기 에 불리 합 니 다)
컴 파일 된 index.html 코드:

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

2.class,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
    div#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-Pghostwu.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>
  <div id="box" class="box1 box2 box3"></div>
  <div id="abc" class="box1 box2 box3"></div>
  <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,div\#box.box 1.box 2(class='box 3')이런 표기 법 은 emmet 의 표기 법 입 니 다.\#바로 id 속성 점(.)은 class 속성 괄호 이자 속성 표기 법 입 니 다.
2,\#abc.box 1.box 2.box 3,요소 태그 이름 을 전면적으로 주지 않 았 습 니 다.기본 값 은 div 태그 에 이 속성 을 추가 하 는 것 입 니 다.
3.여러 줄 텍스트 의 두 가지 쓰기
p.
1,this is
hello
2,test
3,string
다 중 줄 텍스트 첫 번 째 쓰기:p 태그 뒤에 하 나 를 따라 야 합 니 다.안 에는 원본 html 태그 로 쓰 여 있 습 니 다.
p
| 1, this is
strong hello
| 2, test
| 3, test string
다 중 줄 텍스트 두 번 째 쓰기:텍스트 앞 에 세로 줄(|),탭 뒤에 내용
주석
jade 템 플 릿 코드:


doctype html
html
  head
    meta(charset='utf8')
    title jade      -by ghostwu
  body
    h3     
    // div.box.box2     div
    h3      html     
    //- div#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>
  <!-- div.box.box2     div-->
  <h3>     html     </h3>
  <h3>   ,      </h3>
  <h3>      </h3>
  <input type="checkbox" name="meinv" value="  ">  
  <input type="checkbox" name="meinv" value="  ">  
 </body>
</html>

1.한 줄 주석
//div.box.box 2 이것 은 div 입 니 다.
2,jade 에 만 주석 을 달 고 html 파일 로 컴 파일 되 지 않 습 니 다.
//- div#box.box2.box3
3.블록 주석(다 중 줄 텍스트 주석),주석 된 내용 은 다른 줄 로 해 야 합 니 다.
4.checkbox 뒤에 표 시 된 텍스트 부분 은 속성 뒤에 붙 지 말고 다른 줄 을 만들어 세로 줄 뒤에 쓰 도록 주의해 야 합 니 다.
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
    div#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
    div#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():변 수 를 대문자 로 변환 합 니 다.
제 이 슨 파일 의 데 이 터 를 컴 파일 할 때 템 플 릿 에 전달 합 니 다.
새 data.json 파일 데이터


{
"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 템 플 릿 엔진 튜 토리 얼-jade 속 학 과 실전 1 이 바로 소 편 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 실 수 있 고 많은 응원 부 탁 드 리 겠 습 니 다.

Node.js 템 플 릿 엔진 튜 토리 얼 기반-jade 속 학 및 실전 1

좋은 웹페이지 즐겨찾기