"Flask Web Development" NOTE 2: Template---inheritance, bootstrap

Source: Internet
Author: User

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 ';


<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";


{% 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.