In previous chapters, we chose to use Iris.Django as the template engine for our front end, so we’ll just cover its syntax here.

iris.DjangoTemplate syntax and usage

The template parser for iris.Django template engine is pongo2, which is a template engine similar to Django template syntax. Django is an open source Web application framework written in Python. Its template engine syntax is relatively simple, clear, and easy to use. So we used it as a front-end template engine for our blog.

Nested references to templates

When we create templates, we will take some common parts (header, footer, aside, etc.) and put them in their own place. We don’t need to repeat them on every page, we just need to introduce them on every page. At this point, we can use the include tag.

{% include "partial/header.html" %}
{% include "partial/footer.html" %}
Copy the code

Include can embed a fragment of code into a complete document. Use {% include “template file” %}.

Inheritance of templates

Template inheritance is a bit like a PPT master. We define a skeleton, write a page, leave most of it unchanged, and wrap the parts that need to change with the block tag:

{% block title %}
    <title>base</title>  <! Base --> base --> base --> base
{% endblock %}
Copy the code

The advantage of this definition is that the block can be overridden in the template that inherits it and displayed as a master if not overridden. For example, we define a base.html

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %}
        <title>base</title>  <! Base --> base --> base --> base
    {% endblock %}
    <! Bootstrap core CSS file of the latest version
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 100%;
            height: 50px;
            background-color: # 369;
        }
    </style>
</head>
<body>

<div class="header"></div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            {% include 'aside.html' %}
        </div>
        <div class="col-md-9">
            {% block content %}
                <h4>content</h4>
            {% endblock %}
        </div>
    </div>
</div>
</body>
</html>
Copy the code

This base. HTML is then inherited in index.html

{% extends 'base.html' %}

{% block title %}
    <title>index</title>
{% endblock %}


{% block content %}
    <div class="col-md-9">
        <h3>index</h3>
        <p>index content</p>
    </div>

{% endblock %}
Copy the code

This is done by using base. HTML as the master and rewriting the title and content parts in index.html.

Note: If you use the {% extends %} tag in the template, it must be the first tag in the template. In any other case, template inheritance will not work.

In the case of inheritance, it is possible to wrap data that may change in blocks, because blocks do not affect the parsing of templates even if they are not rewritten on subsequent pages, which is more convenient when overwritten.

Similarly, if more than one page needs to be used when writing a block later, add it to base.html and make it part of the master.

Output of a variable

The key to traversing complex data structures in Django templates is the period character. There is an object called people, which has Name, Gender, and Level attributes. The output in the template is:

<ul>
  <li>Web site:{{siteName}}</li>
  <li>Name:{{people.Name}}</li>
  <li>Gender:{{people.Gender}}</li>
  <li>Rating:{{people.Level}}</li>
</ul>
Copy the code

At the same time, when exporting variables, it also supports the use of filters to perform primary filtering on the data. The format is:

{{obj|filter__name:param}}
Copy the code

For example, if a variable has a value, it prints the current value, and if it has no value, it prints the default value:

{{ userName|default:" Warrior Anonymous "}}
Copy the code

Output length with length:

{{ value|length }}
Copy the code

If value is [‘a’, ‘b’, ‘c’, ‘d’], then output is 4.

Date Can format the time:

{{ value|date: ` ` 15:04 "2006-01-02"}}
Copy the code

Note that the value must be of type time. time, not a timestamp, which will return an error. The timestamp can either be converted to time. time on the controller, or we can use our custom template function:

{{stampToDate(nowStamp, "2006-01-02 15:04")}}
Copy the code

Truncatechars If the number of characters is greater than the specified number, it will be truncated. Truncated strings will be executed in a translatable ellipsis sequence (“…” The end:

{{ value|truncatechars:9}}
{{ value|truncatewords:9}}
Copy the code

Truncation in addition to string truncation truncatechars, truncatewords is also supported

Upper and lower can convert the case of a single word:

{{ value|upper}}
{{ value|lower}}
Copy the code

Safe Django templates automatically escape HTML tags and JAVASCRIPT syntactic tags to protect against XSS attacks. If you don’t want to use escape, use safe

{{ article.Content|safe}}
Copy the code

The back end passes variables to the template

In real web development, a variable in a controller needs to be injected into the view using the specific function ctx.viewData (“article”, article) before it can be used in a template. For example, if we define an article in the IndexPage() controller, It is then passed to the template for output.

Let’s start by adding the following code to the IndexPage() function in index.go

func IndexPage(ctx iris.Context) {
	nowStamp := time.Now().Unix()
	ctx.ViewData("nowStamp", nowStamp)

	article := model.Article{
		Id:          1,
		Title:       "This is an article.",
		Keywords:    "That's the key word.",
		Description: "This is the description.",
		CategoryId:  1,
		Views:       1,
		Category:    model.Category{
			Title: "This is the category name.",
		},
		ArticleData: model.ArticleData{
			ArticleId: 1,
			Content: "
      

        contents here 
      
",
		},
	}
	ctx.ViewData("article", article)
	ctx.View("index.html")}Copy the code

Then print it in the index.html template:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
Hello World!<br>
{{stampToDate(nowStamp, "2006-01-02 15:04:05")}}<br>
<div>Article Title:{{article.Title}}</div>
<div>Article Classification:{{article.Category.Title}}</div>
<div>The article Id:{{article.Id}}</div>
<div>Release Date:{{stampToDate(article.CreatedTime)}}</div>
<div>Key words:{{article.Keywords}}</div>
<div>Article Description:{{article.Description}}</div>
<div>Article content:{{article.ArticleData.Content|safe}}</div>
</body>
</html>
Copy the code

This way, the template gets the Article variable and prints out all the article members using template syntax.

The complete project sample code is hosted on GitHub. The complete project code can be viewed at github.com/fesiong/gob… You can also fork a copy to make changes on it.