pug
Pug로 보간

Angular 2 AngularJS CSS HTML JavaScript jQuery MongoDB Node.js PHP twitter-bootstrap
수색…


소개

웹 사이트에서 서버 측 변수를 사용할 수 있어야합니다. Pug를 사용하면 HTML, CSS 및 JavaScript 코드로 서버에서 생성 된 데이터를 보간 할 수 있습니다.

통사론

  • res.render (path, variables) // "path"경로에서 렌더링 할 pug 파일을 검색하고 "pug"파일에 "variables"를 전달합니다.
  • # {variable} // "변수"를 평가 한 후 "변수"를 주변의 옥 코드와 인라인으로 보간합니다.
  • ! {variable} // "변수"를 평가하지 않고 "변수"를 주변의 옥 코드와 인라인으로 보간합니다.
  • # [element] // 기존 Pug HTML 요소 안에 "element"를 보간합니다. 보간 된 HTML 요소의 구문은 일반 HTML 요소의 구문과 동일합니다.

매개 변수

매개 변수 세부
통로 res.render 에서 사용됩니다. 이것은 우리가 렌더링하려고하는 Pug 파일의 경로입니다. 경로는 Express app에 설정된 폴더의 루트 app.set("views", "templates/views") 에서 가져옵니다. 예를 들어 res.render("index") 는 templates/views/index.pug 에서 Pug 파일을 검색합니다. 서브 디렉토리도 지정할 수 있습니다. res.render("admin/index") 는 templates/views/admin/index.pug 에서 Pug 파일을 templates/views/admin/index.pug .
변수 res.render 에서 사용됩니다. path (위)에 정의 된 Pug 파일에 액세스 할 수있게하는 변수의 JavaScript 객체입니다. Pug 파일 내에서 위 JavaScript 개체의 키를 변수로 사용할 수 있습니다. variables = {title: "Hello", color: "red"} , title 변수와 color 변수를 사용할 수 있습니다. 중첩 된 객체의 하위 속성도 사용할 수 있습니다.
변하기 쉬운 대괄호 구문 #{} 또는 !{} 됩니다. variable 의 값은 주변 Pug 코드의 컨텍스트에서 출력됩니다. 파운드 기호가 여는 중괄호 앞에 붙으면 variable 는 출력되기 전에 평가됩니다. 느낌표가 여는 중괄호 앞에 추가되면 variable 는 평가 되지 않습니다 .
요소 대괄호 sytax #[] 에서 사용됩니다. HTML 요소 (일반 HTML 구문이 아닌 Pug 구문)는 주변 Pug 코드와 함께 평가되고 출력됩니다.

비고

PugJS 보간에 대한 자세한 내용은 공식 PugJS 보간 설명서를 참조하십시오 .

서버 측 변수 보간

동적 콘텐츠 나 스크립트 생성을 위해 Pug에 서버의 변수를 전달할 수 있습니다. 퍼그 템플릿이 전달 변수에 액세스 할 수 있습니다 res.render Express의 기능 (또는 pug.renderFile 당신이 Express를 사용하지 않는 경우를, 인수가 동일하다).

index.js 

let colors = ["Red", "Green", "Blue"];
let langs  = ["HTML", "CSS", "JS"];
let title  = "My Cool Website";

let locals = {
    siteColors: colors,
    siteLangs:  langs,
    title:      title
};
res.render("index", locals);

그런 다음 index.pug 파일에서 해당 키를 사용하여 locals 변수에 액세스 할 수 있습니다. Pug 파일의 변수 이름은 siteColors 및 siteNames 됩니다.

HTML 요소의 전체를 변수로 설정하려면 equals 연산자 = 를 사용하십시오. 변수를 인라인으로 임베드해야하는 경우 대괄호 구문 #{} 을 사용하십시오.

index.pug 

doctype html
html
    head
        title= title
    body
        p My favorite color is #{siteColors[0]}.
        p Here's a list of my favorite coding languages
        ul
            each language in siteLangs
                li= language

index.pug 출력 

<!DOCTYPE html>
<html>
    <head>
        <title>My Cool Website</title>
    </head>
    <body>
        <p>My favorite color is Red.</p>
        <p>Here's a list of my favorite coding languages</p>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
        </ul>
    </body>
</html>

HTML에서 원시 변수 보간

대괄호 구문으로 보간 된 내용은 HTML 출력에 출력되는 코드에 대해 평가됩니다.

title은 로컬 템플릿을 평가하기위한 기본 패턴을 따르지만 #{ 와 } 사이의 코드는 평가되고 이스케이프 처리되며 결과는 렌더링되는 템플릿의 출력으로 버퍼링됩니다. [출처]

원시 HTML 구문을 포함해야하는 경우 #{} 대신 파운드 기호 ( !{} 대신 느낌표를 사용하십시오.

index.js 

let tag = "<div>You can't escape me!</div>";
res.render("index", {
    myTag: tag
});

index.pug 

doctype html
html
    head
    body
        !{myTag}

index.pug 출력 

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div>You can't escape me!</div>
    </body>
</html>

JavaScript 코드에서 값 보간

클라이언트 측 JavaScript (또는이를 필요로하는 다른 언어)에 서버 측 변수를 전달해야하는 경우 값을 보간하면 유용합니다.

변수, 숫자, 문자열 등의 경우 브래킷 구문과 설명 점을 사용하여 JavaScript에 직접 이러한 유형의 변수를 전달할 수 있습니다 (대괄호 안의 코드 는 평가 되지 않습니다 ). 매개 변수화에 유용합니다. 서버에서 무언가 필요한 자바 스크립트 코드.

아래 예제에서 JavaScript는이를 문자열로 해석하기 위해 username 을 따옴표로 묶어야합니다. Pug는 변수의 내용을 그대로 출력하므로 적절한 JavaScript 문자열이 될 수 있도록 따옴표로 묶어야합니다. number 는 필요하지 않습니다. 자바 스크립트에서는 번호로 해석합니다 (번호로).

index.js 

let number   = 24;
let username = "John";
res.render("index", {
    number:   number,
    username: username
});

index.pug 

html
    head
    script.
        // Sets the username of the current user to be displayed site-wide
        function setUsername(username) {
            // ...
        }
        var number   = #{number};
        var username = "#{username}";
        setUsername(username);
        
    body
        p Welcome to my site!

index.pug 출력 

<html>
    <head>
        <script>
            // Sets the username of the current user to be displayed site-wide
            function setUsername(username) {
                // ...
            }
            var number   = 24;
            var username = "John";
            setUsername(username);
        </script>
    </head>
    <body>
        <p>Welcome to my site!</p>
    </body>
</html>

JavaScript 객체의 값 (예 : 사용자에 대한 모든 정보)을 보간해야하는 경우 Pug에서 출력을 문자열로 지정해야 JavaScript 객체로 취급 할 수 있습니다. 변수의 평가 된 형식 대신 변수의 원시 내용을 출력해야합니다. 이스케이프 된 변수 ( var user = #{JSON.stringify(user)} )를 출력하려면 이스케이프 된 버전의 객체 (따옴표와 아포스트로피가 &quot; 로 변환되는)를 받게됩니다 &quot; 우리는 JSON.stringify 가 작업하기를 원합니다.

index.js 

var myUser = {
    name:    "Leeroy Jenkins",
    id:      1234567890,
    address: "123 Wilson Way, New York NY, 10165"
};

res.render('index', {
    user: myUser
});

index.pug 

doctype html
html
    head
        script.
            window.onload = function () {
                function setUsername(username) {
                    return username;
                }

                var user = !{JSON.stringify(user)};
                document.getElementById("welcome-user").innerHTML = setUsername(user.name);
            };

    body
        div(id="welcome-user")

index.pug 출력 

<!DOCTYPE html>
<html>
    <head>
        <script>
            window.onload = function() {
                function setUsername(username) {
                    return username;
                }

                var user = {
                    "name": "Leeroy Jenkins",
                    "id": 1234567890,
                    "address": "123 Wilson Way, New York NY, 10165"
                };
                document.getElementById("welcome-user").innerHTML = setUsername(user.name);
        };
        </script>
    </head>
    <body>
        <div id="welcome-user"></div>
    </body>    
</html>

#welcome-user 의 innerHTML 은 Leeroy Jenkins 동일 해집니다. user 변수의 내용은 HTML 소스에 직접 인쇄됩니다.

HTML 요소 보간

서로 HTML 태그를 중첩해야 할 수도 있습니다. 요소 보간은 변수 보간과 유사한 구문으로 수행됩니다. 중괄호 대신 대괄호가 사용됩니다. 보간 된 HTML 요소의 구문은 일반적인 HTML 요소의 구현과 동일합니다.

index.pug 

doctype html
html
    head
        title My Awesome Website
    body
        p The server room went #[b boom]!
        p The fire alarm, however, #[u failed to go off...]
        p Not even #[a(href="https://stackoverflow.com/") Stack Overflow] could save them now.

index.pug 출력 

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome Website</title>
    </head>
    <body>
        <p>The server room went <b>boom</b>!</p>
        <p>The fire alarm, however, <u>failed to go off...</u></p>
        <p>Not even <a href="https://stackoverflow.com/">Stack Overflow</a> could save them now.</p>
    </body>
</html>


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow