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 /
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 %}
This is my first project with building a website. I have been following these tutorials. I browsed through the Bootstrap components page and found a Carousel method (slides only) that I wanted to use. I copied and pasted it into my code. The first image shows up which is correct, because it is active, but the Carousel does not slide to the next image. The first code block shows a summed up version. The second block of code is after running python manage.py runserver. The third block of code is when I open the IP address link. I am not sure what I am doing wrong. Any suggestions? Let me know if you need some more information.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AeroTract</title>
<meta charset="utf-8" />
{% load static %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#FFF8DC"> <!-- Main page background color -->
<div class="container-fluid" style="min-height:95%; "> <!-- Footer Height -->
<div class="row">
<div class = "col-sm-2"> </div>
<div class="col-sm-8">
<br>
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{% static 'img/Forestry.png' %}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/Agricultural.png' %}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/Industrial.png' %}" alt="Third slide">
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</body>
</html>
(base) C:\Users\name\PycharmProjects\Django_tutorials\mysite>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
May 07, 2020 - 14:46:06
Django version 3.0.6, using settings 'mysite.settings'
Starting development server at http://#########/
Quit the server with CTRL-BREAK.
[07/May/2020 14:46:42] "GET / HTTP/1.1" 200 3408
You are only including the css from bootstrap. I believe you also need the javascript.
You may want to add the these scripts:
https://getbootstrap.com/docs/4.4/getting-started/introduction/#js
In my experience popper.js.min file was apparently clashing with bootstrap. Disabling that solved the problem.
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.
<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 %}