Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jasurhaydarovcode/template-engines
Template Engines PUG, HANDLEBARS, EJS
https://github.com/jasurhaydarovcode/template-engines
backend ejs express expressjs handlebars pug pug-template-engine template-engine
Last synced: about 1 month ago
JSON representation
Template Engines PUG, HANDLEBARS, EJS
- Host: GitHub
- URL: https://github.com/jasurhaydarovcode/template-engines
- Owner: jasurhaydarovcode
- Created: 2024-05-26T18:51:50.000Z (8 months ago)
- Default Branch: engine
- Last Pushed: 2024-11-03T15:56:07.000Z (3 months ago)
- Last Synced: 2024-11-03T16:32:41.570Z (3 months ago)
- Topics: backend, ejs, express, expressjs, handlebars, pug, pug-template-engine, template-engine
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Hi, You will find installation and information about `Template Engines` in this repo
#### For suggestions and additions `issue`
## ___There are 3 most popular template engines___
- PUG
- HANDLEBARS
- EJS
---
## start
```bash
npm init -y
```
## add script code `package.json`
```json
"scripts": {
"start": "node index.js"
},
```
#### main point `index.js `
# Template Engines
# 
PUG
#### Pug, formerly known as Jade, is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It simplifies HTML generation by using a clean, minimal syntax, making your templates more readable and maintainable.
### Key features of Pug include:
- Whitespace Sensitivity: Pug uses indentation to determine the structure of the HTML, reducing the need for closing tags.
- Clean Syntax: The syntax is concise and eliminates much of the boilerplate code found in traditional HTML.
- Logic in Templates: Pug supports JavaScript expressions, loops, and conditionals directly in the template.
- Mixins and Inheritance: Allows you to create reusable chunks of templates (mixins) and extend templates to avoid repetition.
## 🌱 Install
```bash
npm install pug
```
## 1. Use in an Express.js application:
```js
const express = require('express');
const app = express();
// Set the view engine to Pug
app.set('view engine', 'pug');
// Create a route
app.get('/', function (req, res) {
res.render('index', { title: 'Hello', message: 'This is a Pug example.' });
});
app.listen(3000, function () {
console.log('Server is running on port 3000');
});
```
## 2. Create a template:
For example, create a file named index.pug in the views folder with the following content:
```pug
doctype html
html
head
title= title
body
h1= title
p= message
```
## 4. Send data to the template:
Inject data within a route, as shown in the previous code snippet. The ` = ` syntax is used to interpolate JavaScript values directly into the HTML.
---
# 
HANDLEBARS
[//]: # (## 🌱 Install)
[//]: # (```bash)
[//]: # (npm i express-handlebars)
[//]: # (```)
# Coming Soon
---
# 
EJS
## 🌱 Install
```bash
npm install ejs
```
## 1. Use in an Express.js application:
```js
const express = require('express');
const app = express();
// Set the view engine to EJS
app.set('view engine', 'ejs');
// Create a route
app.get('/', function (req, res) {
res.render('index', { title: 'Hello', message: 'This is an EJS example.' });
});
app.listen(3000, function () {
console.log('Server is running on port 3000');
});
```
## 2. Create a template:
For example, create a file named index.ejs in the views folder with the following content:
```html
<%= title %>
<%= title %>
<%= message %>
```
## 3. Send data to the template:
Inject data within a route, as shown in the previous code snippet. The <%= %> syntax is used to output the values of JavaScript expressions, while <% %> can be used to execute JavaScript code without outputting it.
---
### you can install all three template engines in one
#### pug, handlebars and ejs
```bash
npm install --save pug ejs express-handlebars
```