pug => पग के साथ इंटरपोल

परिचय

आपकी वेबसाइट में सर्वर-साइड चर का उपयोग करने में सक्षम होना महत्वपूर्ण है। पग आपको अपने सर्वर द्वारा HTML, CSS और यहां तक कि जावास्क्रिप्ट कोड द्वारा उत्पन्न डेटा को इंटरपोल करने की अनुमति देता है।

वाक्य - विन्यास

res.render (पाथ, वैरिएबल्स) // पाग फ़ाइल के लिए सर्च करता है पथ "पथ" पर रेंडर करने के लिए, और इसके लिए "वैरिएबल" पास करता है
{{चर} का मूल्यांकन करने के बाद, आसपास के जेड कोड के साथ "वैरिएबल" को इंटरपोल करता है।
"चर" का मूल्यांकन किए बिना, आसपास के जेड कोड के साथ "वैरिएबल" को इंटरपोल करता है।
# एक तत्व] मौजूदा पग एचटीएमएल तत्व के अंदर "तत्व" को इंटरपोल करता है। प्रक्षेपित HTML तत्वों का सिंटैक्स सामान्य HTML तत्वों के समान होता है।

पैरामीटर

पैरामीटर	विवरण
पथ	`res.render` में उपयोग किया `res.render` । यह पग फ़ाइल का पथ है जिसे हम रेंडर करने जा रहे हैं। पथ आपके एक्सप्रेस ऐप पर सेट किए गए फ़ोल्डर की जड़ से लिया गया है: `app.set("views", "templates/views")` । उदाहरण के लिए, `res.render("index")` `templates/views/index.pug` पर पग फ़ाइल की खोज करेगा। उपनिर्देशिकाएं भी निर्दिष्ट की जा सकती हैं; `res.render("admin/index")` `templates/views/admin/index.pug` पर पग फ़ाइल की `templates/views/admin/index.pug` ।
चर	`res.render` में उपयोग किया `res.render` । `path` (ऊपर) द्वारा परिभाषित पग फ़ाइल के लिए चर की एक जावास्क्रिप्ट वस्तु को सुलभ बनाया जा सकता है। पग फ़ाइल के भीतर, उपरोक्त जावास्क्रिप्ट ऑब्जेक्ट की कुंजी चर के रूप में उपलब्ध हो जाती है। यदि `variables = {title: "Hello", color: "red"}` , हम `title` और `color` चर का उपयोग कर सकते हैं। नेस्टेड वस्तुओं की उपप्रकार भी उपलब्ध हैं।
परिवर्तनशील	ब्रैकेट सिंटैक्स `#{}` या `!{}` । `variable` का मूल्य उसके आसपास के पग कोड के संदर्भ में आउटपुट होगा। यदि एक पाउंड प्रतीक प्रारंभिक घुंघराले ब्रैकेट में लगाया जाता है, तो आउटपुट होने से पहले `variable` का मूल्यांकन किया जाएगा। यदि एक विस्मयादिबोधक बिंदु प्रारंभिक घुंघराले ब्रेस के लिए तैयार है, तो `variable` का मूल्यांकन नहीं किया जाएगा।
तत्त्व	वर्गाकार कोष्ठक sytax में प्रयुक्त `#[]` । HTML तत्व (पग सिंटैक्स में, सामान्य HTML सिंटैक्स नहीं) का मूल्यांकन किया जाएगा और आसपास के पग कोड के साथ आउटपुट इनलाइन किया जाएगा।

टिप्पणियों

पगजेएस प्रक्षेप के बारे में अधिक जानकारी के लिए, आधिकारिक पगजेएस प्रक्षेप दस्तावेज़ देखें।

सर्वर साइड वैरिएबल इंटरपोलेशन

डायनामिक कंटेंट या स्क्रिप्ट जेनरेशन के लिए अपने सर्वर से पग में वेरिएबल को पास करना संभव है। पग टेम्पलेट एक्सप्रेस में res.render फ़ंक्शन (या pug.renderFile में res.render गए चर का उपयोग कर सकते हैं यदि आप एक्सप्रेस का उपयोग नहीं कर रहे हैं, तो तर्क समान हैं)।

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 चर तक पहुँच सकते हैं। आपकी पग फ़ाइल में चर के नाम siteColors और siteNames बन जाते हैं।

किसी HTML तत्व की संपूर्णता को एक चर के बराबर सेट करने के लिए, बराबर ऑपरेटर = का उपयोग करें। यदि आपके चर को इनलाइन एम्बेड करने की आवश्यकता है, तो ऐसा करने के लिए ब्रैकेट सिंटैक्स #{} का उपयोग करें।

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 आउटपुट में शामिल है।

शीर्षक एक स्थानीय टेम्पलेट के मूल्यांकन के लिए मूल पैटर्न का अनुसरण करता है, लेकिन #{ और } बीच के कोड का मूल्यांकन किया जाता है, बच जाता है, और परिणाम प्रदान किए जाने वाले टेम्पलेट के आउटपुट में बफर हो जाता है। [स्रोत]

आप कच्चे एचटीएमएल वाक्य रचना शामिल करने के लिए की जरूरत है, एक विस्मयादिबोधक बिंदु के बजाय एक पाउंड प्रतीक का उपयोग ( !{} के बजाय #{} )।

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>

जावास्क्रिप्ट कोड में मूल्य प्रक्षेप

यदि आप सर्वर-साइड चर को क्लाइंट-साइड जावास्क्रिप्ट (या अन्य भाषाओं की आवश्यकता है) को पारित करने की आवश्यकता है, तो इंटरपोलिंग वैल्यू उपयोगी है।

वेरिएबल्स, संख्याओं, स्ट्रिंग्स और इसी तरह के मामले में, आप इन प्रकार के वेरिएबल्स को सीधे अपने जावास्क्रिप्ट में ब्रैकेट सिंटैक्स प्लस और एक स्पष्टीकरण बिंदु के साथ पास कर सकते हैं (ताकि कोष्ठक के अंदर कोड का मूल्यांकन न हो ।) यह पैराट्रिएजिंग के लिए उपयोगी है। जावास्क्रिप्ट कोड जिसे आपके सर्वर से कुछ की आवश्यकता होती है।

नीचे दिए गए उदाहरण में, हमें एक स्ट्रिंग के रूप में व्याख्या करने के लिए जावास्क्रिप्ट के लिए उद्धरण चिह्नों में username लपेटना होगा; पग चर की सामग्री को इस रूप में आउटपुट करेगा, इसलिए हमें इसे उचित जावास्क्रिप्ट स्ट्रिंग होने के लिए उद्धरण चिह्नों में रखना होगा। यह 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>

यदि आपको एक जावास्क्रिप्ट ऑब्जेक्ट (जैसे किसी उपयोगकर्ता के बारे में सभी जानकारी) के मूल्य को प्रक्षेपित करने की आवश्यकता है, तो आपको एक जावास्क्रिप्ट ऑब्जेक्ट के रूप में व्यवहार करने के लिए पग में आउटपुट को कड़ा करना होगा। चर के कच्चे माल का उत्पादन करना भी आवश्यक है, इसके मूल्यांकन के रूप के बजाय। यदि आप एस्केप किए गए वेरिएबल ( var user = #{JSON.stringify(user)} ) को आउटपुट करना चाहते थे, तो आपको ऑब्जेक्ट का एक एस्केप किया हुआ वर्जन प्राप्त होगा (जहाँ कोटेशन के निशान और एपोस्ट्रोफ़्स को " ) में बदल दिया जाता है, जो नहीं है हम 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>

innerHTML की #welcome-user के बराबर हो जाता है 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

pug
पग के साथ इंटरपोल

खोज…

परिचय

वाक्य - विन्यास

पैरामीटर

टिप्पणियों

सर्वर साइड वैरिएबल इंटरपोलेशन

HTML में रॉ वेरिएबल इंटरपोलेशन

जावास्क्रिप्ट कोड में मूल्य प्रक्षेप

HTML तत्व इंटरपोलेशन