jade비취로 시작하기


비고

Pug (이전에는 jade로 알려짐)는 Haml의 영향을 크게받으며 Node.js 및 브라우저 용 JavaScript로 구현 된 고성능 템플릿 엔진입니다.

  1. HTML 제작
  2. 동적 코드 지원
  3. 재사용 성 (DRY) 지원

홈페이지

GitHub의 저장소

버전

번역 출시일
0.0.2 2010-07-03
1.0.0 2013-12-22
1.11.0 2015-06-12

설치 또는 설정

Pug로 코드를 작성하기 전에 몇 가지 전제 조건이 필요합니다.

다음을 설치해야합니다.

NodeJS를 설치 한 후 터미널에서 올바른 설치 작업을 확인할 수 있습니다.

$ node -v
 

성공하면 노드의 버전 번호가 인쇄됩니다.

Pug를 프로젝트에 설치하려면 NPM (Node Package Manager)을 사용하는 것이 가장 쉽고 간편합니다. 익숙하다면 터미널에서 다음 코드 줄을 실행하기 만하면됩니다.

$ npm install pug
 

전역으로 설치하려면 다음을 입력하십시오.

$ npm install pug-cli -g
 

함께 뛰다

$ pug --help
 

통사론

Pug (old name은 Jade)는 HTML을 작성하기위한 깨끗하고 공백에 민감한 구문입니다. 다음은 간단한 예입니다.

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.
 

다음 출력을 HTML로 생성합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>
 

Pug를 HTML 코드로 렌더링하는 규칙은 다음과 같습니다.

  1. 텍스트를 들여 쓰기하면 HTML 트리가 빌드됩니다. 들여 쓰기는 공백이나 탭과 함께 사용할 수 있습니다. 이것은 혼합 될 수 없었다!
  2. HTML 태그는 <> 없이 작성됩니다. 속성은 둥근 괄호 사이의 위치입니다.
  3. // 또는 <!-- --> 하여 주석을 작성할 수 있습니다. //- 표시된 주석은 렌더링 된 HTML에서 보이지 않습니다.
  4. #{ } 을 (를) 사용하면 제공된 모델이 생성됩니다. #{header} #{user.username} .
  5. 중괄호가없는 # (해시 태그)는 텍스트로 ID로 생성 된 div 요소입니다. 예제 #myID<div id="myID"></div> 로 렌더링됩니다.
  6. . (point) 는 클래스 속성으로 생성 된 div 입니다. 예 : .myClass<div class="myClass"></div>
  7. = (등호 기호 뒤에 공백이 오는 경우) 변수가 검색됩니다. Exaple : h1= title
  8. A != (같지 않음) 이스케이프없이 변수를 검색했습니다.
  9. A - (하이픈)을 사용하면 JavaScript를 작성할 수 있습니다. 예 : - console.log("foo");
  10. 외부 파일에 연결하는 방법은 다음과 같습니다. script(src="/js/chat.js")
  11. 인라인 스크립트는이 script. 를 사용하여 수행 할 수 script. .
  12. 기본 레이아웃을 추가하기위한 지시문 : extends ../layout .
  13. layout.pug block content 을 사용하여 삽입 block content
  14. 부분적인 사용은 다음 두 가지 방법으로 가능합니다.
    1. partial : != partial(template file name/options) .
    2. 포함 : include ../includes/footer
  15. 포함의 역함수는 extend 입니다. 이렇게하면 "html block 파트"페이지에서 예를 들어 레이아웃 페이지로 보낼 수 있습니다 : extend layout
  16. 연결은 + (더하기) 또는 # (해시 태그) 문자로 발생합니다. 플러스는 JavaScript 코드에서 사용됩니다. HTML의 해시 태그로 내용을 렌더링합니다.`p 이름은 # {myName}입니다.

Node.js에서 pug 사용하기

var pug = require('pug');

// compile
var fn = pug.compile('string of pug', options);
var html = fn(locals);

// render
var html = pug.render('string of pug', merge(options, locals));

// renderFile
var html = pug.renderFile('filename.pug', merge(options, locals));
 

옵션

  • filename 예외에 사용되며 include를 사용할 때 필요합니다.
  • compileDebug false의 경우, 디버그 도구가 컴파일되지 않는다.
  • pretty pretty-indentation 공백을 출력에 추가합니다 (기본값은 false).