Filters in Pug View Engine
Last Updated :
01 Mar, 2024
Pug is a template engine that can be used to create HTML documents. It’s used to write templates that are then compiled into functions that take in data and render HTML documents.
We will discuss the different types of Filters in Pug Template and their Approaches:
What do you mean by filters in a pug template?
Filters in Pug are a powerful feature that allows you to use other languages in your templates. This can be useful for a variety of tasks, such as preprocessing data, generating dynamic content, or using a different templating language altogether.
1. :markdown: This filter converts Markdown to HTML.
:markdown
# Heading
*italic* and **bold** text.
2. :javascript: This filter converts JavaScript to HTML.
:javascript
console.log("Hello, world!");
3. :css: This filter converts CSS to HTML.
:css
body {
background-color: lightblue;
}
4. :coffee: This filter converts CoffeeScript to JavaScript.
:coffee
square = (x) -> x * x
console.log square(5)
5. :sass: This filter converts Sass to CSS.
:sass
$primary-color: blue;
body {
color: $primary-color;
}
6. :less: This filter converts Less to CSS.
:less
@primary-color: blue;
body {
color: @primary-color;
}
Approach to using Filters in Pug templates:
There are several approaches to using filters in Pug templates. These include:
- Inline Filters: Using the colon syntax directly within the template.
- Block Filters: Using block-level syntax with indentation.
- Extending Filters: Creating custom filters by extending Pug’s functionality.
Inline Filters:
Inline filters are used directly within the Pug template, prefixed with a colon followed by the filter name.
Syntax:
:filterName
Content to be processed by the filter.
Block Filters:
Block filters are applied to indented blocks of content within the template.
Syntax:
filterName
| Content to be processed by the filter.
Extending Filters:
Syntax:
//- Define custom filter
pug.filters['customFilter'] = function (text, options) {
// Process text and return the result
};
//- Use custom filter in the template
:customFilter
Content to be processed by the custom filter.
Steps to Node App & Install Required Modules
Step 1: Create a backend server using the following command in your project folder.
npm init -y
Step 2: Install the necessary package in your server using the following command.
npm i express ejs
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"express": "^4.18.2",
"ejs": "^3.1.9",
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>Welcome to our Pug-powered website!</p>
</body>
</html>
|
Javascript
const express = require('express');
const path = require('path');
const app = express();
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));
app.get('/', (req, res) => {
res.render('index', { title: 'Pug Template Example', message: 'Welcome to our Pug-powered website!' });
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on http:
});
|
To run the pug application, we need to start the server by using the below command.
node app.js
Example 2: Here’s an example combining multiple filter usages in a single Pug template along with their outputs:
Javascript
:markdown
# Heading
*Italic* and **bold** text.
:javascript
console.log("Hello, world!");
:css
body {
background-color: lightblue;
color: white;
}
:coffee
square = (x) -> x * x
console.log(square(5))
:sass
$primary-color: blue;
body {
color: $primary-color;
}
:less
@primary-color: blue;
body {
color: @primary-color;
}
|
Output:
The output of each section in the Pug template:
1. Markdown Filter:
<h1>Heading</h1>
<p><em>Italic</em> and <strong>bold</strong> text.</p>
2. JavaScript Filter:
Hello, world!
3. CSS Filter:’
<style>
body {
background-color: lightblue;
color: white;
}
</style>
4. CoffeeScript Filter:
25
5. Sass Filter:
<style>
body {
color: blue;
}
</style>
6. Less Filter:
<style>
body {
color: blue;
}
</style>
Output:
-(1)-300.png)
Conclusion:
Pug templates offer a versatile approach to building dynamic web applications, and filters play a crucial role in enhancing their functionality. By providing a seamless integration of various languages and preprocessors, filters empower developers to streamline their workflow and efficiently manage content within templates.
Share your thoughts in the comments
Please Login to comment...