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/
Related
I'm making my first Django app and I'm trying to set up my signup.html page while extending my base.html. The URL I have configured works, however it only pulls through the base.html template. I've checked the view, url and the signup.html template and I'm not sure what I'm getting wrong.
signup.html:
{% extends './layout/base.html' %}
{% load static %}
{% block content %}
<h1>Signup</h1>
{% endblock content %}
base.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.0">
{% load static %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&family=Oswald&display=swap" rel="stylesheet">
<link rel="icon" href="{% static 'favicon.ico' %}">
<a target="_blank" href="https://icons8.com/icon/DpuVIej1M9Br/health">Health</a> icon by <a target="_blank"
href="https://icons8.com">Icons8</a>
<title>Your Health Now</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
urls.py:
from django.urls import path
from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView
from . import views
app_name = 'HealthHub'
urlpatterns = [
path('signup/', views.signup, name='signup'),
path('favicon.ico', RedirectView.as_view(url=staticfiles_storage.url("favicon.ico")))
]
views.py:
from django.shortcuts import render
def signup(request):
return render(request, 'HealthHub/signup.html')
You should also define content block in base.html, so:
base.html:
...
<body>
{% block content %}
<h1> Hello World</h1>
{% endblock content %}
</body>
...
Then try it in signup.html, it will change content block to SignUp in h1 tag.
In base.html you should add an empty block where your other pages' HTML code will appear, it should be like this if you want the content ("Signup" h1) to appear under "Hello, world!":
base.html:
<body>
<h1>Hello, world!</h1>
{% block content %}
{% endblock content %}
</body>
I am currently learning django and I tried to apply bootstrap css for my little project but it keeps throwing this following error and doesn't apply.
Refused to apply style from 'https://stackpath.bootstrapcdn.com/%20%20%20%20bootstrap/4.4.1/css/bootstrap.min.css' because its MIME type ('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This is my code.
<!Doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/
bootstrap/4.4.1/css/bootstrap.min.css" integrity="
sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<title>crm1</title>
</head>
<body>
{% include 'accounts/navbar.html'%}
{% block content %}
{% endblock %}
<hr>
<h5>Our footer</h5>
</body>
</html>
Your template doesn't seem to have {% load static %} at the top. Read docs here
I think you need to create a new directory (with a static name) in your Django project. And re-create a new directory (named css).
Directory tree :
Your Project -> new directory -> static -> new directory -> css
And download bootstrap.min.css file and copy/paste into css file.
project
|_static
|_css
|_bootstrap.min.css
You can change your code as follows:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
i have connected django to vue using webpack loader
before running the command npm build everythig was fine by running both terminals everything's working fine but just after running that command and connecting the static file and when i tried to check localhost:8000(defaul django server) i dont see anything not even in console no error and there is nothing
here is my
base.html file
<
!DOCTYPE html>
<html lang="en">
<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>Question Time</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
{% block style %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
{% block js %}
{% endblock %}
</html>
and here is my index.html
{% extends "base.html" %}
{% load static %}
{% block style %}
<link rel="stylesheet" href="{% static 'bundle.css' %}">
{% endblock %}
{% block content %}
<noscript>
<strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
{% endblock %}
{% block js %}
<link rel="stylesheet" href="{% static 'bundle.js' %}">
{% endblock %}
i have tried removing dist folder from vue
i have tried removing all the static links which casused this issue but its of no use
https://stackoverflow.com/questions/47034452/how-to-run-production-site-after-build-vue-cli tried this solution as well
but still its of no use
You need to add {% load render_bundle from webpack_loader %}
!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
...
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'm trying to run Django on my Windows 10, I'm sort of newbie on Django, I'm using Compressor Toolkit, my problem is, I can run the manage.py but the localhost says
base.html, error at line 9 The process cannot access the file because
it is being used by another process.
<!DOCTYPE html>
{% load compress %}
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1"/>
<title>{% block head_title %} Hydroqua Indonesia {% endblock head_title %}</title>
{% compress css %}
<link rel="stylesheet" type="text/x-scss" href="{% static '/css/global.scss' %}">
<link rel="stylesheet" type="text/x-scss" href="{% static '/css/style.scss' %}">
<link rel="stylesheet" href="{% static '/node_modules/bootstrap/dist/css/bootstrap.min.css' %}">
{% endcompress %}
</head>
<body>
{% include 'navbar.html' %}
{% block content %}{% endblock content %}
{% compress js %}
My friend could run the compressor smoothly from his Linux, I've installed every component needed but I dont know if I missed some.