The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “ locals ”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data. Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. For bug reports, feature requests and questions, open an issue. For discussion join the chat room.
Node Command
npm install pug
Pug also provides the pug.render() family of functions that combine compiling and rendering into one step. However, the template function will be re-compiled every time render is called, which might impact performance. Alternatively, you can use the cache option with render, which will automatically store the compiled function into an internal cache.
Example:
p #{name}'s Pug source code!
const pug = require('pug');
// Compile the source code const compiledFunction = pug.compileFile('template.pug');
// Render a set of data console.log(compiledFunction({ name: 'Timothy' })); // "<p>Timothy's Pug source code!</p>"
// Render another set of data console.log(compiledFunction({ name: 'Forbes' })); // "<p>Forbes's Pug source code!</p>"
A list is a collection of items, which might be organized in a sequential or unsequential manner. You can use a list to display related items that belong to a particular category. For example, to display the types of computers such as mainframe, microcomputer, and laptops, you would organize these items one below the other under the Types of Computer category. Similarly, HTML allows you to to display related items in a list on a web page.
A list in HTML can contain paragraphs, line breaks, images, links, and other lists. The items within a list are displayed on a web page one below the other using bullets. HTML supports three types of lists.
These are:
Ordered
Unordered
Definition
Ordered Lists
An ordered list is a list of items arranged in a particular order. Here, the order of the items is important as it indicates a sequential flow. For example, to display the days in a week or months in a year, you would use numbered bullets. Similarly, HTML allows you to implement numbered or alphabetic bullet.
HTML provides two elements for creating an ordered list. These are:
OL: creates an ordered list.
LI: Specifies an item and it is a sub-element of the OL element.
Example for Ordered List
<HTML> <HEAD> <TITLE>Days in a Week</TITLE> </HEAD> <BODY> <H2>Days in a Week:</H2> <OL> <LI>Sunday</LI> <LI>Monday</LI> <LI>Tuesday</LI> <LI>Wednesday</LI> <LI>Thursday</LI> <LI>Friday</LI> <LI>Saturday</LI> </OL> </BODY> </HTML>
Output
“list-style-type” Property
The list-style-type property is used to specify a numbering style for the ordered list. It is the property of the style attribute, which is specified within the <OL> tag.
You can specify styles such as roman numeral or alphabets for bullets, which will be applied to an ordered list, see the below table.
Property’s Value
Example
Decimal
1,2,3, …
Lower-alpha
a,b,c, …
Upper-alpha
A,B,C, …
Lower-roman
I, ii, iii, …
Upper-roman
I,II,III, …
Unordered Lists
An unordered list is a list wherein the items are arranged in a random order. This means that you will create an unordered list when the order of related items is not important. For example, to list the features of a product, you would create an unordered list. Each item in an unordered list is displayed using symbolic bullet such as circles and squares. These bullets are similar to the bullets provided by Microsoft Office Word.
HTML provides the UL element to create an unordered list.
Example for Unordered Lists
<HTML> <HEAD> <TITLE>Features of EasyPad</TITLE> </HEAD> <BODY> <H2>Features of EasyPad</H2> <UL> <LI>Opens many files at a time</LI> <LI>Unlimited undo and redo</LI> <LI>Reads and writes both Windows and Unix files</LI> </UL> </BODY> </HTML>
Output
“list-style-type” Property
The list-style-type property specifies the type of bullet to be applied to an unordered list. There are three types of bullets defined for the unordered lists in HTML. These bullet types are namely, disc, square, and circle; which the values that the list-style-type property can hold. The default value is disc, which is applied to unordered list even if the list-style-type property is not specified. These values are not case-sensitive.
Definition Lists
A definition list refers to a collection of terms with their corresponding description. For example, you can display a glossary on a web page by creating a definition list appears with the term indented on the left followed by the description on the right or on the next line. By default, the description text appears on the next line and is aligned with respect to the term.
You can specify a single line or multiple lines of description for each term. HTML provides three elements to create a definition list. These elements are:
DL: Is a container element that consists of the DT and DD sub-elements. It specifies that a definition list will be created using these elements.
DT: Specifies the term to be defined or described.
DD: Specifies the term to be defined or described.4
Example for Definition Lists
<HTML> <HEAD> <TITLE>TYPES OF NOUNS</TITLE> </HEAD> <BODY> <H2>Types of Nouns</H2> <DL> <DT><B>Common Noun:</B></DT> <DD> It is a name of an object in general, such as pencil, pen, paper, and so no.</DD> <DT><B>Proper Noun:</B></DT> <DD>It is the unique name of a person or a place.</DD> </DL> </BODY> </HTML>
