<script src="./home/static/js/2.d754fc32.chunk.js"></script>
Currently my html file points to this. What static variable django setting.py do I declare to make the HTML point to
<script src="./home/static/static/js/2.d754fc32.chunk.js"></script>
currently in setting.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '../frontend/build')
]
STATIC_ROOT = '/var/www/web/home/static/'
STATIC_URL = 'home/static/'
My build folder contains a static file inside as well.
if STATICFILES_DIR is in the right place:
You just have to {% load 'static' %} on the top of your html (after extend), and to set the css file:
<link rel="stylesheet" type="text/css" href="{% static '/style.css' %}">
if you want a img from there would be:
<img src="{% static '<PathOfImage>/img.png' %}">
Related
I want to add a static file to my django project app.
My app is named "core"
Hence inside the app where I need the static file (called main.css) , I made a directory named static/core/main.css
So after that my directory looks like this
core
....
-static
|_core
|_main.css
.........
And in the settings.py file , I wrote this
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
And in the html file where I want the static css I wrote this
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} Welcome | Ecommerce {% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="{% static 'core/main.css' %}">
This HTML file is located in a global project level template folder where I dump the templates from all the apps in the project .
But my static file is not getting loaded for some reason
May be because you didn't specify the file?
I guess you should change it from
<link rel="stylesheet" href="{% static '' %}">
To
<link rel="stylesheet" href="{% static 'core/main.css' %}">
Try to add
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
into your Django settings
In Your settings.py file add this
STATIC_URL = '/static/'
if DEBUG:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
else:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
after that open the terminal in your root directory and run the following command
python manage.py collectstatic
you can also refer to the django documentation where they have explained about staticfiles in django https://docs.djangoproject.com/en/3.2/ref/contrib/staticfiles/
How can I plug css into html by importing css from the main folder? I have a network project with 3 app.
network
--chat
--news
--static/style.css
...
My code:
{% load static %}
<link rel="stylesheet" href="{% style.css' %}">
It works if I create a static folder in some app, but I want to put it in the main network folder and then it stops working.
In your settings.py;
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
Then inside your html files;
{% load static %}
<link rel='stylesheet' href="{% static 'styles.css' %}">
Explanation
first of all i am setting the STATIC_URL which helps in the way that everytime you don't need to provide the path of the static files but use the syntax as i used ("{% static 'styles.css' %}").
After that i set the STATICFILES_DIRS which sets the directories where the app should search for the static files which i set to the static folder present in the base directory. You can set it as you want.
I'm not doing anything fancy. Just trying to get my static files to work using python manage.py runserver with Debug = True
'django.contrib.staticfiles' is installed.
These are my static settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Here is my template syntax:
{% load staticfiles %}
<title>Dashboard</title>
<!-- Bootstrap Core CSS -->
<link href="{% static "boostrap/bower_components/bootstrap/dist/css/bootstrap.min.css" %}"
rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="{% static "boostrap/bower_components/metisMenu/dist/metisMenu.min.css" %}"
rel="stylesheet">
<!-- Timeline CSS -->
<link href="{% static "boostrap/dist/css/timeline.css" %}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{% static "boostrap/dist/css/sb-admin-2.css" %}" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="{% static "boostrap/bower_components/morrisjs/morris.css" %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="
{% static "boostrap/bower_components/font-awesome/css/font-awesome.min.css" %}" rel="stylesheet" type="text/css">
findstatic can successfully locate these files when entered exactly as they are in the template:
(AlmondKing) C:\Projects\AlmondKing>python manage.py findstatic bootstrap/bower_components/bootstrap/dist/css/bootstrap.min.css --verbosity 2
Found 'bootstrap/bower_components/bootstrap/dist/css/bootstrap.min.css' here:
C:\Projects\AlmondKing\AlmondKing\static\bootstrap\bower_components\bootstrap\dist\css\bootstrap.min.css
Looking in the following locations:
C:\Projects\AlmondKing\AlmondKing\static
C:\Users\Adam\Envs\AlmondKing\lib\site-packages\django\contrib\admin\static
My URLS have no conflict:
ROOT URLS:
urlpatterns = [
url(r'^', include('AlmondKing.AKGenius.urls', namespace="AKGenius")),
url(r'^admin/', include(admin.site.urls)),
url(r'^purchases/', include('AlmondKing.InventoryLogs.urls', namespace="purchases")),
url(r'^company/', include('AlmondKing.FinancialLogs.urls',namespace="company")),
]
AKGenius URLS:
urlpatterns = [
url(r'^$', TemplateView.as_view(template_name='home.html'), name="home"),
url(r'^dashboard/$', TemplateView.as_view(template_name='control_panel.html'), name="dashboard"),
url(r'^support/$', 'AlmondKing.AKGenius.views.support'),
]
and the paths seem to be rendering correctly to the browser:
<!-- Bootstrap Core CSS -->
<link href="/static/boostrap/bower_components/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet">
And yes, I've restarted runserver since my last settings change.
What could be causing these to 404? Would it have something to do with Windows?
And as a proper answer in case anybody else comes across this post at a later date:
Looks like there's a typo in each line, where
{% static "boostrap
should be
{% static "bootstrap
I want to save my style.css file in the main project folder (for my project in django that is) under either /static/ or /templates/ but I cannot seem to load it properly. I use:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static '/style.css' %}" \>
This css file is suppose to be loaded with my /templates/base.html site (stored in the main project folder).
Thanks,
Matt
Loading of static files from templates directory is a bad idea - source of your templates will be available to web user.
To load files from static/ directory add the STATICFILES_DIRS to your settings.py:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
And BTW remove the first slash in the {% static %} tag:
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" \>
I am pretty new to Django and I am trying to put static files in my site but I am unable to do so. I am getting 404 when the browser tries to GET my static files
I'm not sure of the best practices or the correct way for Django to find these static files
Here is a picture of my project structure:
Here is my settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
In my index.html I have a line:
<link href="{{ STATIC_URL }}boothie.css" rel="stylesheet">
<script src="{{ STATIC_URL }}boothie.js"></script>
<script src="{{ STATIC_URL }}jquery.js.1.3.js"></script>
I think this would work:
{% load staticfiles %}
<link href="{% static "css/boothie.css" %}" rel="stylesheet">
<script src="{% static "js/boothie.js" %}"></script>
<script src="{% static "js/jquery.js.1.3.js" %}"></script>
See: Configuring static files
Edit:
You can maintain static files which belong to your home app with the structure like this:
home/
static/
css/
images/
js/
While deploying, you can set STATIC_ROOT to where you want to serve these static files, then run python manage.py collectstatic, django will copy your static files into the STATIC_ROOT directory and you can maintain static files easier (in a single directory) without changing your code.
static_url will give the relative path ....
You may have to include
<link href="{% static "css/boothie.css" %}" rel="stylesheet">