so I tried loading Bootstrap to Django. But since I wanted to customize the styling with scss, instead of putting the CDN url in header, I replaced it with a separate css file which has all of the Bootstrap stylings. Here's the code.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/main.css">
<title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
I have the correct /style/main.css file, I've checked it by ctrl+clicking it. As mentioned, the file has ALL of the Bootstrap stylings.
#charset "UTF-8";
/*!
* Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
### AND SO ON ###
However my Django page wouldn't reflect it. When I hit refresh I don't see any styling.
But when I restore the CDN url, Bootstrap is normally applied. I have no idea what the problem is. I would very much appreciate your help. :)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load static %}
<link rel="stylesheet" href="{% static 'style/main.css' %}">
<title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
settings.py
add this in your settings.py
STATIC_URL = '/static/'
if your static folder follow this path Projectname/static or if you have static folder in your app too Projectname/appname/static then you can append it in list like 2nd one
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'),os.path.join(BASE_DIR, 'app_name/static'),]
To load static files in Django
Usually we keep our static files (a.js, b.css, c.png) in a folder named static.
Suppose you have the main.css file in static/css/main.css
Then change your code as
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Check out How to serve static files django
Related
i want to show up my Flash Messages in my template. It works, but i cant tell the template where to show or how to show it. It appears all the time in the same place and the same style.
This is my view:
def exportBefunde(request):
(...)
messages.info(request, "Befund exportiert")
return redirect("reporting")
This is my main.html template
{% 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">
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optionales Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{% static 'index.css' %}">
<title>Message Problem - it drives me crazy</title>
</head>
<body>
{% include 'navbar.html' %}
{% block content %}
<!-- Content from other templates -->
{% endblock content %}
{% if messages %}
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
{% endif %}
</body>
</html>
I want to show my template underneath my content. But i appears above it. Even if i remove this peace of code:
{% if messages %}
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
{% endif %}
the message shows up above the code. The styling is always the same. Django ignores my Code in my template. Do anyone has a solution for this issue?
I've done pretty much everything in my knowledge to solve this, but I guess I've gone wrong somewhere as I'm still a beginner, so I'd like someone to kindly help me out with this and also I've added the error message at the bottom, including the code
error
TemplateSyntaxError at /
Invalid block tag on line 9: 'static'. Did you forget to register or load this tag?
Request Method: GET
Request URL: http://127.0.0.1:8000/
Django Version: 3.1.6
Exception Type: TemplateSyntaxError
Exception Value:
Invalid block tag on line 9: 'static'. Did you forget to register or load this tag?
Exception Location: C:\Users\Admin\AppData\Local\Programs\Python\Python39\lib\site-packages\django\template\base.py, line 531, in invalid_block_tag
Python Executable: C:\Users\Admin\AppData\Local\Programs\Python\Python39\python.exe
Python Version: 3.9.1
Python Path:
['C:\\Users\\Admin\\Desktop\\Django\\ecommerce',
'C:\\Users\\Admin\\AppData\\Local\\Programs\\Python\\Python39\\python39.zip',
'C:\\Users\\Admin\\AppData\\Local\\Programs\\Python\\Python39\\DLLs',
'C:\\Users\\Admin\\AppData\\Local\\Programs\\Python\\Python39\\lib',
'C:\\Users\\Admin\\AppData\\Local\\Programs\\Python\\Python39',
'C:\\Users\\Admin\\AppData\\Local\\Programs\\Python\\Python39\\lib\\site-packages']
Server time: Fri, 09 Apr 2021 00:16:08 +0000
setting
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
css/main.css
body {
background-color: blue;
}
store/main.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">
<title>Ecommerce</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css">
</head>
<body>
<h1>Navbar</h1>
<hr>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
store
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<h3>Store</h3>
{% endblock content %}
store/urls.py -- This is the app
from django.urls import path
from . import views
urlpatterns = [
path('',views.store,name="store"),
path('cart/',views.cart,name="cart"),
path('checkout/',views.checkout,name="checkout"),
]
ecom/urls.py
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('store.urls')),
]
You forgot to add static template tag {% load static %}
in main.html
In your templates, use the static template tag to build the URL for
the given relative path using the configured STATICFILES_STORAGE.
<!DOCTYPE html>
{% load static %}
<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>Ecommerce</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css">
</head>
<body>
<h1>Navbar</h1>
<hr>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
https://docs.djangoproject.com/en/3.1/howto/static-files/
i came across this error while separating the contents of the index.html file into base.html and head.html . i tried removing the head tags from this file and putting it in head.html but it didn't work. The contents of base.html:
<!DOCTYPE html>
<html >
<head>
#error in this line
{% include 'head.html' %}
</head>
<body>
{% include 'navbar.html' %}
{% block content %}
{% endblock content %}
{% include 'footer.html' %}
{% include 'scripts.html' %}
</body>
</html>`
the contents of head.html are:
{% extends 'base.html' %}
<title>Readit - 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">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/style.css">`
You're including head.html in base.html, but head.html extends base.html.
Remove the following line from head.html:
{% extends 'base.html' %}
I am getting an error message while adding a template to base.html with include tag. All other templates are rendered properly with no issues but this got issues while I try to add it. The error is:
RuntimeError at /
maximum recursion depth exceeded in __instancecheck__
Request Method: GET
Request URL: http://127.0.0.1:8000/
Django Version: 1.8.5
Exception Type: RuntimeError
Exception Value:
maximum recursion depth exceeded in __instancecheck__
Exception Location: C:\Python27\lib\site-packages\django\template\base.py in __init__, line 743
Python Executable: C:\Python27\python.exe
Python Version: 2.7.11
Python Path:
['C:\\Users\\TOSHIBA\\market\\market',
'C:\\WINDOWS\\SYSTEM32\\python27.zip',
'C:\\Python27\\DLLs',
'C:\\Python27\\lib',
'C:\\Python27\\lib\\plat-win',
'C:\\Python27\\lib\\lib-tk',
'C:\\Python27',
'C:\\Python27\\lib\\site-packages',
'c:\\python27\\lib\\site-packages']
My template I am trying to add includes:
{% extends 'base.html' %}
{% block content %}
<!-- recommend slider -->
<section class="recommend container">
<div class="recommend-product-slider small-pr-slider wow bounceInUp">
<div class="slider-items-products">
<fieldset class="box-title">
<legend>Recommended </legend>
</fieldset>
<div id="recommend-slider" class="product-flexslider hidden-buttons">
<div class="slider-items slider-width-col3">
{% include 'products/product.html' with object_list=products col_class_set="col-sm-2" %}
</div>
</div>
</div>
</div>
</section>
<!-- End Recommend slider -->
{% endblock content %}
My base.html code is as follows:
{% load static %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Dressika Theme">
<meta name="author" content="Harira Ijaz">
<title>Dressika Online Shopping Store</title>
<!-- Favicons Icon -->
<link rel="icon" href="{% static 'images/favicon.png' %}" type="image/x-icon" />
<link rel="shortcut icon" href="{% static 'images/favicon.png' %}" type="image/x-icon" />
<!-- Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS Style -->
<link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/revslider.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/owl.theme.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/font-awesome.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/product-detail.css' %}" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,700,800,400,600' rel='stylesheet' type='text/css'>
</head>
<body class="cms-index-index">
<div class="page">
{% include 'header.html' %}
{% include 'navbar.html' %}
</div>
<!-- header service -->
<!-- end header service -->
{% include 'slider.html' %}
{% include 'offerbanner.html' %}
{% include 'container.html' %}
{% include 'featured.html' %}
{% include 'trending.html' %}
{% include 'middleslider.html' %}
{% include 'recommend.html' %}
{% include 'latestblog.html' %}
{% include 'footer.html' %}
</div>
{% include 'java.html' %}
</body>
</html>
Your template extends from base.html which then needs to include the template, which then needs to extend from base.html which then needs to include the template, which then needs to extend from base.html then needs to include the template, which then needs to extend from base.html...
Remove {% extends 'base.html' %} from the template you're trying to include as well as any reference to blocks.
I try to setup Google Analytics with django-analytical for my django project, following this guide: http://pythonhosted.org/django-analytical/services/google_analytics.html#google-analytics-configuration.
In this guide you can find the following statement :
"Next you need to add the Google Analytics template tag to your templates. This step is only needed if you are not using the generic analytical.* tags. If you are, skip to Configuration."
So my question is: Where to put this generic analytical.* tag? Is it somewhere in my settings.py file?
Thanks.
If you are planning to use Google Analytics as your service, you can simply add the following to your templates/base.html:
{% load google_analytics %}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>My Website: {{ title }}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
{% block css %}
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap-tokenfield.css">
<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/main.css">
{% endblock css %}
<!-- fix so that IE 9 and less will properly recognize html5 elements -->
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
{% google_analytics %}
</head>
See the documentation at: https://pythonhosted.org/django-analytical/services/google_analytics.html
I believe that the generic analytical.* tags that they refer to at the link that you posted have to do with using the following below. If I'm incorrect, others please chime in and provide the correct response. HTH.
{% load analytical %}
<!DOCTYPE ... >
<html>
<head>
{% analytical_head_top %}
…
{% analytical_head_bottom %}
</head>
<body>
{% analytical_body_top %}
…
{% analytical_body_bottom %}
</body>
</html>