New Jinja and uTemplate examples with Bootstrap
This commit is contained in:
Miguel Grinberg
19
examples/templates/jinja/bootstrap.py
Normal file
19
examples/templates/jinja/bootstrap.py
Normal file
@@ -0,0 +1,19 @@
|
||||
from microdot import Microdot, Response
|
||||
from microdot_jinja import render_template
|
||||
|
||||
app = Microdot()
|
||||
Response.default_content_type = 'text/html'
|
||||
|
||||
|
||||
@app.route('/')
|
||||
def index(req):
|
||||
return render_template('page1.html', page='Page 1')
|
||||
|
||||
|
||||
@app.route('/page2')
|
||||
def page2(req):
|
||||
return render_template('page2.html', page='Page 2')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run()
|
||||
@@ -10,7 +10,7 @@ def index(req):
|
||||
name = None
|
||||
if req.method == 'POST':
|
||||
name = req.form.get('name')
|
||||
return render_template('index_jinja.html', name=name)
|
||||
return render_template('index.html', name=name)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
48
examples/templates/jinja/templates/base.html
Normal file
48
examples/templates/jinja/templates/base.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!--
|
||||
This is based on the Bootstrap 5 starter template from the documentation:
|
||||
https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<title>Microdot + Jinja + Bootstrap</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">Microdot + Jinja + Bootstrap</a>
|
||||
</div>
|
||||
</nav>
|
||||
<br>
|
||||
<div class="container">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="alert alert-primary d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
|
||||
<div>This example demonstrates how to create an application that uses <a href="https://getbootstrap.com" class="alert-link">Bootstrap</a> styling. The page layout is defined in a base template that is inherited by several pages.</div>
|
||||
</div>
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<!-- Optional JavaScript; choose one of the two! -->
|
||||
|
||||
<!-- Option 1: Bootstrap Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
||||
<!--
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
6
examples/templates/jinja/templates/page1.html
Normal file
6
examples/templates/jinja/templates/page1.html
Normal file
@@ -0,0 +1,6 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<h2>This is {{ page }}</h2>
|
||||
<p>Go to <a href="/page2">Page 2</a>.</p>
|
||||
{% endblock %}
|
||||
6
examples/templates/jinja/templates/page2.html
Normal file
6
examples/templates/jinja/templates/page2.html
Normal file
@@ -0,0 +1,6 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<h2>This is {{ page }}</h2>
|
||||
<p>Go back <a href="/">Page 1</a>.</p>
|
||||
{% endblock %}
|
||||
19
examples/templates/utemplate/bootstrap.py
Normal file
19
examples/templates/utemplate/bootstrap.py
Normal file
@@ -0,0 +1,19 @@
|
||||
from microdot import Microdot, Response
|
||||
from microdot_utemplate import render_template
|
||||
|
||||
app = Microdot()
|
||||
Response.default_content_type = 'text/html'
|
||||
|
||||
|
||||
@app.route('/')
|
||||
def index(req):
|
||||
return render_template('page1.html', page='Page 1')
|
||||
|
||||
|
||||
@app.route('/page2')
|
||||
def page2(req):
|
||||
return render_template('page2.html', page='Page 2')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True)
|
||||
@@ -10,7 +10,7 @@ def index(req):
|
||||
name = None
|
||||
if req.method == 'POST':
|
||||
name = req.form.get('name')
|
||||
return render_template('index_utemplate.html', name=name)
|
||||
return render_template('index.html', name=name)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
14
examples/templates/utemplate/templates/base_footer.html
Normal file
14
examples/templates/utemplate/templates/base_footer.html
Normal file
@@ -0,0 +1,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Optional JavaScript; choose one of the two! -->
|
||||
|
||||
<!-- Option 1: Bootstrap Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
||||
<!--
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
33
examples/templates/utemplate/templates/base_header.html
Normal file
33
examples/templates/utemplate/templates/base_header.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!--
|
||||
This is based on the Bootstrap 5 starter template from the documentation:
|
||||
https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<title>Microdot + uTemplate + Bootstrap</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">Microdot + uTemplate + Bootstrap</a>
|
||||
</div>
|
||||
</nav>
|
||||
<br>
|
||||
<div class="container">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="alert alert-primary d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
|
||||
<div>This example demonstrates how to create an application that uses <a href="https://getbootstrap.com" class="alert-link">Bootstrap</a> styling. The page layout is defined in a base template that is inherited by several pages.</div>
|
||||
</div>
|
||||
7
examples/templates/utemplate/templates/page1.html
Normal file
7
examples/templates/utemplate/templates/page1.html
Normal file
@@ -0,0 +1,7 @@
|
||||
{% args page %}
|
||||
{% include 'base_header.html' %}
|
||||
|
||||
<h2>This is {{ page }}</h2>
|
||||
<p>Go to <a href="/page2">Page 2</a>.</p>
|
||||
|
||||
{% include 'base_footer.html' %}
|
||||
7
examples/templates/utemplate/templates/page2.html
Normal file
7
examples/templates/utemplate/templates/page2.html
Normal file
@@ -0,0 +1,7 @@
|
||||
{% args page %}
|
||||
{% include 'base_header.html' %}
|
||||
|
||||
<h2>This is {{ page }}</h2>
|
||||
<p>Go back <a href="/">Page 1</a>.</p>
|
||||
|
||||
{% include 'base_footer.html' %}
|
||||
Reference in New Issue
Block a user