Home > Developer > Web Develop
Preface: Today re-combed the front-end aspects of knowledge, found that learning things or to use, otherwise forget fast, nonsense not much to say, start!!
I. Template inheritance
1. Concept: The book says, template inheritance, like the inheritance on Python; in fact, the individual feels the same as all inheritance.
2. Application scenario: When we write a series of similar Jinja template, we find that we are always doing some useless operation, {percent} This thing knocks very tired, this time need to introduce template inheritance;
3. Example:
Step 1. First create a template, as a ' base class ';
Jilei.html:
<HTML><Head>{% block head%}<title>{% block title%} {% Endblock%}-My Application</title>{% Endblock%}</Head><Body>{% block body%}{% endblock%}</Body></HTML>
Step 2. Define another sub-template, inheriting the "base class";
Jicheng.html:
{% extends "jilei.html"%}{% block title%}index{% endblock%}{% block head%}{{super ()}} < style > </ style > {% endblock%}{% block body%} < H1 > Hello, world!. </ H1 > {% Endblock%}The emphasis here is {%block title%}/{%block head%}/{%block body%} in the sub-template to write the one that will be written, do not write, then render_template (' jicheng.html ') on the line ; A simple template inheritance is over.
Split Line
————————————————————————————————————————————————————————————————————————————
Two. Bootstrap
1. Application scenario: Bootstrap at present very popular, may in many projects will encounter, oneself also did Bootstrap's webpage, very convenient, the effect is also good
2. Example:
Step 1:pip Install flask-bootstrap installation environment;
Step 2: After the environment is installed, you can assume that we have a parent template (see. py source code)
Step 3: After you have the parent template, you need to create a child template inheritance;
Sub-Template: moban.html
{% extends "bootstrap/base.html"%}//This is the self-brought template of bootstrap after the environment is installed {% block title%}flasky{% endblock%}{% Block NavBar %}<Divclass= "NavBar navbar-inverse"role= "Navigation"><Divclass= "Container"><Divclass= "Navbar-header"><Buttontype= "button"class= "Navbar-toggle"Data-toggle= "Collapse"Data-target= ". Navbar-collapse"><spanclass= "Sr-only">Toggle Navigation</span><spanclass= "Icon-bar"></span><spanclass= "Icon-bar"></span><spanclass= "Icon-bar"></span></Button><aclass= "Navbar-brand"href="/">Flasky</a></Div><Divclass= "Navbar-collapse collapse"><ulclass= "Nav navbar-nav"><Li><ahref="/">Home</a></Li></ul></Div></Div></Div>{% endblock%}{% block content%}<Divclass= "Container"><Divclass= "Page-header"><H1>Hello, {{name}}!</H1></Div></Div>{% Endblock%}
Step 4: Write Python to invoke
From flask import flask,render_template,url_forfrom flask_bootstrap Import Bootstrapapp = Flask (__name__) Bootstrap = Bootstrap (APP) @app. Route ('/') #定义路由def index (): #视图函数 return render_template (' index.html ') # Read the TempData folder in the Jinja2 template to find the result of the previous run of this. py file; pass@app.route ('/user/<name> ') #动态路由def User (name): return render_template (' extend.html ', name=name) passif __name__ = = ' __ Main__ ': #启动服务器 app.run (debug = True) #debug = True debug mode It's so simple ~ ~
：
"Flask Web Development" NOTE 2: Template---inheritance, bootstrap
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
