在html页面中使用模板继承,Jinja模板继承实现Html页面划分

一个系统网站往往需要统一的结构，这样看起来比较“整洁”。

比如，一个页面中都有标题、左侧菜单、右侧内容显示、底部等四部分。

如果在每一个网页中都进行这些部分的编写，那么整个网站将会有很多冗余部分，而且，对于网页程序的编写也不美观。

这时候可以采用模板继承，即将相同的部分提取出来，形成一个base.html，具有这些相同部分的网页通过继承base.html来具有对应的模块。

这里采用的Jinja2中的模板继承机制来实现——将页面划分为标题栏、左侧菜单栏和右侧主页面。

base.html

{% block head %}

{% block title %}{% endblock %} - My Webpage

{% endblock %}

{% block content%}

{% endblock %}

{% block left %}

{% endblock %}

{% block right %}

{% endblock %}

{% block footer %}

© Copyright 2016 by you.

{% endblock %}

继承base的html

{% extends "base.html" %}

{% block title %}Index{% endblock %}

{% block head %}

{{ super() }}

.important { color: #336699; }

{% endblock %}

{% block content %}

Index

top-position

{% endblock content%}

{% block left %}

menu-position

{% endblock left%}

{% block right %}

main-position

{% endblock right%}

实现页面图：

其中：

{% block content%}

{% endblock %}

将页面划分为上下两部分；

{% block left %}

{% endblock %}

{% block right %}

{% endblock %}

将页面划分为左右两部分。