NodeJS-06 swig template engine

Posted by gaspower on Wed, 10 Jul 2019 02:40:46 +0200

brief introduction

Swig is an excellent and concise template engine on node side, similar to Jinja, which is a Python template engine. At present, swig is not only more common on node side, but also better than jade and ejs, and can run well on browser side.

This is Official Documents.

grammar

Variables of swig

{{ foo.bar }}
{{ foo['bar'] }}
//If the variable is undefined, an empty character is output.

Label of swig

extends

For the current template to inherit the parent template, it must be at the front of the file

{% exdtends file %}

// Parameter file: relative path of parent template relative to template root

block

Define a block so that it can be overridden by inherited templates, or overridden by the same name block of the parent template

{% block blockName %}something can be entended and modified...{% endblcok %}
// Parameter name: the name of the block, which must begin with an alphanumeric underscore

parent

Inject the content of the block with the same name in the parent template into the current block

{% extends "./foo.html" %}
{% block content %}
    My content.
    {% parent %}
{% endblock %}

include

Contains a template to the current location, which will use the current context

The parameter file is the relative path containing the template relative template root

{% include "a.html" %}
{% include "template.js" %} 
//Place the imported file content where it is referenced

raw

Stop parsing swig tags, all of which will be output literally

The parameter file is the relative path containing the template relative template root

// foobar = '<p>'
{% raw %}{{ foobar }}{% endraw %}
// => {{ foobar }}

set

Set a variable that is reused in the current context, and the set value overrides the defined value

// foods = {};
// food = 'chili';
{% set foods[food] = "con queso" %}
{{ foods.chili }}
// => con queso

Template inheritance

Swig implements template inheritance using extends and block

example:

//layout.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block title %}My Site{% endblock %}</title>

    {% block head %}

    {% endblock %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

//index.html

{% extends './layout.html' %}

{% block title %}My Page{% endblock %}

{% block head %}
{% parent %}

{% endblock %}

{% block content %}
    <p>This is just an awesome page.</p>
    <h1>hello,lego.</h1>
    <script>

        //require('pages/index/main');
    </script>
{% endblock %}

The swig template is compiled:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    My Page
</head>
<body>
    <p>This is just an awesome page.</p>
    <h1>hello,lego.</h1>
    <script src="pages/index/main">
        //require('pages/index/main');
    </script>
</body>
</html>

Using swig in express

In the express framework, the default template is jade, which can be changed to other template engines. Modify app.js

var app = express(); 
app.set('view engine', 'jade');
// Change the above code to the following
// view engine setup
var app = express(),
swig = require('swig'),
app.engine('html', swig.renderFile); //Rendering html files with swig
app.set('view engine', 'html'); //Set default page extensions
app.set('view cache', false); //Setting Template Compilation without Cache
app.set('views', path.join(__dirname, 'views')); //Set up the page file of the project, that is, the location of the html file
swig.setDefaults({cache: false}); //Turn off swig template caching
swig.setDefaults({loader: swig.loaders.fs(__dirname + '/views')}); //Load templates from files. Write absolute paths instead of relative paths

Then change the file suffixes under the original views folder to html

Template file layout.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>{% block title %}{% endblock %}</title>
  {% block head %}
  {% endblock %}
</head>
<body>
  {% block content %}{% endblock %}
</body>
</html>

index.html

{% extends 'layout.html' %}

{% block title %}index {{title}} {%endblock%}

{% block head %}
{{title}}
{% endblock %}

{% block content %}
<p>This is just an awesome page.</p>
{% endblock %}

Then the routing settings can be used:

router.get('/', function(req, res) {
  res.render('index', { title: 'Title' });
});

Reference resources

Topics: Python github

Programmer Think