pug ट्यूटोरियल
पग के साथ शुरू हो रही है

टिप्पणियों

संस्करण

स्थापना

पग टेम्पलेट रेंडरिंग सिस्टम को स्थापित करने के लिए, इन चरणों का पालन करें:

1. अपनी मशीन पर Node.js पर्यावरण स्थापित करें
2. अपने वर्तमान प्रोजेक्ट के लिए pug मॉड्यूल को स्थापित करने के लिए npm install pug --save चलाएँ।

अब आप मानक require तंत्र के माध्यम से अपनी परियोजना में pug का उपयोग कर सकते हैं:

const pug = require("pug");

यदि आप अपने आवेदन में एक्सप्रेस का उपयोग कर रहे हैं, तो आपको आवश्यकता नहीं require("pug") । हालाँकि, आपको अपने एक्सप्रेस एप्लिकेशन की view engine प्रॉपर्टी को pug ।

app.set("view engine", "pug");

इसके अलावा, आपको अपने ऐप की व्यू डायरेक्टरी को सेट करना होगा ताकि एक्सप्रेस को पता चल सके कि आपकी पग फाइलें (संकलन के लिए) कहां दिखनी हैं।

app.set("views", "path/to/views");

अपने एक्सप्रेस मार्ग के भीतर, फिर आप फ़ाइल के पथ के साथ res.render फ़ंक्शन को कॉल करके अपनी पग फ़ाइलों को प्रस्तुत कर सकते हैं app.set("views") विकल्प द्वारा निर्धारित निर्देशिका से शुरू)।

app.get("/", function (req, res, next) {
    // Your route code
    var locals = {
        title: "Home",
    };
    res.render("index", locals);
});

उपरोक्त में, views/index.pug पर स्थित किसी फ़ाइल की index इंगित views/index.pug , और locals चर की एक वस्तु का प्रतिनिधित्व करते हैं जो आपकी फ़ाइल के संपर्क में हैं। जैसा कि बाद के खंडों में समझाया जाएगा, पग इसे पारित चर का उपयोग कर सकता है और विभिन्न प्रकार की क्रियाएं (सशर्त, प्रक्षेप, पुनरावृत्ति, और अधिक) कर सकता है।

हैलो वर्ल्ड उदाहरण

सबसे पहले, एक रेंडर करने के लिए टेम्पलेट बनाएं!

p Hello World, #{name}!

इसे .pug एक्सटेंशन के साथ समाप्त होने वाली फ़ाइल में सहेजें (आप इसे अपनी पसंद के अनुसार कुछ भी कह सकते हैं, लेकिन हम इसे संकलित करने के लिए निम्नलिखित कोड में view.pug का उपयोग करेंगे)।

अभी जो कुछ करना बाकी है, वह उस टेम्पलेट को संकलित करना है! एक जेएस स्क्रिप्ट फ़ाइल बनाएं (हम हमारा 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 साथ npm main.js , तो आपको अपने कंसोल में निम्न HTML कोड आउटपुट मिलना चाहिए:

<p>Hello World, John!</p>

बधाई, आपने अभी-अभी अपना पहला टेम्पलेट बनाया और संकलित किया है! अधिक उन्नत सामानों पर, जैसे कि सशर्त , Iteration , और भी बहुत कुछ!