1. Sub-templates and their template inheritance

The relationship between template inheritance is the same as that of parent and child. The child can inherit all the content of the parent. Template inheritance can inherit the content of the parent template. Change the soup without changing the medicine. At the same time, the submodule can also add new content based on the parent module. .

Second, examples

{
    
    % extends "_layout.html" %}

At the beginning of an html, we found that there is a line of code like the above.
insert image description here
And we observed that this html file is different from ordinary files. This html file does not have "head" and "body", and there is no statement at the beginning. The following content directly rejects the content in the body, which is not in line with common sense.

Third, the extends tag

template:

// 导入头部页面
{
    
    % extends "_layout.html" %}

// 定义编辑区域
 {
    
    % block content %}
 {
    
    % endblock content %}

Through observation, it is found that adding new content to the submodule based on the parent module needs to be written in:

 {
    
    % block content %}
 {
    
    % endblock content %}

Inside, such submodules have references to all plugins and styles of the parent module, as well as their own content.

Fourth, find the file named _layout.html to observe

insert image description here
It is found that _layout.html references a lot of style and plug-in files, so that these plug-in files can also be used in submodules.

Fifth, try to add a new jqurey plugin

According to the previous analysis, I guess that if you want to increase the plug-in function, you need to introduce it in _layout.html, and then apply it in the sub-template.

Here is my jqurey plugin content. insert image description here
html code:

	<style>
		html{
    
    
			height:3000px;
		}
	</style>
	<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="toTop.js"></script>

Six, find the key import file

Added to the _layout.html parent template.

	<script type="text/javascript" src="toTop.js"></script>

Change to static template path:

<script src="{
    
    { url_for('static', filename='GoToTop.js') }}"></script>

because

<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>

There was a new version introduced before, this one can be omitted online.

This behavior may also depend on Jinja embedded in the application. Note that the child template does not define a footer block and will use the value from the parent template.
You cannot define multiple {% block %} tags with the same name in the same template. This limitation exists because block labels work in both directions. That is, a block tag not only provides a section that can be filled, but also defines the content of the fill in the parent. If there are two {% blok %} tags with the same name in the same template, the parent template has no way of knowing which block content to use.
Remember to start the plugin to true

Seven, start flask

enter

flask run

Startup project

Eight, observe the effect

insert image description here
Perfect solution, because all child templates of the project inherit the _layout.html parent template, so the reference can make all pages have this effect.

[Sub-template inheritance reference experience] Added jqurey plugin in template inheritance