In my template, i use load static to load static files:
{% load static %}
<link rel="stylesheet" href="{% static 'css/default.min.css?t=227' %}" />
but in the browser html changed to this messy code:
<link rel="stylesheet" href="/static/css/default.min.css%3Ft%3D227">
Put the query args outside the template tag.
"{% static 'css/default.min.css' %}?t=227"
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.
I am trying to link a css file to my html inside a django project but it does not seem to be linking.
base.html
<head>
<title>Document</title>
{% load static %}
<link rel="stylesheet" href="{% static 'myApp/styles.css' %}">
</head>
my folder structure
You static file(styles.css) should be in a static directory created in the root level.
what ever i try to do i can't get the favicon to show up, when i look it up in the view source tab it loads up but won't appear in the tab icon position.
i'm importing it in the html like so:
{% load static %}
<link rel="stylesheet" href="{% static "css/index.css" %}"/>
<link rel="Favicon" type="image/png" href="{% static 'images/icon.png' %}"/>
i set the django staticfile_dirs like so:
STATICFILES_DIRS = [
os.path.join('static'),
os.path.join('static/images'),
]
Try .ico format instead of .png format and rel="shortcut icon" or rel="icon"
The value of the rel="…" attribute should be icon [mdn webdocs], not Favicon:
<link rel="icon" type="image/png" href="{% static 'images/icon.png' %}"/>
If your image loads in the browser, you need to have the favicon link be rel="icon" rather than rel="Favicon".
See Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?
Additionally, you can add a URL route called "favicon.ico" that returns your file.
If your image doesn't load, there is a problem with your static asset serving: https://docs.djangoproject.com/en/dev/howto/static-files/
I thought it would be easier to download bootstrap and adjust it to my code, instead of messing about a cdn. So I downloaded bootstrap and my directory looks like this.
My static directory is properly (I think) setup since my style.css and maps.js are working fine.
In my base.html I reference the files with:
The old way <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}" />
<script src="{% static 'maps.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7' %}"></script>
The static boostrap-3.3.7 is not working. The cdn worked however. My question is how would my static import look to have this setup with the bootstrap directory properly work?
I'm sorry if it's a stupid question.
You are trying to include a complete directory into your HTML, which is impossible. You should adjust the path in {% static 'bootstrap-3.3.7' %} to the location of the actual file you need.
<script src="{% static 'bootstrap-3.3.7/dist/js/boostrap.min.js' %}"></script>
Note, don't forget to add the css file too, you need to include them both individually. Which will probably be:
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/dist/css/boostrap.min.css' %}"/>
I have a django page and I add various js dependencies on multiple pages. For example, on page 1 and 2 I have table that I want to sort. So I include following code in both pages.
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>
Let's say, on page 3 and 4 I have nvd3 graphs. So I include following code:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.js"></script>
<link href="{% static 'js/nvd3-master/build/nv.d3.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
If I need to edit src url of these dependencies, I have to edit all pages containing them separately.
I would like to define variables on js and css static files, so I do not have to edit them multiple times, but just once.
Something like this:
bootstrap_sortable_css = """<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">"""
bootstrap_sortable_js = """<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>"""
And then just print it in my template:
<html>
<head>
{{bootstrap_sortable_css}}
</head>
<body>
content
{{bootstrap_sortable_js}}
</body>
</html>
Is there any standard for this I did miss?
You might want to use block. Block is used for template inheritance. So, you can have 1 root template file, then all your pages just need to inherit the root template.
You can define A css and js block like this.
<html>
<head>
{% block css %}
{% endblock css %}
</head>
<body>
content
{% block js %}
{% endblock js %}
</body>
</html>
Then, you can override the block on your page template based on your page needs.