Part 1 - return full html (Templates)
01
We use ''' '''
triple quotes to return multiple lines of htmm
from flask import Flask
app = Flask(__name__)
@app.route('/')
@app.route('/home')
def home():
return '''
<h1>Home</h1>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
'''
@app.route('/about')
def about():
return '<h1>About</h1>'
if __name__ == '__main__':
app.run(debug=True)
But this will get ugly fast
02
We can use templates by creating a templates folder within our directory. Create
a htm or html file for both home
and about
You have to save html files in directory named "templates"
Other wise it will NOT work
03
Now import render_template function from flask
and use the render_template function in the return
from flask import Flask, render_template app = Flask(__name__) @app.route('/') @app.route('/home') def home(): return render_template('home.htm') if __name__ == '__main__': app.run(debug=True)
Do the same thing for the about page
Part 2 - using python data in HTML (dummy data)
01
We can place python data into the html as a second argument to
render_template
Then use {% for post in posts %}
and {% endfor %}.
from flask import Flask, render_template
app = Flask(__name__)
posts = [{
'author': 'Corey Schafer',
'title': 'Blog Post 1',
'content': 'First post content',
'date_posted': 'April 20, 2018'
},
{
'author': 'Jane Doe',
'title': 'Blog Post 2',
'content': 'Second post content',
'date_posted': 'April 21, 2018'
}
]
@app.route('/')
@app.route('/home')
def home():
return render_template('home.htm', posts=posts )
@app.route('/about')
def about():
return '<h1>About</h1>'
if __name__ == '__main__':
app.run(debug=True)
02
Now in the HTML do the following to use it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1>Home (rendered)</h1>
{% for post in posts%}
<h1> {{ post.title }} </h1>
<p> By {{ post.author }} on {{ post.data_posted }} </p>
<p> {{ post.content }} </p>
{% endfor %}
</body>
</html>
Part 3 - {% if title %}
01
We can use if conditionals, for example with the title, we can pass in
another variable into render_template,
from flask import Flask, render_template
app = Flask(__name__)
posts = [
{
'author': 'Corey Schafer',
'title': 'Blog Post 1',
'content': 'First post content',
'date_posted': 'April 20, 2018'
},
{
'author': 'Jane Doe',
'title': 'Blog Post 2',
'content': 'Second post content',
'date_posted': 'April 21, 2018'
}
]
@app.route('/')
@app.route('/home')
def home():
return render_template('home.htm', posts=posts )
@app.route('/about')
def about():
return render_template('about.htm', title='about')
if __name__ == '__main__':
app.run(debug=True)
Place the code below in the home.htm
and about.htm
{% if title %}
<title>Flask_Blog {{ title }}</title>
{% else %}
<title>{{ title }}</title>
{% endif %}
If we change to url to the about page, we can see the title has changed
Part 4 - Template Comparitives
01
Create a new html or htm file and call it layout.htm
,
Copy and paste the html from 'about' or 'home' and delete any html that
is unique to the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if title %}
<title>Flask_Blog {{ title }}</title>
{% else %}
<title>{{ title }}</title>
{% endif %}
</head>
<body>
</body>
</html>
We now only have the html that is shared between 'about' and 'home' in the layout.htm
file
Create a block within the layout.htm
file where the html unique to the page
will be contained. Here we call the block content
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if title %}
<title>Flask_Blog {{ title }}</title>
{% else %}
<title>{{ title }}</title>
{% endif %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Within about and home, delete the html that is contained within the layout.htm
file. Use the extends "layout.htm" keyword and the about and home will
inherit the html from layout
{% extends 'layout.htm' %}
{% block content %}
<h1>Home (rendered)</h1>
{% for post in posts%}
<h2> {{ post.title }} </h2>
<p> By {{ post.author }} on {{ post.data_posted }} </p>
<p> {{ post.content }} </p>
{% endfor %}
{% endblock content %}
Part 5 - add bootstrap to each page
01
Visit getbootstrap.com
to copy the cdn links and javascript links then paste them into your layout.htm or html file so they can be applied to each page of your site.
Place the following code into the layout.htm template
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
layout.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
{% if title %}
<title>Flask_Blog {{ title }}</title>
{% else %}
<title>{{ title }}</title>
{% endif %}
</head>
<body>
<div class="container">
{% block content %}{% endblock %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
</body>
</html>
02
The container class is a standard class from bootstrap, This might be out of date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
{% if title %}
<title>Flask_Blog {{ title }}</title>
{% else %}
<title>{{ title }}</title>
{% endif %}
</head>
<body>
<div class="container">
{% block content %}{% endblock %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
</body>
</html>
03
To use css file, create a static folder and place the file in there
static → css → styles.css
.container {
margin: 0 5%;
width: 80%;
border: 2px solid black ;
}
03b
Part 6 - add header navbar, sidebar
01
Add this header to the layout.htm file, you can find the source codes at
python/.....
<header class="site-header">
<nav class="navbar navbar-expand-md bg-steel ">
<div class="container">
<a class="navbar-brand mr-4" href="/">Flask Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="/login">Login</a>
<a class="nav-item nav-link" href="/register">Register</a>
</div>
</div>
</div>
</nav>
</header>
02
replace the {% block content %} with the following,
you can find the source codes at
python/.....
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
Part 7 - add custom css
01
To use css file, create a static folder and place the file in there
static → css → styles.css
.container {
margin: 0 5%;
width: 80%;
border: 2px solid black ;
}
02
This is the styles on his github, copy and paste it into your styles.css script
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
Fix the margin and padding on your own accord, for now this is what it should look from the script above
This lesson is super long, I'm having an anxiety mental breakdown but i'm calm i'm writing, Place custom css in a directory called
static call the file main.css
add the url_for in the flaskblog.py
script
Please for the love of god last step,
use the url_for function class whatever the hell it is, in
a link tag in the head of the layout.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
{% if title %}
<title>Flask_Blog {{ title }}</title>
{% else %}
<title>{{ title }}</title>
{% endif %}
</head>
Add the above code to the head in layout.htm
or html and the page will look the same
