Skip to content

Commit 0de166c

Browse files
acsanyacsany
authored
Merge pull request #272 from realpython/primer-on-jinja-templating-update
Add materials for the Primer on Jinja tutorial
2 parents a72aed0 + cd092b2 commit 0de166c

File tree

7 files changed

+163
-0
lines changed

7 files changed

+163
-0
lines changed

‎primer-on-jinja-templating/README.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Primer on Jinja Templating
2+
3+
This repository holds the code for the Real Python [Primer on Jinja Templating](https://realpython.com/primer-on-jinja-templating/) tutorial.
4+
5+
## Dependencies
6+
7+
You should first create a virtual environment:
8+
9+
```console
10+
$ python -m venv venv
11+
$ source venv/bin/activate
12+
```
13+
14+
You can then install Jinja and Flask with `pip`:
15+
16+
```console
17+
(venv) $ python -m pip install Jinja2 flask
18+
```
19+
20+
Alternatively, you can install the pinned dependencies from `requirements.txt`:
21+
22+
```console
23+
(venv) $ python -m pip install -r requirements.txt
24+
```
25+
26+
This command will install the versions used in the tutorial of Jinja, Flask, and their dependencies.
27+
28+
## Run the Web App
29+
30+
You can start your Flask development server by running `app.py` as a script:
31+
32+
```console
33+
(venv) $ python app.py
34+
```
35+
36+
To see your home page, visit `http://127.0.0.1:5000`.
37+
38+
## Author
39+
40+
- **Philipp Acsany**, E-mail: [[email protected]]([email protected])
41+
42+
## License
43+
44+
Distributed under the MIT license. See [`LICENSE`](../LICENSE) for more information.

‎primer-on-jinja-templating/app.py‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
from flask import Flask, render_template
2+
3+
app = Flask(__name__)
4+
5+
6+
@app.route("/")
7+
def home():
8+
return render_template("base.html", title="Jinja and Flask")
9+
10+
11+
max_score = 100
12+
test_name = "Python Challenge"
13+
students = [
14+
{"name": "Sandrine", "score": 100},
15+
{"name": "Gergeley", "score": 87},
16+
{"name": "Frieda", "score": 92},
17+
{"name": "Fritz", "score": 40},
18+
{"name": "Sirius", "score": 75},
19+
]
20+
21+
22+
@app.route("/results")
23+
def results():
24+
context = {
25+
"title": "Results",
26+
"max_score": max_score,
27+
"test_name": test_name,
28+
"students": students,
29+
}
30+
return render_template("results.html", **context)
31+
32+
33+
if __name__ == "__main__":
34+
app.run(debug=True)

‎primer-on-jinja-templating/requirements.txt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
click==8.1.3
2+
Flask==2.1.2
3+
itsdangerous==2.1.2
4+
Jinja2==3.1.2
5+
MarkupSafe==2.1.1
6+
Werkzeug==2.1.2

‎primer-on-jinja-templating/templates/_navigation.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<nav>
2+
{% for menu_item in ["home", "results"] %}
3+
{{ macros.nav_link(menu_item) }}
4+
{% endfor %}
5+
</nav>

‎primer-on-jinja-templating/templates/base.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{% import "macros.html" as macros %}
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="utf-8">
7+
<title>{% block title %}{{ title }}{% endblock title %}</title>
8+
</head>
9+
10+
<body>
11+
<header>
12+
{% include "_navigation.html" %}
13+
</header>
14+
15+
{% block content %}
16+
<h1>Welcome to {{ title }}!</h1>
17+
{% endblock content %}
18+
19+
<footer>
20+
{{ macros.light_or_dark_mode("body") }}
21+
</footer>
22+
</body>
23+
</html>

‎primer-on-jinja-templating/templates/macros.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{% macro light_or_dark_mode(element) %}
2+
{% if request.args.get("mode") == "dark" %}
3+
<a href="{{ request.path }}">Switch to Light Mode</a>
4+
<style>
5+
{{ element }} {
6+
background-color: #212F3C;
7+
color: #FFFFF0;
8+
}
9+
{{ element }} a {
10+
color: #00BFFF !important;
11+
}
12+
</style>
13+
{% else %}
14+
<a href="{{ request.path }}?mode=dark">Switch to Dark Mode</a>
15+
{% endif %}
16+
{% endmacro %}
17+
18+
{% macro add_badge(student, students) %}
19+
{% set high_score = students|map(attribute="score")|max %}
20+
21+
{% if student.score == high_score %}
22+
⭐️
23+
{% elif student.score > 80 %}
24+
🙂
25+
{% else %}
26+
🙁
27+
{% endif %}
28+
{% endmacro %}
29+
30+
{% macro nav_link(menu_item) %}
31+
{% set mode = "?mode=dark" if request.args.get("mode") == "dark" else "" %}
32+
<a href="{{ url_for(menu_item) }}{{ mode }}">{{ menu_item|upper }}</a>
33+
{% if request.endpoint == menu_item %}
34+
←
35+
{% endif %}
36+
{% endmacro %}

‎primer-on-jinja-templating/templates/results.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{% extends "base.html" %}
2+
3+
{% block title %}{{ title }}{% endblock title %}
4+
5+
{% block content %}
6+
<h1>{{ test_name }} {{ title }}</h1>
7+
<ul>
8+
{% for student in students|sort(attribute="name") %}
9+
<li>
10+
{{ macros.add_badge(student, students) }}
11+
<em>{{ student.name }}:</em> {{ student.score }}/{{ max_score }}
12+
</li>
13+
{% endfor %}
14+
</ul>
15+
{% endblock content %}

0 commit comments

Comments
 (0)