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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.