Blended Template

Blended Template is a templating language which is a blend of most widely used templating languages. Like, Jinja, Nunjucks, Twig and Django.

Blended Template For Express

In Express, we are using Nunjucks as templating language with the concept of a mixture of Blended templating language as well.

Base Template

It’s responsible for the styling components of the theme and defines content_blocks under some design patterns. It's a blend of html and blended templating language.

It will be residing inside the html directory of the theme path. In my case the path is: C:/Ranjeet/Desktop/package/blended_tech/html.

Here, I am giving you an example of a base template that is wide.html.

Host Template

It provides dynamic data to the base template by extending it.

It will be residing inside the views directory in the root path of the theme.

In my case the path is: C:\Users\Ranjeet\Desktop\blended-express-js\views\about.html.

Here, I am giving you an example of a host template that is about.html

How to Include the theme into your Express application?

Extending a predefined Blended template should allow you to add a new page in your Express application.

First, you have to choose a page layout based on available base templates inside the theme. A Blended theme can support various templates like, home, landing, left, narrow, right and wide.

If you are writing a host template then you have to extend the base template which you want to use as per your need. In this way, you can send the dynamic content to the base template by using its well defined blocks.

Here, we are extending the wide template for an example

Blocks

We have predefined blocks named meta, title, css, body_class, top, navigation_header, banner_dynamic, navigation_footer, javascript_lib, javascript_local, content_header, content_hero, content_footer, content_1, content_2, content_3, content_4, content_5 and content_6. You can refer to the documentation of Blended Theme for details.

Navigation Blocks

You can add a navigation block as below in the host template.

For navigation_header

For navigation_footer

Add css

Css is managed by the block named css. We can set the styling by using this block in the host template.

Theme css

We are using a css_link host function inside the css block which compiles the entire css framework of the theme.

You can add or change the styling components in the file named /blended_tech/css/style.css.

Ex:

Extra css

You can add extra css by adding a css file or can write inline css through css block.

Using a file: If you want to add a css file, say extra.css, then place it inside the path /static/css/extra.css.

Inline css: You can write inline css directly inside the style tag.

Ex:

Add js

Javascript is managed by two blocks named javascript_local and javascript_lib. We can add the javascript by using these blocks in the host template.

javascript_lib

If you want to add a javascript file, say extra.js then place it inside the path /static/js/extra.js. You can use the javascript_lib block to define it.

Ex:

Add an Image

For an internal image file

If you want to use image files from the theme then you can do it by:

Ex:

Note: Here, image file “logo” is available inside the media folder inside the theme.

For external image file

If you want to use external image files then you can do it by:

Ex:

Note: Here, an image file “logo.png” is available inside the media folder of the root path in your project directory.