jquery does not load - Page not found (404)
base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="{% static 'bootstrap-5.0.0/css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<!-- jQuery -->
<script src="{% static 'jquery/jquery.js' %}"></script>
</head>
setting.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'ServiceCRM3/static'),]
static folder created
the script is in the path static / jquery / jquery.js
bootstrap picks up ok in the same folder
the server restarted
what's wrong?
Related
So I've seen a lot of tutorials here explaining what to do, but no matter what I change the static files won't seem to load. This is what my files are looking like atm
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [os.path.join(PROJECT_ROOT, "static"),'']
job_app/urls.py
urlpatterns = [
path('', main, name='index'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JobPortal - Free Bootstrap 4 Template by Colorlib</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% load static %}
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/open-iconic-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/icomoon.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
jobber/urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('job_app.urls'))
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Below configs worked for me. Django only needs two things.
What should be the base static URL (STATIC_URL)
And where to search static files (STATICFILES_DIRS)
Remove static urlpatterns from urls.py. Only define STATIC_URL and STATICFILES_DIRS in settings.py and remove STATIC_ROOT.
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
I created added a dashboard to my project it is using bootstrap files which I am trying to load but aren't loading.
I am trying to load static file using {% static '' %} and it's now picking up the files. You can ask for further code.
Here is the code of the template
<link href=" {%static '../static/Dashboard/assets/css/bootstrap.min.css'%}" rel="stylesheet" />
<link href="{%static '../static/Dashboard/assets/css/bootstrap.min.css '%}" rel="stylesheet"/>
<link href="{% static '../static/Dashboard/assets/css/paper-dashboard.css' %}" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
<link href=" {%static '../static/Dashboard/assets/css/themify-icons.css' %}" rel="stylesheet">
Setting in setting.py
STATICFILES_DIR=[
os.path.join(BASE_DIR, "static"),
'final_project/static',
]
STATIC_URL = '/static/'
In main folder of your project, create a folder named static. then in this folder create two other folders, named static_root and static_dirs
now change the settings.py file like this:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static', 'static_root')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static', 'static_dirs'),
)
then add static files in static/static_dirs directory.
now you can use static files in your templates like this:
<link href="{% static 'Dashboard/assets/css/paper-dashboard.css' %}" rel="stylesheet"/>
your template should be like this:
<!DOCTYPE html>
{% load staticfiles %}
<head>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
</html>
css/bootstrap.min.css is in final_project/static directory
Do not forget add {% load staticfiles %}
in settings.py you define static path, then this way is incorrect:
<link href="{% static '../static/Dashboard/assets/css/paper-dashboard.css' %}" rel="stylesheet"/>
correct:
<link href="{% static 'Dashboard/assets/css/paper-dashboard.css' %}" rel="stylesheet"/>
I'm developing with django first time. I have read what is : STATIC_ROOT / STATICFILES_DIR / STATIC_URL, I know what purpose for each of them.
I have a problem which I keep getting 404 on browser trying to get the css files.
setting.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_URL = '/static/'
STATIC_ROOT = '%s/online_static/' % (BASE_DIR)
STATICFILES_DIRS = ['%s/bootstrap/' % (PROJECT_DIR),]
index.html
<head>
{% load staticfiles %}
<meta charset="UTF-8">
<title>{% block title%}Default title{% endblock title %}</title>
<meta name="description" content="{% block metadescription%}{% endblock metadescription %}">
<meta name="keywords" content="{% block metakeywords%}{% endblock metakeywords %}">
<meta name="author" content="alme7airbi9357#gmail.com">
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/shop-homepage.css' %}" rel="stylesheet" type="text/css">
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
</head>
what I did
after setting this params I have run the python manage.py collectstatic
Note : DEBUG = False
As per the Django Docs, follow the configuration steps for static : https://docs.djangoproject.com/en/1.11/howto/static-files/
I am new to python Django.
I have a project like this below:
But in my TestModel APP, there is a index.html here:
<!doctype html>
{% load staticfiles %}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="" />
<meta name="description" content="" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> -->
<title>Python探索馆 - Slice</title>
<!-- Main Theme -->
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<!-- Font -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_n5vylbuqe61or.css" />
</head>
<body>
...
You see I have load the static files.
And in my testdj/ the settings.py, I have set the STATIC_URL:
STATIC_URL = '/static/'
But in the browser, the stylesheet did not load success.
EDIT-1
The css structrue:
You have put your static files in your template folder. That is not where they go. You need to put them either in your app or in a folder that is referenced by the STATICFILES_DIRS setting.
I'm working locally on a django project with bootstrap . The structure screenshot is above:
I have the following in 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" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Landing Page - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
{% load staticfiles %}
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet" />
<!-- Custom CSS -->
<link href="{% static "css/landing-page.css" %}" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="{% static "font-awesome-4.2.0/css/font-awesome.min.css" %}" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
In my settings.py I have:
STATIC_URL = '/static/'
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
When I open "http://onetwentyseven.0.0.1:8000/index/", I see the html but the bootstrap css styling is not present. in dev tools I see:
How can I fix the CSS paths?
This seems to be a syntax error. If you move the css directory from static>app1>css to static>css. It should work just fine