pug 튜토리얼
퍼그 시작하기
수색…
비고
Pug는 고성능의 견고하고 세련된 풍부한 템플릿 엔진입니다. Haml의 영향을 받아 Node.js 및 브라우저 용 JavaScript로 구현되었습니다. Laravel, PHP Scala, Ruby, Python 및 Java에 대한 구현이 존재합니다.
그것은 특징 :
퍼그 (Pug)는 옥 (Jade) 이름으로 알려져 있었지만 등록 상표로 인해 이름이 변경되었습니다.
이 발언 섹션은 pug 내의 큰 주제를 언급하고 관련 주제와 연결됩니다. pug에 대한 문서는 새로운 것이므로 관련 주제의 초기 버전을 만들어야 할 수도 있습니다.
버전
| 번역 | 출시일 |
|---|---|
| 2.0.0-beta11 | 2017-02-04 |
| 2.0.0-beta10 | 2017-01-29 |
| 2.0.0-beta9 | 2017-01-25 |
| 2.0.0-beta1 | 2016-06-03 |
| 1.11.0 | 2015-06-11 |
설치
Pug 템플릿 렌더링 시스템을 설치하려면 다음과 같이하십시오.
- 머신에 Node.js 환경을 설치하십시오.
-
npm install pug --save를 실행하여 현재 프로젝트에pug모듈을 설치하십시오.
이제 표준 require 메커니즘을 통해 프로젝트에서 pug 를 사용할 수 있습니다.
const pug = require("pug");
애플리케이션에서 Express를 사용하는 require("pug") 를 require("pug") 하지 않아도됩니다. 그러나 Express 응용 프로그램의 view engine 특성을 pug 설정해야합니다.
app.set("view engine", "pug");
또한 Express가 Pug 파일을 찾는 위치를 컴파일 (컴파일)에 알리도록 앱의보기 디렉토리를 설정해야합니다.
app.set("views", "path/to/views");
익스프레스 경로에서는 app.set("views") 옵션으로 설정된 디렉토리에서 시작하여 파일 경로를 사용하여 res.render 함수를 호출하여 Pug 파일을 렌더링 할 수 있습니다.
app.get("/", function (req, res, next) {
// Your route code
var locals = {
title: "Home",
};
res.render("index", locals);
});
위의 경우 index 는 views/index.pug 에있는 파일을 가리키고 locals 는 파일에 노출되는 변수의 개체를 나타냅니다. 이후 섹션에서 설명 하겠지만 Pug는 전달 된 변수에 액세스하고 다양한 작업 (조건부, 보간, 반복 등)을 수행 할 수 있습니다.
Hello World 예제
먼저 렌더링 할 템플릿을 만듭니다.
p Hello World, #{name}!
이것을 .pug 확장자로 끝나는 파일에 저장하십시오 (원하는대로 호출 할 수 있지만, 다음 코드에서 view.pug 를 사용하여 컴파일합니다).
이제 남은 것은 템플릿을 컴파일하는 것뿐입니다! JS 스크립트 파일을 만들고 ( main.js 라고 부름) 다음 내용을 추가하십시오.
// Import the pug module
const pug = require('pug');
// Compile the template (with the data not yet inserted)
const templateCompiler = pug.compileFile('view.pug');
// Insert your data into the template file
console.log(templateCompiler({ name: 'John' });
npm main.js 로이 파일을 실행하면 콘솔에 다음 HTML 코드 출력이 표시됩니다.
<p>Hello World, John!</p>
첫 번째 템플릿을 만들고 컴파일했습니다. Conditionals , Iteration 등과 같은 고급 기능에 이르기까지!