Как pug сгенерировать в js

The pug template engine in node.js getting started

When it comes to node.js template engines I am a big fan of ejs, but a pretty nice alternative is pug (formerly known as jade). It uses a clean whitespace sensitive syntax similar to markdown, but a bit more powerful. I still like ejs a lot because it is pretty much just like html but allows for embedded javaScript, put pug is kind of like markdown in the sense that it helps keep things neat, clean, and maybe more readable.

1 — pug js by itself or with a framework like express

If you are interested in learning more about the language itself there is a good guild for that at the official pug website. In this post I am going to be focusing on the use of the node.js npm package without any additional framework being used like express. However I have wrote a post in which I write more about using pug js with express.js

2 — pug js setup

As with most projects like this I set up a test folder, and install the package with npm.

One that is done I made a basic.js file that will be a hello world sort type js file that uses the project, that looks like this:

In this basic example I am using pugs render method that accepts a string of pug text, and returns plain old html.

3 — Some basics of the language

With pug the first few characters are interpreted as a tag, and a return is considered an end of the tag. Tags can also be nested by placing a return right after writing the first tag.

For a more compleate overview of the laguage it might be a good idea to check out the site on pug.

4 — Read *.pug files

Storing pug as an external file should have the *.pug extension, in addition reading pug files is a pretty straightforward process of just using the pug.readFile method.

I made a readfile.js file that I placed in the root of my test_pug project folder like this.

I also made a pugfiles folder in the project, and made some *.pug files to read. One of the files I made is called full.pug which looks like this:

So then I can call my readfile script from the command line and get the rendered html of a pug file just like this:

Convert PUG to Javascript/JQuery

I need to convert it to Javascript/Jquery format. I did get the fixes for if statements (I put enclosing brackets), however, how should I do the iteration part.

Should it be something like

1 Answer 1

My apologies for raising such a question. Anyway, as @atulquest93 said, I’ve already solved it. However, it wasn’t 100% correct. Below is the final version.

Also, this pug to html and vice versa to convert pug/jade code to html and vice versa on the fly. Cheers!

The Overflow Blog

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Name already in use

generator-webapp / docs / recipes / pug.md

Go to file T
Go to line L
Copy path
Copy permalink

Open with Desktop
View raw
Copy raw contents Copy raw contents

Copy raw contents

Setting up Pug (formerly known as Jade)

This recipe demonstrates how to set up Pug as your HTML template engine. In a similar way you can implement a different engine, like Haml.

We assume your directory structure will look something like this:

If you had something different in mind, modify paths accordingly.

1. Install dependencies

Install the Pug gulp plugin:

2. Create a views task

Add this task to your gulpfile.js , it will compile .pug files to .html files in .tmp :

We are passing pretty: true as an option to get a nice HTML output, otherwise Pug would output the HTML on a single line, which would break our comment blocks for useref.

3. Add views task to server and build process

4. Update other tasks

We want to parse the compiled HTML:

We don’t want to copy over .pug files in the build process:

Recompile Pug templates on each change and reload the browser after an HTML file is compiled:

5. Rewrite index.html as layout.pug + index.pug

To partially automatize this job, you can use html2jade. However, at the time of this writing html2jade has some drawbacks (e.g. doesn’t support conditional comments) and the output requires cleanup.

Check if everything is working properly. Run gulp serve and try changing a .pug file to see if the page updates etc.

This wasn’t exactly the simplest recipe ever; go grab a �� or something.

Footer

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Pug.js tutorial

The pug.js tutorial presents the Pug template engine.

Advertisements Pug

is a JavaScript template engine. It is is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. Pug was formerly calle Jade.

Template engine

A template engine or template processor is a library designed to combine templates with a data model to produce documents. Template engines are often used to generate large amounts of emails, in source code preprocessing, or producing dynamic HTML pages.

We create a template engine, where we define static parts and dynamic parts. The dynamic parts are later replaced with data. The rendering function later combines the templates with data.

Advertisements Setting up Pug.js

First, we install Pug.js.

We initiate a new Node application.

We install pug module with nmp i pug .

Pug.js rendering from string

We start with a very simple example that renders from a string.

The example shows output from a string template.

We load the render function from pug module.

This is our simple string template. The first value is the tag to be rendered. In addition, we add two variables: name and occupation . To output the variables we use the #<> syntax.

This is the data that we pass to the template engine.

The render function takes a template string and the context data. It compiles both into the final string output.

Advertisements Pug.js compileFile

The compileFile function compiles a Pug template from a file to a function which can be rendered multiple times with different locals.

This is the template file; it has a .pug extension.

We compile the template to a function and call the function with two different local data.

Pug.js renderFile

The renderFile function compiles a Pug template from a file and render it with locals to HTML string.

In the tempalte, we have a small HTML document with an unordered list. We have two variables.

We merge the locals and the options with Object.assign ;

In the options map, we set the pretty printing. (Note that this option is deprecated.)

Advertisements Pug.js passing a list of data

In the following example, we pass a list of data to the template engine and process it.

In the template, we use the each form to go over the list of data passed to the template.

We define a list of names. The list is passed to the template engine in the options with the names option.

Pug.js conditions

Conditions are created with if/else keywords.

In the template, we show en emphasized paragraph depending on the emp option.

With the dot syntax, we can pass a block of text to the tag.

We get the current data and pass it along the emp variable to the template engine. The emp determines whether the output is emphasized. The resulting output is written to a file with writeFileSync .

Advertisements Pug.js table

In the following example, we read data from a CSV file and render it in an HTML table.

We use the csv module to process the CSV data.

This CSV data is rendered in an HTML table.

The data is displayed in an HTML table.

The td= syntax interpolates the field.

We read and parse the CSV data. We seperate the CSV data into headers and records.