close

Template Engine मा प्रयोग गर्दै Express.js

वेब विकासमा, अन्तरक्रियात्मक र गतिशील प्रयोगकर्ता अनुभवहरू सिर्जना गर्नको लागि वेब पृष्ठहरूमा सर्भरबाट डेटा प्रदर्शन गर्नु महत्त्वपूर्ण छ। यो जहाँ Template Engine उद्धार Express.js को लागी आउछ। A Template Engine एउटा उपकरण हो जसले तपाईंलाई सर्भरबाट HTML कोडमा डाटा इन्जेक्ट गरेर गतिशील HTML टेम्प्लेटहरू सिर्जना गर्न अनुमति दिन्छ।

किन प्रयोग गर्ने Template Engine ?

Template Engine सर्भरबाट आउने डाटाबाट HTML मार्कअपलाई अलग गर्न मद्दत गर्नुहोस्। यसले तपाईंलाई कोडको प्रत्येक लाइनमा डाटा इम्बेड नगरीकन HTML कोडलाई अझ सजिलै व्यवस्थापन गर्न अनुमति दिन्छ। यसको सट्टा, तपाईंले HTML कोड भित्र "प्लेसहोल्डरहरू" वा "ट्यागहरू" सिर्जना गर्नुहुनेछ, जुन Template Engine पछि सर्भर-साइड डेटाले भरिनेछ।

Template Engine मा प्रयोग गर्दै Express.js

Express.js विभिन्न समर्थन गर्दछ template engine, जस्तै Pug(पहिले जेड भनेर चिनिन्थ्यो) र EJS(Embedded JavaScript)। तल पग र EJS प्रयोग गर्ने उदाहरणहरू छन् Express.js:

Pug प्रयोग गर्दै Template Engine

Pug स्थापना गर्नुहोस्: तपाईंले pug npm मार्फत प्याकेज स्थापना गर्न आवश्यक छ। 

npm install pug --save

कन्फिगर गर्नुहोस् Template Engine: तपाईको एप्लिकेसनको कन्फिगरेसन फाइलमा(जस्तै, app.js), Pug लाई को रूपमा परिभाषित गर्नुहोस् template engine । 

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

पग टेम्प्लेट सिर्जना गर्नुहोस्: डाइरेक्टरीमा पग फाइलहरू सिर्जना गर्नुहोस् views । उदाहरणका लागि, एउटा index.pug फाइल सिर्जना गर्नुहोस्:

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

रुट ह्यान्डलिंग र डाटा रेन्डरिङ: रुट ह्यान्डलिङमा, तपाईं प्रयोग गरेर डाटा पास गर्न template engine सक्नुहुन्छ res.render() । 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

EJS प्रयोग गर्दै Template Engine

EJS स्थापना गर्नुहोस्: ejs प्याकेज npm मार्फत स्थापना गर्नुहोस्। 

npm install ejs --save

कन्फिगर गर्नुहोस् Template Engine: template engine तपाईंको एप्लिकेसनको कन्फिगरेसनमा EJS लाई परिभाषित गर्नुहोस्। 

app.set('view engine', 'ejs');

EJS टेम्प्लेट सिर्जना गर्नुहोस्: डाइरेक्टरीमा EJS फाइलहरू सिर्जना गर्नुहोस् views । उदाहरणका लागि, एउटा index.ejs फाइल सिर्जना गर्नुहोस्:

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

रुट ह्यान्डलिंग र डेटा रेन्डरिङ: रुट ह्यान्डलिंगमा, प्रयोगमा डेटा पास template engine गर्नुहोस् res.render() । 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

निष्कर्ष

Template Engine in प्रयोगले Express.js तपाईंलाई गतिशील वेब पृष्ठहरू सिर्जना गर्न र प्रयोगकर्ताको ब्राउजरमा सर्भरबाट जानकारी प्रदर्शन गर्न अनुमति दिन्छ। Pug, EJS, वा अन्य प्रयोग गरेर template engine, तपाइँ अन्तरक्रियात्मक र लचिलो वेब पृष्ठहरू बनाउन सक्नुहुन्छ जसले राम्रो प्रयोगकर्ता अनुभव प्रदान गर्दछ र HTML कोड र डेटाको व्यवस्थापनलाई अनुकूलन गर्दछ।