I'm learning about template inheritance and I'm a little confused. When I navigate to index.html, I want the title to appear on the tab in my browser. And I want this functionality to be built into the base.html file, which I'm inheriting from, such that the function index on app.py need only be passed the argument title (and the html file name) to execute as described above.
For some reason, the code is not functioning as intended; the title is not present on the browser tab.
app.py:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html',title='index')
if __name__ == "__main__":
app.run(debug=True)
index.html:
<!DOCTYPE html>
{%extends "base.html"%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
base.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
{%block head%}
{% if title %}
<title> {{title}} </title>
{%endif%}
{%endblock%}
</head>
<body>
{%block body%}{%endblock%}
</body>
</html>
Both index.html and base.html are found in the templates folder as is necessary for jinja to function. No errors are being triggered, the title is simply not being formatted as intended.
What am I doing wrong?
I figured it out, I needed to pull the title lines OUT of the block statement! Subtle but makes a big difference.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
{%block head%}
{%endblock%}
{% if title %}
<title> {{title}} </title>
{%endif%}
</head>
<body>
{%block body%}{%endblock%}
</body>
</html>
Your base.html has two <title> tags. Which isn't valid html.
You'll want to remove the empty one and allow for the title to be passed as an argument in all cases.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title> <!-- Remove this line here! -->
{%block head%}
{% if title %}
<title> {{title}} </title>
{%endif%}
{%endblock%}
</head>
<body>
{%block body%}{%endblock%}
</body>
</html>
Related
I am learning about template inheritence in django
base.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>leshav</title>
</head>
<body>
<h1>My helpful timestamp site</h1>
{ % block content % }{ % endblock % }
<footer>
<hr>
<p>thanks</p>
</footer>
</body>
</html>
dateTime.html:-
{% extends "base.html" %}
{% block content %}
<p>today is {{ d|date:'d-m-y' }}.</p>
{% endblock %}
view for the function related to this page's url:-
def current_datetime_block(request):
now = datetime.datetime.now()
return render(request, "dateTime.html",{'d':now})
the problem is that it is not reading the content in the dateTime.html and is returning base.html file as it is
output:-
My helpful timestamp site
{ % block content % }{ % endblock % }
thanks
This is the output when I run the server
where the problem is coming? please help me
if anything else about the program is needed, you can ask me about it
I want to be able to change page with my flask when I press on a link
app.py
#app.route('/')
def index():
return render_template('home.html')
#app.route('/login')
def login():
return render_template('login.html')
#app.route('/signUp')
def login():
return render_template('signUp.html')
#app.route('/home')
def login():
return render_template('home.html')
home.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<a id ="img_nav" href="{{ url_for('home')}}"><img src = "{{ url_for('static', filename= 'images/UVM_LOGO.jpg') }}" alt="UVM logo" class = "left"></a>
<nav id= "nav_grid">
<section class="nav_section">
Log In
Sign Up
</section>
</nav>
<body>
<main>
<h1>Home</h1>
</main>
</body>
</html>
signUp.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<a id ="img_nav" href="{{ url_for('home')}}"><img src = "{{ url_for('static', filename= 'images/UVM_LOGO.jpg') }}" alt="UVM logo" class = "left"></a>
<nav id= "nav_grid">
<section class="nav_section">
Log In
Sign Up
</section>
</nav>
<body>
<main>
<h1>signUp</h1>
</main>
</body>
</html>
login.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<a id ="img_nav" href="{{ url_for('home')}}"><img src = "{{ url_for('static', filename= 'images/UVM_LOGO.jpg') }}" alt="UVM logo" class = "left"></a>
<nav id= "nav_grid">
<section class="nav_section">
Log In
Sign Up
</section>
</nav>
<body>
<main>
<h1>login</h1>
</main>
</body>
</html>
The error I get is : AssertionError: View function mapping is overwriting an existing endpoint function: login
How to I create a flask with a website that has many webpages,
Thank you!
How to I fix it thank you!
You have used the function name login for all of your other routes.
This is causing Flask to be unable to create all your routes because the same name is being overridden multiple times.
Rename your functions for /login, /signUp and /home.
Also you probably not want the links for "Log in" and "Sign up" to link to / (index).
Change them to url_for('login') (if you decide to name the function for /login as def login:). The same thing of course for "Sign up".
Check here for reference on how to use url_for: https://www.tutorialspoint.com/flask/flask_url_building.htm
Django version 2.1.3
Python version 3.7
Writing out sample code just to get an understanding of Django. Right now I'm on Templates and I'm having 0 luck when it come to rendering variables.
In views.py folder I've created a little dictionary and passed it through under the variable content
from django.shortcuts import render
# Create your views here.
posts = [
{
'Title': 'Challanger 1',
'Name': 'Sammy',
'Age': '33',
'Food': 'Seafood'
},
{
'Title': 'Challanger 2',
'Name': 'Sammy',
'Age': '33',
'Food': 'Seafood'
}
]
def home(request):
content = {
'posts': posts
}
return render(request, 'blog/home.html', content)
In my home.htmlfile, I've added a few 123 next to my {{variable}}to make sure the .html file is connecting to the view.py. When I py manage.py runserver, only the 123 is displayed but none of my {{variables}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{% for post in posts %}
<p>123 {{ post.name }}</p>
<h1>123 {{ post.title }}</h1>
<h1>123 {{ post.age }}</h1>
{% endfor %}
</body>
</html>
localhost:8000 produces:
123
123
123
123
123
123
When I open view-source from the browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>123 </p>
<h1>123 </h1>
<h1>123 </h1>
<p>123 </p>
<h1>123 </h1>
<h1>123 </h1>
</body>
</html>
Side note: When I'm in the home.html file I've noticed that only {{post.title}} and {{post.name}} auto-fill and {{post.age}} and {{post.food}} never auto-fill.
There are also times when I've deleted everything in the home.html file and none of the {{variables}} auto-fill when I rewrite out the code. Either way the ending result is still the same, variables wont load.
You're using post.name (all lowercase) in the template, but you defined the dictionaries in the python code to have Name (uppercase N) as the key.
Try using {{ post.Name }}.
Here is the problem, Dictionary Keys Are Case-Sensitive.
try below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{% for post in posts %}
<p>123 {{ post.Name }}</p>
<h1>123 {{ post.Title }}</h1>
<h1>123 {{ post.Age }}</h1>
{% endfor %}
</body>
</html>
everyone! I have an issue when inheriting from another template in Flask. My first file layout.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1>Some header</h1>
</header>
<content>
{% block content %}{% endblock %}
</content>
</body>
</html>
Second one "main.html":
{% extends "layout.html" %}
{% block content %}<p>test</p>{% endblock %}
Everything looks ok but when I load the page in browser the elements looks like this(everything from head is moved to body:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
<header>
<h1>Some header</h1>
</header>
<content>
<p>test</p>
</content>
</body>
</html>
Can anyone explain why this happens?
Maybe a little bit too late... The issue was, that I'd changed my IDE. Before I'd used PyCharm, then I switched to Visual Studio. It looks like they both use different encoding and something broke during migration. Creating new file and copying content was the solution.
I had to change the background image of the jumbotron below based on the input taken from the database.
Here's the code:
housekeeping.html
<div class="jumbotron" style="background-image:url('{%block wallpaper%}{%endblock%}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
profile.html
{%extends 'housekeeping.html'%}
...
...
{%block wallpaper%}{{wallpaper}}{%endblock%}
app.py
#app.route('/name/<b64>')
def profile_for_song(b64):
...
... #retrives the value of `wallpaper` form a row in the database.
...
wallpaper = '/static/wallpaper.jpg' #dummy value.
return render_template('profile.html', wallpaper=wallpaper)
but it doesn't work, as the value of background-image:url('') remains null.
Is it not possible to alter css with jinja blocks?
PS: I tried with url_for but still nothing.
Watch the use of whitespace control in your wallpaper block in profile.html.
app.py
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def hello_world():
wallpaper = '/static/wallpaper.jpg'
return render_template('profile.html', wallpaper=wallpaper)
if __name__ == '__main__':
app.run()
housekeeping.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('{% block wallpaper%}{% endblock %}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>
profile.html
{%extends 'housekeeping.html'%}
{% block wallpaper -%}
{{ wallpaper }}
{%- endblock %}
Sample output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('/static/wallpaper.jpg');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>