Skip to content

Commit ac7dff9

Browse files
HarshKumarSawHarshKumarSaw
committed
Learned Template Inheritance
1 parent 2c28c32 commit ac7dff9

File tree

5 files changed

+100
-317
lines changed

5 files changed

+100
-317
lines changed

‎02.Flask/templates/about.html‎

Lines changed: 5 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,6 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6-
<meta name="description" content="" />
7-
<meta name="author" content="" />
8-
<title>Clean Blog - Start Bootstrap Theme</title>
9-
<link rel="icon" type="image/x-icon" href="{{ url_for( 'static', filename='assets/favicon.ico' ) }}" />
10-
<!-- Font Awesome icons (free version)-->
11-
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
12-
<!-- Google fonts-->
13-
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
14-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
15-
<!-- Core theme CSS (includes Bootstrap)-->
16-
<link href="{{ url_for( 'static', filename='css/styles.css' ) }}" rel="stylesheet" />
17-
</head>
18-
<body>
19-
<!-- Navigation-->
20-
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
21-
<div class="container px-4 px-lg-5">
22-
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
23-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
24-
Menu
25-
<i class="fas fa-bars"></i>
26-
</button>
27-
<div class="collapse navbar-collapse" id="navbarResponsive">
28-
<ul class="navbar-nav ms-auto py-4 py-lg-0">
29-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
30-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
31-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
32-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
33-
</ul>
34-
</div>
35-
</div>
36-
</nav>
1+
{% extends "layout.html" %}
2+
3+
{% block body %}
374
<!-- Page Header-->
385
<header class="masthead" style="background-image: url(' {{ url_for( 'static', filename='assets/img/about-bg.jpg' ) }} ')">
396
<div class="container position-relative px-4 px-lg-5">
@@ -59,45 +26,5 @@ <h1>About Me</h1>
5926
</div>
6027
</div>
6128
</main>
62-
<!-- Footer-->
63-
<footer class="border-top">
64-
<div class="container px-4 px-lg-5">
65-
<div class="row gx-4 gx-lg-5 justify-content-center">
66-
<div class="col-md-10 col-lg-8 col-xl-7">
67-
<ul class="list-inline text-center">
68-
<li class="list-inline-item">
69-
<a href="#!">
70-
<span class="fa-stack fa-lg">
71-
<i class="fas fa-circle fa-stack-2x"></i>
72-
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
73-
</span>
74-
</a>
75-
</li>
76-
<li class="list-inline-item">
77-
<a href="#!">
78-
<span class="fa-stack fa-lg">
79-
<i class="fas fa-circle fa-stack-2x"></i>
80-
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
81-
</span>
82-
</a>
83-
</li>
84-
<li class="list-inline-item">
85-
<a href="#!">
86-
<span class="fa-stack fa-lg">
87-
<i class="fas fa-circle fa-stack-2x"></i>
88-
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
89-
</span>
90-
</a>
91-
</li>
92-
</ul>
93-
<div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2023</div>
94-
</div>
95-
</div>
96-
</div>
97-
</footer>
98-
<!-- Bootstrap core JS-->
99-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
100-
<!-- Core theme JS-->
101-
<script src="{{ url_for( 'static', filename='js/scripts.js' ) }}"></script>
102-
</body>
103-
</html>
29+
30+
{% endblock %}

‎02.Flask/templates/contact.html‎

Lines changed: 5 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,6 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6-
<meta name="description" content="" />
7-
<meta name="author" content="" />
8-
<title>Clean Blog - Start Bootstrap Theme</title>
9-
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
10-
<!-- Font Awesome icons (free version)-->
11-
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
12-
<!-- Google fonts-->
13-
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
14-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
15-
<!-- Core theme CSS (includes Bootstrap)-->
16-
<link href=" {{ url_for( 'static', filename='css/styles.css' ) }}" rel="stylesheet" />
17-
</head>
18-
<body>
19-
<!-- Navigation-->
20-
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
21-
<div class="container px-4 px-lg-5">
22-
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
23-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
24-
Menu
25-
<i class="fas fa-bars"></i>
26-
</button>
27-
<div class="collapse navbar-collapse" id="navbarResponsive">
28-
<ul class="navbar-nav ms-auto py-4 py-lg-0">
29-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
30-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
31-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
32-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
33-
</ul>
34-
</div>
35-
</div>
36-
</nav>
1+
{% extends "layout.html" %}
2+
3+
{% block body %}
374
<!-- Page Header-->
385
<header class="masthead" style="background-image: url(' {{ url_for( 'static', filename='assets/img/contact-bg.jpg' ) }} ')">
396
<div class="container position-relative px-4 px-lg-5">
@@ -109,50 +76,5 @@ <h1>Contact Me</h1>
10976
</div>
11077
</div>
11178
</main>
112-
<!-- Footer-->
113-
<footer class="border-top">
114-
<div class="container px-4 px-lg-5">
115-
<div class="row gx-4 gx-lg-5 justify-content-center">
116-
<div class="col-md-10 col-lg-8 col-xl-7">
117-
<ul class="list-inline text-center">
118-
<li class="list-inline-item">
119-
<a href="#!">
120-
<span class="fa-stack fa-lg">
121-
<i class="fas fa-circle fa-stack-2x"></i>
122-
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
123-
</span>
124-
</a>
125-
</li>
126-
<li class="list-inline-item">
127-
<a href="#!">
128-
<span class="fa-stack fa-lg">
129-
<i class="fas fa-circle fa-stack-2x"></i>
130-
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
131-
</span>
132-
</a>
133-
</li>
134-
<li class="list-inline-item">
135-
<a href="#!">
136-
<span class="fa-stack fa-lg">
137-
<i class="fas fa-circle fa-stack-2x"></i>
138-
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
139-
</span>
140-
</a>
141-
</li>
142-
</ul>
143-
<div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2023</div>
144-
</div>
145-
</div>
146-
</div>
147-
</footer>
148-
<!-- Bootstrap core JS-->
149-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
150-
<!-- Core theme JS-->
151-
<script src=" {{ url_for( 'static', filename='js/scripts.js' ) }}"></script>
152-
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
153-
<!-- * * SB Forms JS * *-->
154-
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
155-
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
156-
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
157-
</body>
158-
</html>
79+
80+
{% endblock %}

‎02.Flask/templates/index.html‎

Lines changed: 4 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,6 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6-
<meta name="description" content="" />
7-
<meta name="author" content="" />
8-
<title>Clean Blog - Start Bootstrap Theme</title>
9-
<link rel="icon" type="image/x-icon" href="{{ url_for( 'static', filename='assets/favicon.ico') }}" />
10-
<!-- Font Awesome icons (free version)-->
11-
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
12-
<!-- Google fonts-->
13-
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
14-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
15-
<!-- Core theme CSS (includes Bootstrap)-->
16-
<link href="{{ url_for( 'static', filename='css/styles.css') }}" rel="stylesheet" />
17-
</head>
18-
<body>
19-
<!-- Navigation-->
20-
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
21-
<div class="container px-4 px-lg-5">
22-
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
23-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
24-
Menu
25-
<i class="fas fa-bars"></i>
26-
</button>
27-
<div class="collapse navbar-collapse" id="navbarResponsive">
28-
<ul class="navbar-nav ms-auto py-4 py-lg-0">
29-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
30-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
31-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
32-
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
33-
</ul>
34-
</div>
35-
</div>
36-
</nav>
1+
{% extends "layout.html" %}
2+
3+
{% block body %}
374
<!-- Page Header-->
385
<header class="masthead" style="background-image: url(' {{ url_for( 'static', filename='assets/img/home-bg.jpg' ) }} ')">
396
<div class="container position-relative px-4 px-lg-5">
@@ -109,45 +76,4 @@ <h3 class="post-subtitle">Many say exploration is part of our destiny, but it’
10976
</div>
11077
</div>
11178
</div>
112-
<!-- Footer-->
113-
<footer class="border-top">
114-
<div class="container px-4 px-lg-5">
115-
<div class="row gx-4 gx-lg-5 justify-content-center">
116-
<div class="col-md-10 col-lg-8 col-xl-7">
117-
<ul class="list-inline text-center">
118-
<li class="list-inline-item">
119-
<a href="#!">
120-
<span class="fa-stack fa-lg">
121-
<i class="fas fa-circle fa-stack-2x"></i>
122-
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
123-
</span>
124-
</a>
125-
</li>
126-
<li class="list-inline-item">
127-
<a href="#!">
128-
<span class="fa-stack fa-lg">
129-
<i class="fas fa-circle fa-stack-2x"></i>
130-
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
131-
</span>
132-
</a>
133-
</li>
134-
<li class="list-inline-item">
135-
<a href="#!">
136-
<span class="fa-stack fa-lg">
137-
<i class="fas fa-circle fa-stack-2x"></i>
138-
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
139-
</span>
140-
</a>
141-
</li>
142-
</ul>
143-
<div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2023</div>
144-
</div>
145-
</div>
146-
</div>
147-
</footer>
148-
<!-- Bootstrap core JS-->
149-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
150-
<!-- Core theme JS-->
151-
<script src="{{ url_for( 'static', filename='js/scripts.js' ) }}"></script>
152-
</body>
153-
</html>
79+
{% endblock %}

‎02.Flask/templates/layout.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6+
<meta name="description" content="" />
7+
<meta name="author" content="" />
8+
<title>Clean Blog - Start Bootstrap Theme</title>
9+
<link rel="icon" type="image/x-icon" href="{{ url_for( 'static', filename='assets/favicon.ico') }}" />
10+
<!-- Font Awesome icons (free version)-->
11+
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
12+
<!-- Google fonts-->
13+
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
14+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
15+
<!-- Core theme CSS (includes Bootstrap)-->
16+
<link href="{{ url_for( 'static', filename='css/styles.css') }}" rel="stylesheet" />
17+
</head>
18+
<body>
19+
<!-- Navigation-->
20+
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
21+
<div class="container px-4 px-lg-5">
22+
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
23+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
24+
Menu
25+
<i class="fas fa-bars"></i>
26+
</button>
27+
<div class="collapse navbar-collapse" id="navbarResponsive">
28+
<ul class="navbar-nav ms-auto py-4 py-lg-0">
29+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
30+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
31+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
32+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
33+
</ul>
34+
</div>
35+
</div>
36+
</nav>
37+
38+
39+
{% block body %} {% endblock %}
40+
41+
<!-- Footer-->
42+
<footer class="border-top">
43+
<div class="container px-4 px-lg-5">
44+
<div class="row gx-4 gx-lg-5 justify-content-center">
45+
<div class="col-md-10 col-lg-8 col-xl-7">
46+
<ul class="list-inline text-center">
47+
<li class="list-inline-item">
48+
<a href="#!">
49+
<span class="fa-stack fa-lg">
50+
<i class="fas fa-circle fa-stack-2x"></i>
51+
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
52+
</span>
53+
</a>
54+
</li>
55+
<li class="list-inline-item">
56+
<a href="#!">
57+
<span class="fa-stack fa-lg">
58+
<i class="fas fa-circle fa-stack-2x"></i>
59+
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
60+
</span>
61+
</a>
62+
</li>
63+
<li class="list-inline-item">
64+
<a href="#!">
65+
<span class="fa-stack fa-lg">
66+
<i class="fas fa-circle fa-stack-2x"></i>
67+
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
68+
</span>
69+
</a>
70+
</li>
71+
</ul>
72+
<div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2023</div>
73+
</div>
74+
</div>
75+
</div>
76+
</footer>
77+
<!-- Bootstrap core JS-->
78+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
79+
<!-- Core theme JS-->
80+
<script src="{{ url_for( 'static', filename='js/scripts.js' ) }}"></script>
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)