<html>
<head>
<title>{{ songname }}</title>
<meta charset="UTF-8">
{% load static %}
</head>
<body>
<center><h1>MUOSIC</h1></center>
<hr>
<audio controls>
<source src="{% static {{ songname }} %}" type="audio/mpeg">
</audio>
<hr>
</body>
Here songname is the name of the song which i want to play.All the static files are in the static directory.From the view function the above template is called using render_to_response function.So please can anyone explain the reason for this problem.
You can't nest template variables like that. Assuming that your songname is the actual name of the file and the file is in the root of your STATIC_ROOT, you simply do:
{% static songname %}
Related
I have a base.html which my options.html extends from like this
//options.html
{% extends "webpage/base.html" %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'webpage/options.css' %}">
{% block content %}
<div class="test">
foo
</div>
{% endblock content %}
//base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'webpage/base.css' %}">
<!-- jQuery-->
<script src="https://code.jquery.com/jquery-3.6.1.slim.js" integrity="sha256-tXm+sa1uzsbFnbXt8GJqsgi2Tw+m4BLGDof6eUPjbtk=" crossorigin="anonymous"></script>
<title>:)</title>
</head>
<body>
hello world
{% block content %}
{% endblock content %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
the issue is that the CSS is not loaded/applied.
In the web-console (when I run python manage.py runserver) and go to the "options" page, then I can see that the webpage/base.css is loaded (i.e GET /static/webpage/base.css is printed), but the webpage/options.css is not.
I thought I had something wrong in the static- path, but if I move the
<link rel="stylesheet" type="text/css" href="{% static 'webpage/options.css' %}"> into my base.html(and go to my home page) then I see that GET /static/webpage/options.css is now printet and the css in there indeed takes effect.
Why can it be that it is not loaded in the options.html file? Note, this question is not about CSS changes not taking effect (untill hard-refresh, cache clear etc.) but it seems like the file simply isn't getting loaded
When an HTML file extends another, it needs all its content in blocks, that it can insert into the base.html - otherwise it doesn't know where to put it.
In this case you'd want to create something like
base.html
<head>
...
{% block htmlhead %}
{% endblock htmlhead %}
</head>
And then include that block in your options.html
{% block htmlhead %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'webpage/options.css' %}">
{% endblock htmlhead %}
According to the Template inheritance documentation, I believe that these three paragraphs explains everything.
All the block tag does is to tell the template engine that a child
template may override those portions of the template.
The extends tag is the key here. It tells the template engine that
this template “extends” another template. When the template system
evaluates this template, first it locates the parent – in this case,
“base.html”.
At that point, the template engine will notice the three block tags in
base.html and replace those blocks with the contents of the child
template.
So basically, when you extend a skeleton, only the parts inside the blocks are replaced, everything else is ignored.
In order to do what you want, you need another block inside your base.html header, and use it in your options.html.
Just curious why this is working, since haven't found such examples in flask and jinjia2 official docs. It seems include is just simply put the content to the place just as it is, right?
# app.py
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
names = ['John', 'James', 'Jenny']
return render_template('index.html', names=names)
if __name__ == '__main__':
app.run(port=5200)
<!-- index.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>Home</title>
</head>
<body>
Welcome!
<!-- I know this is working as official docs -->
{% for name in names %}
<div class='card'>Welcome {{ name }}!</div>
{% endfor %}
<!-- but haven't found any examples like below, but it works -->
{% for name in names %}
{% include "card.html" %}
{% endfor %}
</body>
</html>
<!-- card.html -->
<div class='card'>Welcome {{ name }}!</div>
code example in vscode
From https://jinja.palletsprojects.com/en/3.0.x/templates/
Include
The include tag is useful to include a template and return the
rendered contents of that file into the current namespace:
{% include 'header.html' %}
Body {% include 'footer.html' %}
Included templates have access to the variables of the active context
by default.
This code will work because cards.html will be reloaded at each step of the "for" loop.
We can include a template in another template in the jinja structure. We don't have to use "for" when doing this.
The list elements to be navigated in the "for" loop are rendered from the flask view. In this way, we can use the rendered list and its elements as we want in the specified template while rendering.
{% for name in names %}
{% include "card.html" %}
{% endfor %}
The error that occurs during template rendering:
In template /Users/mac/myfirstproject/templates/base_layout.html, error at line 12
Reverse for 'list' not found. 'list' is not a valid view function or pattern name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTICLES</title>
<link rel="stylesheet" href="{% static 'styles.css' %}">
</head>
<body>
<div class="wrapper">
<h1><img src="{% static 'logo.png' %} "/></h1>
{% block content %}
{% endblock %}
</div>>
</body>
</html>
As indicated in Andrei's comment above, you need to make sure you have 'list' set up as a valid url name in your urls.py file.
something like this:
urls.py
from django.conf.urls import url
from .views import list_view
urlpatterns = (
url(r'^list$', list_view, name='list'),
)
in order to use the {% url 'url_name' %} template tag, you have to have a url named url_name, and if you have your project divided into apps, the format is:
`{% url 'app_name:url_name' %}. If you post your urls.py file, perhaps we can be more helpful.
I am new to Flask and trying to create a layout template using Jinja2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="{{ url_for('static', filename='bundle/login.styles.css') }}" rel="stylesheet">
<title>{{meta['title']}}</title>
</head>
<body>
<div class="app" id="app">
{% block content %}
{% endblock %}
</div>
<script type="text/javascript" src="{{ url_for('static', filename='bundle/login.bundle.js') }}"></script>
</body>
</html>
The problem is I get error jinja2.exceptions.UndefinedError when i use template.render():
jinja2.exceptions.UndefinedError: 'url_for' is undefined
It works fine when i use render_template() though. No error is generated. I dont know what i am doing wrong.
Also, what is the difference between using Jinja2.Environment and jinga.get_template() to generate template vs simply using render_template()
I've just passed the function url_for to render. It worked!
return make_response(current_app.safe_env.get_template('template.html').render(url_for=url_for))
When using render_template() this will also take care of adding the url_for() function to global variables available in templates.
http://flask.pocoo.org/docs/0.12/templating/#standard-context
If you do not have that done, then it will not be available.
If you want to look under the hood, a starting point for this particular question might be here:
https://github.com/pallets/flask/blob/master/flask/templating.py#L121
https://github.com/pallets/flask/blob/master/flask/app.py#L699
I have in my urls.py line:
if settings.DEBUG==True:
urlpatterns += patterns('',
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_DOC_ROOT})
)
In my settings file something like this:
STATIC_DOC_ROOT = os.path.join(os.path.dirname(__file__),'static').replace('\\','/')
And when I go to / in my page everything work just great. And when I click a link from / to anther page I don't have CSS applied because of 404 error. He tries to load a CSS file from that URL.
http://localhost:8000/show/sth/static/style.css
Here is my urls.py for this method
(r'^show/(?P<subject>[^/]+)/(?P<title>[^/]+)$','show'),
I have url /links and css works just in this one template it does not work. It seems that these parameters messing something up. Any suggestions why this fails?
Here is my template code:
{% extends "szkielet.html" %}
{% block tresc %}
<div id="content">
<div class="post">
<h2 class="title">{{ notatka.tytul }}</h2>
<p class="meta"><span class="author">{{ notatka.user.name }}</span> <span class="date">July 07, 2010</span> <span class="links">Comments</span></p>
<div class="entry">
<p>{{ notatka.tresc }}</p>
</div>
</div>
</div>
{% endblock %}
Szkielet.html - it is my base
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Perfect Blemish by Free CSS Templates</title>
<link href="{{ MEDIA_URL }}style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
Here is part responsible for CSS it is only one style sheet .
URL's could potentially be set to override the static url path but that's not the case here! So your URL conf doesn't have anything to do with this.
The core problem is that your template is rendering an incorrect URL: http://localhost:8000/show/sth/static/style.css should be http://localhost:8000/static/style.css correct?
Show us your template since that seems to be the problem. Sounds to me like you just have a relative URL set for your CSS instead of absolute or /static/style.css
What is your {{ media_url }}? It's supposed to be absolute, and begin with a /