I am trying to include a template - header.html into the main.html file. The header.html has its own css file. I have one choice- to link the css into the head of header.html and then include it. But it makes the code looks messier with many html tags in the same document. For instance, if I need to include another footer.html, again additional html tags will come to the main.html.
Another option is to simply put all the styles into one main.css file and include that in the base.html. But again it makes main.css harder to edit.
Is there any better solutions?
Thanks
Make a folder as templates under root directory of your project and add below line in settings.py file to define the template path.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], #mainly this line
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
and
STATIC_URL = '/static/'
STATIC = os.path.join(BASE_DIR, 'static')
After it make base.html file and enter all the js and css file over here. That will reflect to all the project.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<title>Test </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Test">
<link rel="shortcut icon" type="image/png" href="{% static 'images/small.png' %}"/>
<link rel="stylesheet" href="{% static 'css/lightbox.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" type="text/css" />
<!-- more css files -->
</head>
<body>
{% block pagecontent %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'js/asset/jquery-2.1.3.min.js' %}"></script>
<script src="static 'custom.js' %}"></script>
<!-- more js files -->
</html>
Related
I work on a project of Django with bootstrap 5 sass
when I run my project, CSS effects do not apply.
then I tried to (npm run scss) to discover the problem
i got this error message:
Rendering Complete, saving .css file...
Error: EEXIST: file already exists, mkdir 'C:\Users\10\Desktop\Projects\Markvira\static\css\base.css'
This is My project Files:
base.html
{% load static %}
<!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">
<title>Markvira</title>
<link rel="shortcut icon" type="image/jpg" href="{% static 'images/base/favicon.ico' %}"/>
<link rel="stylesheet" type="text/css" href="{% static './css/base.css' %}">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!------>
<!--Navbar-->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
</nav>
</header>
<!--Navbar-->
<!----->
<main>
{% block content %}
{% endblock %}
</main>
<footer>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch ./static/scss/base.scss -o ./static/css"
},
"dependencies": {
"bootstrap": "^5.0.0-beta3",
"node-sass": "^6.0.0"
}
}
base.scss
#import "custom_bootstrap";
#import "navbar";
html, body {
margin: 0;
height: 100%;
background-color: black;
}
project tree
can you help in the following:
why base.css file does not show effects in my website?
should i after installing (npm i bootstrap#next) to include links by jsDelivr, because i noticed some effects did not show till i include jsDelivr bootstrap links?
Thank you
I made a fav icon and ran it through a website to give me the different sizes and icons for different platforms.
In my base.html file I have:
<link rel="apple-touch-icon" sizes="180x180" href="{% static "apple-touch-icon.png" %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static "favicon-32x32.png" %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static "favicon-16x16.png" %}">
<link rel="manifest" href="{% static "site.webmanifest" %}">
<link rel="mask-icon" href="{% static "safari-pinned-tab.svg" %}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
And at the top of the base.html page I have {% load static %}
Rendering the page and pressing "view source" shows the links are good:
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
All the icons are in myapp/myapp/static/myapp but it's giving me 404 errors. The static files in all my other apps work, but this being the coreapp did not previously have a /static/myapp directory.
My settings.py file located in myapp/myapp/ has this in:
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
I've obviously missed something in setting up the coreapp static files, or I'm placing them in the wrong directory, I dunno. Any ideas?
I think you have not include the sub-directory where you placed all your favicons. In case of my project I made 'icons' folder inside 'static' folder and I accessed them as:
<link rel="apple-touch-icon" sizes="57x57" href="{% static 'icons/apple-icon-57x57.png' %}">
<link rel="apple-touch-icon" sizes="60x60" href="{% static 'icons/apple-icon-60x60.png' %}">
........
So since you have placed your favicons inside 'myapp' folder of 'static' parent directory. Update above code as:
<link rel="apple-touch-icon" sizes="180x180" href="{% static "myapp/apple-touch-icon.png" %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static "myapp/favicon-32x32.png" %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static "myapp/favicon-16x16.png" %}">
<link rel="manifest" href="{% static "myapp/site.webmanifest" %}">
<link rel="mask-icon" href="{% static "myapp/safari-pinned-tab.svg" %}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
I had to add:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
To my settings.py file. It wouldn't let me do this at first because I had the STATIC_ROOT set to the same value (ie. os.path.join(BASE_DIR, "static"), where django collects the static files) so I guess I just have to choose a new static root.
I use Django ,everythings works perfectly fine but i cannot load images.
My settings.py file
STATIC_URL = '/static/'
STATICFILES_DIR=[
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT=os.path.join(BASE_DIR,'assets')
My html file
<!DOCTYPE html>
{% load static %}[enter image description here][1]
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>First App</title>
</head>
<body>
<h1>Yeah..! this is index.html file</h1>
<img src="{% static "images/pic1.jpg" %}" alt="Nothing to show">
</body>
</html>
Tree directory
Typo in settings.py, it's supposed to be
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
Okay, so I tried having a folder with static template elements accessible by all apps with two css files and one html file.
In settings.py I went to TEMPLATES and added: 'DIRS': os.path.join(BASE_DIR, 'static_files'),, as seen here (I edited out confidential info therefrom).
My template fragment topnav.html looks like this:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="w3.css">
<title>EvoLang</title>
</head>
<!-- Content will go here -->
<body>
<script src="myScript.js"></script>
<!-- Navigation -->
<nav class="topnav">
<ul class="topnav">
<li><a href="#">Entrywords
<li><a href="#">Sentences
</ul>
</nav>
<!-- / Navigation -->
</body>
Then, in previously working index.html in my app biblio looks like this:
{% extends "topnav.html" %} {# this enables using the top navigation bar #}
<p>Lorem ipsum</p>
What I get while accessing that page is the following error: [Errno 22] Invalid argument: 'E:\\MyProject\\myproject\\:\\biblio\\index.html'
I don't really get what is this \\:\\ part here.
I am using Django 1.11.2 with Python 3.6.
The DIRS setting should be a list. You are missing the square brackets and the trailing comma. Try:
'DIRS': [os.path.join(BASE_DIR, 'static_files')],
What will be the best stage in Django to append file timestamp to all urls which start with /static/?
Example URLs:
http://mydomain.com/static/css/...
http://mydomain.com/static/img/...
http://mydomain.com/static/js/...
Is there an app which does that and that will work with Mercurial VCS?
You can try django-compressor
This app combines several CSS/JS files to the one file. And generates unique name for that file. For example:
{% load compress %}
{% compress css %}
<link rel="stylesheet" href="/static/css/one.css" type="text/css" charset="utf-8">
<style type="text/css">p { border:5px solid green;}</style>
<link rel="stylesheet" href="/static/css/two.css" type="text/css" charset="utf-8">
{% endcompress %}
Result will be something like:
<link rel="stylesheet" href="/static/CACHE/css/f7c661b7a124.css" type="text/css" charset="utf-8">