[JS Master's Road] node. js template Engine Tutorials-jade and Combat 4-template reference, inheritance, plugin use

First, block module multiplexing

Define blocks that need to be reused with block

Block followed by the name of the module, referenced once the block content will be reused once

Post-compilation results:

II, inheritance template (extends)

In the actual development, the site's head, the tail is generally common, we can through the Jade template inheritance (extends) function, the public part of the abstraction, and then let the different pages inherit these public parts, and inherited it can also be rewritten

Create a new Layout.jade template

This is a public template, if our home page needs this public template, and the home page needs to modify this public template Layout section (Block container), then we can do this

Index.jade (homepage template)

Extends is to inherit the layout template, layout template according to the actual path to change, I here Index.jade and Layout.jade is similar, and then in the Index.jade template, I rewrite the block container module, The result after compiling the Index.jade is:

The layout is rewritten in Index.jade, so the template reuse is very flexible.

III. Include template (include)

In the example above, the head part of Layout.jade is isolated and placed in the Header.jade

Then use include in Layout.jade to introduce

The effect after compiling index.jade;

Four, the Jade API method

Compile usage:

Render Usage:

RenderFile, that's the template code inside the render file.

Index2.jade

Server.js

V. Use of plugins in jade

such as less plug-ins, need to install

CNPM Install jstransformer-less less-g

[JS Master's Road] node. js template Engine Tutorials-jade and Combat 4-template reference, inheritance, plugin use