pug
Pugによる補間

Angular 2 AngularJS CSS HTML JavaScript jQuery MongoDB Node.js PHP twitter-bootstrap
サーチ…


前書き

Webサイトでサーバー側の変数を使用できるようにすることが重要です。 Pugはあなたのサーバによって生成されたデータをHTML、CSS、JavaScriptコードで補間することができます。

構文

  • res.render（path、variables）//パス "path"にレンダリングするpugファイルを検索し、 "変数"を渡します
  • ＃{variable} // "変数"を評価した後、 "変数"を周囲のJadeコードとインラインで補間します。
  • ！{変数} // "変数"を評価せずに、 "変数"を周囲の翡翠コードとインラインで補間します。
  • ＃[element] //既存のPug HTML要素の中に "element"を補間します。補間されたHTML要素の構文は、通常のHTML要素の構文と同じです。

パラメーター

パラメータ詳細
パス res.render使用されres.render 。これは、レンダリングしようとしているPugファイルのパスです。パスは、Expressアプリケーションで設定されたフォルダのルート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使用され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ファイルの中で、そのキーを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をJavaScriptで文字列として解釈するために、 usernameを引用符で囲んでいなければなりません。 Pugは変数の内容をそのまま出力するので、適切なJavaScript文字列になるように二重引用符で囲む必要があります。これはnumberには必要ではありません.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オブジェクトの値（ユーザーに関するすべての情報など）を補間する必要がある場合は、JavaScriptオブジェクトとして扱うためにPugで出力を文字列にする必要があります。変数の評価された形式ではなく、変数の生の内容を出力することも必要です。エスケープされた変数（ 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