이 글은 NodeJS 템플릿 엔진인 Pug의 document를 해석한 글입니다.
영어 원문은 아래 바로가기를 클릭하거나 현재 글의 해석 아래 더보기를 클릭 시 확인하실 수 있습니다.
오타나 잘못된 해석은 댓글로 알려주시면 정정하겠습니다.
▶ 현재 페이지 본문 바로가기
pug.compile(source, ?options)
다른 locals에서 여러번 렌더링할 수 있는 함수에 Pug 템플릿을 컴파일
source: string
컴파일할 원본 Pug 템플릿
options: ?options
옵션 개체(object)
returns: function
locals를 포함하는 개체(object)에서 HTML을 생성하는 함수
Compile a Pug template to a function, which can be rendered multiple times with different locals.
source: string
The source Pug template to compile
options: ?options
An options object
returns: function
A function to generate the HTML from an object containing locals
var pug = require('pug');
// Compile a function
var fn = pug.compile('string of pug', options);
// Render the function
var html = fn(locals);
// => '<string>of pug</string>'pug.compileFile(path, ?options)
파일에서 함수로 pug 템플릿을 컴파일하는데, 이 함수는 다른 locals에서 여러번 렌더링 가능
path: string
pug 파일로 가는 경로
options: ?options
옵션 개체(object)
returns: function
locals를 포함하는 개체(object)에서 HTML을 생성하는 함수
Compile a Pug template from a file to a function, which can be rendered multiple times with different locals.
path: string
The path to a Pug file
options: ?options
An options object
returns: function
A function to generate the HTML from an object containing locals
var pug = require('pug');
// Compile a function
var fn = pug.compileFile('path to pug file', options);
// Render the function
var html = fn(locals);
// => '<string>of pug</string>'pug.compileClient(source, ?options)
클라이언트 사이드에서 사용할 수 있는 JavaScript의 string으로 pug 템플릿을 컴파일
source: string
컴파일할 pug 템플릿
options: ?options
개체(object) 옵션
returns: string
함수를 나타내는 Javascript 문자열
Compile a Pug template to a string of JavaScript, which can be used client side.
source: stringThe Pug template to compile
options: ?options
An options object
returns: string
A string of JavaScript representing a function
var pug = require('pug');
// Compile a function
var fn = pug.compileClient('string of pug', options);
// Render the function
var html = fn(locals);
// => 'function template(locals) { return "<string>of pug</string>"; }'pug.compileClientWithDependenciesTracked(source, ?options)
compileClient와 동일하지만, 이 method는 다음과 같은 형식의 개체(object)를 반환
{
'body': 'function (locals) {...}',
'dependencies': ['filename.pug']
}pug 파일 변경 사항을 감시하는 것과 같은 것을 구현하려면 이 method를 사용해야 함. 단, 종속성이 필요한 경우에만
Same as compileClient, except that this method returns an object of the form:
예시 code
You should only use this method if you need dependencies to implement something like watching for changes to the Pug files.
pug.compileFileClient(path, ?options)
클라이언트 사이드에서 사용할 수 있는 Javascript 문자열로 Pug 템플릿 파일을 컴파일
path: string
pug 파일로 가는 경로
options: ?options
개체(object) 옵션
options.name: string
.name 속성(property)을 옵션 개체(object)에 전달하려면 클라이언트 사이드의 템플릿 함수의 이름으로 사용됨
returns: string
Javascript 함수 body
먼저, 템플릿 파일
h1 This is a Pug template
h2 By #{author}다음은 Pug 파일을 함수 문자열로 컴파일
var fs = require('fs');
var pug = require('pug');
// Compile the template to a function string
var jsFunctionString = pug.compileFileClient('/path/to/pugFile.pug', {name: "fancyTemplateFun"});
// Maybe you want to compile all of your templates to a templates.js file and serve it to the client
fs.writeFileSync("templates.js", jsFunctionString);다음은 출력 함수 문자열의 모습 (templates.js에 작성)
function fancyTemplateFun(locals) {
var buf = [];
var pug_mixins = {};
var pug_interp;
var locals_for_with = (locals || {});
(function (author) {
buf.push("<h1>This is a Pug template</h1><h2>By "
+ (pug.escape((pug_interp = author) == null ? '' : pug_interp))
+ "</h2>");
}.call(this, "author" in locals_for_with ?
locals_for_with.author : typeof author !== "undefined" ?
author : undefined)
);
return buf.join("");
}<!DOCTYPE html>
<html>
<head>
<script src="/templates.js"></script>
</head>
<body>
<h1>This is one fancy template.</h1>
<script type="text/javascript">
var html = window.fancyTemplateFun({author: "enlore"});
var div = document.createElement("div");
div.innerHTML = html;
document.body.appendChild(div);
</script>
</body>
</html>Compile a Pug template file to a string of JavaScript that can be used client side.
path: string
The path to a Pug file
options: ?options
An options object
options.name: string
If you pass a .name property on the options object, it will be used as the name of your client side template function.
returns: string
A JavaScript function body.
First, our template file.
예시 코드
Then, we compile the Pug file into a function string.
예시 코드
Here’s what the output function string looks like (written to templates.js).
예시 코드
예시 코드
pug.render(source, ?options, ?callback)
source: string
렌더링할 원본 pug 템플릿
options: ?options
locals 개체(object)로도 사용되는 옵션 개체(object)
callback: ?function
렌더링된 결과를 받는 Node.js 스타일의 callback.
이 callback은 동기식으로 호출
returns: string
결과 HTML 문자열
source: string
The source Pug template to render
options: ?options
An options object, also used as the locals object
callback: ?function
Node.js-style callback receiving the rendered results.
This callback is called synchronously.
returns: string
The resulting HTML string
var pug = require('pug');
var html = pug.render('string of pug', options);
// => '<string>of pug</string>'pug.renderFile(path, ?options, ?callback)
path: string
렌더링할 pug 파일의 경로
options: ?options
locals 개체(object)로도 사용되는 옵션 개체(object)
callback: ?function
렌더링된 결과를 받는 Node.js 스타일의 callback.
이 callback은 동기식으로 호출
returns: string
결과 HTML 문자열
path: string
The path to the Pug file to render
options: ?options
An options object, also used as the locals object
callback: ?function
Node.js-style callback receiving the rendered results.
This callback is called synchronously.
returns: string
The resulting HTML string
var pug = require('pug');
var html = pug.renderFile('path/to/file.pug', options);
// ...Properties
pug.filters
사용자 정의 필터의 hash table
이 개체(object)는 동일한 필터의 옵션과 동일한 의미를 갖지만, 모든 pug 컴파일에 전역적으로 적용됩니다.
pug.filters 및 options.filters 모두에 있는 경우, 필터 옵션이 우선
A hash table of custom filters.
This object has the same semantics as the filters option, but applies globally to all Pug compilation.
When a filter is present in both pug.filters and options.filters, the filters option takes precedence.
Deprecated (사용되지 않음)
이 속성 대신 필터 옵션을 선호하여 더이상 사용되지 않습니다.
This property has been deprecated in favor of the filters option.
'Document 해석 > PUG' 카테고리의 다른 글
| Jade에서 Pug 2로 마이그레이션(이동) - 1 (0) | 2021.01.18 |
|---|---|
| Pug(Jade)의 옵션 (0) | 2021.01.14 |
| Pug(Jade)의 Express 통합 (0) | 2021.01.12 |
| NodeJS 템플릿 엔진 Pug(Jade) 시작하기 (0) | 2021.01.12 |