I am a beginner in Python and Django and I have been struggling with the following problem:
On localhost:8000/ webiste is beautiful and working fine but on localhost:8000/invoice/ SOME references are not working. CSS for example does not work but images and JavaScript do.
I am using relative links to point out where my path is.
<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/skel.min.js" %}"></script>
<script src="{% static "js/skel-layers.min.js" %}"></script>
<script src="{% static "js/init.js" %}"></script>
<noscript>
<link rel="stylesheet" href="{% static "css/skel.css" %}"/>
<link rel="stylesheet" href="{% static "css/style.css" %}"/>
<link rel="stylesheet" href="{% static "css/style-xlarge.css" %}"/>
</noscript>
<img src="{% static "images/pic07.jpg" %}" alt="" />
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static/"),
)
View.py
def home(request):
return render(request, 'principal.html',)
def invoice(request):
return render(request, 'invoice.html',)
When I check the page code with the browser I see the links are being referred as http://localhost:8000/invoice/static/css/somecss.css.
invoice.html is inside /project/folder/templates/ and my .css is inside /project/static/css/. invoice.html is inside the same folder my index.html (principal.html) page, which is working is.
Also, all links inside website/invoice/ page become website/invoice/link instead of website/link
Problem has been resolved removing tag. Also for 404 errors on console due to js files referencing other css files, I added a variable to my template to include the url:
<script>
var url = "{% static 'css/' %}";
</script>
And inside .js I used url.concat('style.css')
Related
I just finished reading Django document and I'm trying to deploy a website with it.
I linked all the style sheets to HTML file(template) but when I change the CSS file(like changing color), nothing change. Furthermore the pre loader don't work and Its just spinning.
Directory Structure:
HTML file header:
<link rel="stylesheet" href="{% static 'css/basic.css' %}" />
<link rel="stylesheet" href="{% static 'css/layout.css' %}" />
<link rel="stylesheet" href="{% static 'css/blogs.css' %}" />
<link rel="stylesheet" href="{% static 'css/line-awesome.css' %}" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'css/simplebar.css' %}" />
views.py:
def home(request):
return render(request, "index.html")
setting.py:
STATIC_URL = 'static/'
STATICFILES_DIR = [
path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = path.join(BASE_DIR, 'static')
And for the preloader:
HTML file:
<div class="preloader">
<div class="centrize full-width">
<div class="vertical-center">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
</div>
js:
$(window).on("load", function() {
var preload = $('.preloader');
var lines = $('.lines-grid');
preload.find('.spinner').fadeOut(function(){
preload.fadeOut();
lines.addClass('loaded');
});
});
I tried to delete the pre loader but when I delete the JS or the html element the page goes black at all
If your static files are loaded and when you make a change, you need to reset your browser cache. For this, you need to press the Ctrl + F5.
Sometimes you may need to run the project again, especially when you edit your settings.py file
My project name resume
I wanted to add bootstrap to my project
first I copy the assets files to my project sub folder called resume => static assests files
- resume->resume/static
Then I add following settings in setting .py
STATIC_DIR = BASE_DIR / 'resume/static'
STATIC_ROOT = BASE_DIR / 'static'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
after that I tired python manage.py collectstatic
and got a new directory
new static directory
after that I tired to add tag {% load static %} and alter the paths into {% static 'path' %}
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>MyResume Bootstrap Template - Index</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="{% static 'img/favicon.png' %}" rel="icon">
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="{% static 'vendor/aos/aos.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">
indext.html
still my website is not showing up
website image
please help
browser Console error
main.js:2 Uncaught TypeError: Cannot set property 'innerHTML' of null
at main.js:2
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/static/vendor/swiper/swiper-bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
You have to put {% load static %} at the first line.
ok the problem was with Chrome browser. there was no error in the code.
When I open the server with mozilla firefox there were no errors and website running fine
problem was with chrom devtool settings.
I have the following structure in my Django project. As you can see, there is one app called "blog" as well as the main app that is eponymous with the project itself.
The problem I am having has to do with serving static files from the static directory of the main project. The blog app has its own static directory and those files are served properly (when the pertinent URL routes are traversed).
Could someone tell me what I am doing wrong? Also, what is the best practice of serving static files when dealing with multiple apps? Is it prudent to dump all styles and scripts into a common static directory in the root of the project or is it better to keep things entirely separated from app to app?
settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, "..", "django_by_example_blog", "static")
STATIC_URL = '/static/'
urls.py
urlpatterns = [
url(r'^$', TemplateView.as_view(template_name="base.html")),
url(r'^admin/', include(admin.site.urls)),
url(r'^blog/', include('blog.urls', namespace='blog', app_name='blog')),
]
base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Triangle</title>
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/font-awesome.min.css" %}" rel="stylesheet">
<link href="{% static "css/animate.min.css" %}" rel="stylesheet">
<link href="{% static "css/lightbox.css" %}" rel="stylesheet">
<link href="{% static "css/main.css" %}" rel="stylesheet">
<link href="{% static "css/responsive.css" %}" rel="stylesheet">
<!--[if lt IE 9]>
<script src="{% static "js/html5shiv.js" %}></script>
<script src="{% static "js/respond.min.js" %}"></script>
<![endif]-->
<link rel="shortcut icon" href="{% static "images/ico/favicon.ico" %}">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{% static "images/ico/apple-touch-icon-144-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{% static "images/ico/apple-touch-icon-114-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{% static "images/ico/apple-touch-icon-72-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" href="{% static "images/ico/apple-touch-icon-57-precomposed.png" %}">
</head><!--/head-->
<body>
STATIC_ROOT specifies the folder into which all static files will be dumped when you run the collectstatic command
python manage.py collectstatic
You seem to have specified one of your app's static folder as the static_root.
It would be preferable to give another folder for holding all your static files.
STATIC_ROOT = os.path.join(BASE_DIR, "static")
when you run the collectstatic command it would collect all your static files and place them into the STATIC_ROOT folder.
Although, while running in DEBUG=True you needn't worry about any of this.
Django will serve all the static content (including from within individual apps), but in a production environment this is not recommended and it would be the job of the web server to serve static content.
EDIT:
You also need to specify in your base urls.py
from django.conf.urls.static import static
from django.conf import settings
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
"Dumping all styles and scripts into a common static directory" is exactly what the collectstatic command does. You should run that, and configure your server to serve the files from there.
First though you should set your STATIC_ROOT setting to point to that common directory, rather than inside your app.
I'm new to Django, and facing issues rendering bootstrap on a django page.
This is my base html,
{% load staticfiles %}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dropbox Web App Prototype</title>
<!-- Bootstrap -->
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
The static file is at the same level as the project directory and has the following structure,
I've also added the following line, to my settings.py file
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
The CSS is not rendering on the home page. Any help appreciated.
You are using an older syntax that's probably doesn't match your version of Django.
In your html file change:
{% load staticfiles %}
to
{% load static %}
Also, replace the single quote with a double quote :
"{% static 'bootstrap/css/bootstrap.min.css' %}"
to:
"{% static "bootstrap/css/bootstrap.min.css" %}"
you can see the exact syntax of dealing with static files here
BASE_DIR is defined by default to:
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
Here __file__ is actually settings.py, so BASE_DIR is on the parent directory, the one that contains manage.py.
It seems your static folder is on another level, so just move it to the same level as manage.py and it should work.
CDN:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
Static
In urls for django runserver:
if settings.DEBUG:
urlpatterns += [url(r'^static/(?P<path>.*)$', views.serve),]
When running from the webserver, you need to config an alias. Nginx example:
location /static {
alias /home/username/mysite/static;}
settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
In the html
replace this
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
with this
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
and check this is in the settings.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
just define additioaly static url in your settings as follow somewhere on the bottom:
STATIC_URL = '/static/'
and check again if your bootstrap is served
can you paste your BASE_DIR ? Can you set it to: BASE_DIR to BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
I currently have this template
index.html
<!DOCTYPE html>
{% load staticfiles %} <!-- New line -->
<html>
<head>
<title>GingerBites</title>
<link href='//fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Dancing+Script" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/styles.css"/>
</head>
<body>
</body>
</html>
settings.py
ACTUAL_DIR = os.path.dirname(__file__)
STATIC_PATH = os.path.join(ACTUAL_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
STATIC_PATH,
)
For some reason when running my app locally my css is served correctly, but on page refresh my css remains the same after I save changes and refresh my page. I think something is caching my css. Although when I remove the link to my css, all my css styling disappears. Does anyone know how I can change this?
Or why this might be happening?
Ok, turns out the issue is that static files should be called like so:
{% static /path/to/static %}
So in your case:
<link rel="stylesheet" type="text/css" href="{% static css/styles.css %}"/>
Django documents it here.