Ko.js - अस्थायी

पग एक टेम्प्लेटिंग इंजन है। HTML के साथ हमारे सर्वर कोड की अव्यवस्था को हटाने के लिए टेंपलेटिंग इंजन का उपयोग किया जाता है, मौजूदा HTML टेम्प्लेट में बेतहाशा तार को घुसाया जाता है। पग एक बहुत ही शक्तिशाली टेम्प्लटिंग इंजन है, जिसमें कई तरह की विशेषताएं हैंfilters, includes, inheritance, interpolation, आदि इस पर कवर करने के लिए बहुत जमीन है।

कोआ के साथ पग का उपयोग करने के लिए, हमें निम्नलिखित कमांड का उपयोग करके इसे स्थापित करने की आवश्यकता है।

$ npm install --save pug koa-pug

एक बार पग स्थापित होने के बाद, इसे अपने ऐप के लिए टेम्प्लेटिंग इंजन के रूप में सेट करें। निम्न कोड को अपने app.js फ़ाइल में जोड़ें।

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //Equivalent to app.use(pug)
});

var _ = router(); //Instantiate the router

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

अब, एक नई निर्देशिका बनाएं जिसे दृश्य कहा जाता है। निर्देशिका के अंदर, First_view.pug नाम की एक फ़ाइल बनाएं, और उसमें निम्न डेटा दर्ज करें।

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello Views!

इस पृष्ठ को चलाने के लिए, अपने ऐप में निम्न मार्ग जोड़ें।

_.get('/hello', getMessage); // Define routes

function *getMessage(){
   this.render('first_view');
};

आपको आउटपुट प्राप्त होगा -

पग क्या करता है, यह HTML के लिए यह बहुत ही सरल दिखने वाला मार्कअप है। हमें अपने टैग बंद करने की आवश्यकता नहीं है, कक्षा और आईडी कीवर्ड का उपयोग करने की आवश्यकता नहीं है, बल्कि 'का उपयोग करें।' और '#' उन्हें परिभाषित करने के लिए। उपरोक्त कोड पहले परिवर्तित हो जाता है

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
    
   <body>
      <p class = "greetings" id = "people">Hello Views!</p>
   </body>
</html>

पग HTML मार्कअप को सरल बनाने की तुलना में बहुत अधिक करने में सक्षम है। आइए पग की इन विशेषताओं में से कुछ का पता लगाएं।

सरल टैग

टैग उनके इंडेंटेशन के अनुसार नेस्टेड हैं। उपरोक्त उदाहरण की तरह,<title> भीतर इंडेंट किया गया था <head>टैग, तो यह उसके अंदर था। हालांकि<body> टैग उसी इंडेंटेशन पर था, इस प्रकार यह एक भाई-बहन था <head> टैग।

हमें टैग बंद करने की आवश्यकता नहीं है। जैसे ही पग अगला टैग उसी या बाहरी इंडेंटेशन स्तर पर सामना करता है, यह हमारे लिए टैग बंद कर देता है।

टैग के अंदर टेक्स्ट डालने के तीन तरीके हैं -

अंतरिक्ष अलग -

h1 Welcome to Pug

पाइप्ड पाठ -

div
   | To insert multiline text, 
   | You can use the pipe operator.

पाठ का ब्लॉक -

div.
   But that gets tedious if you have a lot of text. 
   You can use "." at the end of tag to denote block of text. 
   To put tags inside this block, simply enter tag in a new line and 
   indent it accordingly.

पग टिप्पणी बनाने के लिए जावास्क्रिप्ट (//) के रूप में एक ही वाक्यविन्यास का उपयोग करता है। इन टिप्पणियों को HTML टिप्पणियों (<- टिप्पणी ->) में बदल दिया जाता है। उदाहरण के लिए,

//This is a Pug comment

इस टिप्पणी में परिवर्तित हो जाता है -

<!--This is a Pug comment-->

गुण

विशेषताओं को परिभाषित करने के लिए, हम कोष्ठक में, अल्पविराम द्वारा अलग की गई विशेषताओं की सूची का उपयोग करते हैं। क्लास और आईडी विशेषताओं का विशेष प्रतिनिधित्व है। कोड की निम्नलिखित पंक्ति एक निर्दिष्ट HTML टैग के लिए परिभाषित करने की विशेषताओं, कक्षाओं और आईडी को शामिल करती है।

div.container.column.main#division(width = "100",height = "100")

कोड की यह लाइन, में परिवर्तित हो जाती है -

<div class = "container column main" id = "division" width = "100" height = "100"></div>

टेंपरेचर पर वैल्यूज पास करना

जब हम एक पग टेम्पलेट प्रदान करते हैं, तो हम वास्तव में इसे हमारे मार्ग हैंडलर से एक मान दे सकते हैं, जिसे हम बाद में अपने टेम्पलेट में उपयोग कर सकते हैं। निम्नलिखित कोड के साथ एक नया मार्ग हैंडलर बनाएं।

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app // equals to pug.use(app) and app.use(pug.middleware)
});

var _ = router(); //Instantiate the router

_.get('//dynamic_view', dynamicMessage); // Define routes

function *dynamicMessage(){
   this.render('dynamic', {
      name: "TutorialsPoint", 
      url:"https://www.tutorialspoint.com"
   });
};

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

फिर, निम्नलिखित कोड का उपयोग करके, डाइनेमिक.पग नामक विचार निर्देशिका में एक नई दृश्य फ़ाइल बनाएं।

html
   head
      title = name
   body
      h1 = name
      a(href = url) URL

खुला हुआ localhost:3000/dynamicआपके ब्राउज़र में और निम्न आउटपुट होना चाहिए। -

हम पाठ के भीतर इन पारित चर का भी उपयोग कर सकते हैं। किसी टैग के पाठ के बीच में पारित चर डालने के लिए, हम # {variableName} वाक्य रचना का उपयोग करते हैं। उदाहरण के लिए, उपरोक्त उदाहरण में, यदि हम TutorialsPoint से अभिवादन सम्मिलित करना चाहते हैं, तो हमें निम्नलिखित कोड का उपयोग करना होगा।

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

मूल्यों का उपयोग करने की इस विधि को प्रक्षेप कहा जाता है।

सशर्त,

हम सशर्त विवरण और लूपिंग निर्माण का भी उपयोग कर सकते हैं। इस व्यावहारिक उदाहरण पर विचार करें, यदि कोई उपयोगकर्ता लॉग इन है, तो हम "हाय, यूजर" प्रदर्शित करना चाहेंगे और यदि नहीं, तो हम उसे "लॉगिन / साइन अप" लिंक दिखाना चाहेंगे। इसे प्राप्त करने के लिए, हम एक सरल टेम्पलेट को परिभाषित कर सकते हैं जैसे कि -

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

जब हम अपने मार्गों का उपयोग करके इसे प्रस्तुत करते हैं, और यदि हम किसी वस्तु को पास करते हैं जैसे -

this.render('/dynamic',{user: 
   {name: "Ayush", age: "20"}
});

यह हाय, आयुष को प्रदर्शित करने वाला संदेश देगा। हालाँकि, यदि हम कोई ऑब्जेक्ट पास नहीं करते हैं या किसी भी उपयोगकर्ता कुंजी के साथ पास नहीं करते हैं, तो हमें एक साइन अप लिंक मिलेगा।

शामिल करें और घटक

पग एक वेब पेज के लिए घटक बनाने के लिए एक बहुत ही सहज तरीका प्रदान करता है। उदाहरण के लिए, यदि आप एक समाचार वेबसाइट देखते हैं, तो लोगो और श्रेणियों के साथ शीर्ष लेख हमेशा तय होता है। हर दृष्टि से इसकी नकल करने के बजाय, हम एक शामिल का उपयोग कर सकते हैं। निम्नलिखित उदाहरण से पता चलता है कि हम एक का उपयोग कैसे कर सकते हैं -

निम्नलिखित कोड के साथ तीन दृश्य बनाएं -

header.pug

div.header.
   I'm the header for this website.

content.pug

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

footer.pug

div.footer.
   I'm the footer for this website.

इसके लिए एक मार्ग बनाएँ।

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //Equivalent to app.use(pug)
});

var _ = router(); //Instantiate the router

_.get('/components', getComponents);

function *getComponents(){
   this.render('content.pug');
}

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

के लिए जाओ localhost:3000/components, आपको निम्न आउटपुट मिलना चाहिए।