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/
Related
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?
I just created a django application, and I have a problem that I cannot resolve. I have 1 css file 'root.css' that I would like to link with my html database but it's like this /static/root.css was completely ignored. I arrive mostly at link /static/home/home.css on my home app.
This is not work (/templates/base.html) :
{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" type="text/css" ref="{% static 'root.css' %}"> **// Not work**
{% block css %}
{% endblock %}
<title>Learned</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
This is work (/home/templates.home.html) :
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'home/home.css' %}">
{% endblock %}
In my settings.py :
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / "static"
]
OMG, I just understood the error! I just made a typo, I'm stupid I put "ref" instead of "href" in my first link. It sure works better like this: D
Are you running this with Debug = False (production)? If so you need something else to serve the static files , check https://docs.djangoproject.com/en/3.1/howto/static-files/
I am creating a web app using Django. I have a html template as follows:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I am using this template to create other html files using
{% extends 'document.html' %}
{% block content %} {% endblock %}
for the moment I am referring to all css and js files in the original document.html. how can I refer to different js and css files in the new templates only when necessary?
thanks
Put this in your setting.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.dirname(BASE_DIR) + '/staticfiles/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
create static folder in created app and put there your css, js and access via this
<link href="{{ static('/app_name/css/reset.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ static('/app_name/js/jquery-1.11.3.js') }}"></script>
now it's working. I made just few changes
{% extends 'document.html' %}
{% load staticfiles %}
{% block content %}
now I was able to include the js or css files I need it in the newly created template as follow for example
<script src="{% static 'vendors/js/tableexport.min.js' %}"></script>
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 have a web server in Django and Angular 4 frontend, but my problem is that I can't use tags Django in templates angular.
E.g.
I have this index.html like root in /templates (django)
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TrackerFrontend</title>
<base href="{% static %}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!--<link
rel="stylesheet"
type="text/css"
href="http://fonts.googleapis.com/css?family=Fontin">
Not work
-->
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="{% static 'inline.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'polyfills.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'styles.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'main.bundle.js' %}"></script>
</body>
</html>
If I try call a media file from my server I can see this
<img src="{% get_media_prefix %}/images/2017-08-12-19-28-20st1folio1.png">
But when I copy and paste the same img tag, do npm run build in my project angular and run again my server, I receive errors in terminal
Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)
this index.html is a copy of the real in frontend app, but I add {% load static %} and others tags to call bundle.js files.
It's possible replicate that call {% load static %} inside of each angular component?
The same error appears without the need to do npm run build
Change
<img src="{% get_media_prefix %}/images/2017-08-12-19-28-20st1folio1.png">
to <img src="{{ get_media_prefix }}/images/2017-08-12-19-28-20st1folio1.png">