DEVHIDE
Login Or Sign up

mdbootstrap 5 not showing in Django 2.1.15

599 Views Asked by At

I have a simple django project. I want to add material design bootstrap in it.

settings.py:

STATIC_URL = '/static/'
# _______________________________________________________________________ 
STATIC_ROOT = os.path.join(BASE_DIR, '/assets')
# _______________________________________________________________________ 
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '/static') 
]

urls.py:

from .views import index, core, other

urlpatterns = [
    path('', index, name='startpage'),
    path('core/', core, name = 'homepage'),
]

views.py:

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

def core(request):
    return render(request, 'base.html')

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Material Design for Bootstrap</title>

    <!-- MDB icon -->
    <link rel="icon" href="{% static 'assets/img/mdb-favicon.ico' %}" type="image/x-icon" />

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    <!-- Google Fonts Roboto -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="{% static 'assets/css/mdb.min.css' %}" >
    <!-- Custom styles -->
    <style></style>
  </head>
  <body>
    <!-- Start your project here-->
    <header>
      <!-- Navbar -->
      <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container-fluid">
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarExample01"
            aria-controls="navbarExample01"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <i class="fas fa-bars"></i>
          </button>
          <div class="collapse navbar-collapse" id="navbarExample01">
            <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
              <li class="nav-item active">
                <a class="nav-link" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- Navbar -->
      <!-- Jumbotron -->
      <div class="p-5 text-center bg-light">
        <h1 class="mb-3">Heading</h1>
        <h4 class="mb-3">Subheading</h4>
        <a class="btn btn-primary" href="" role="button">Call to action</a>
      </div>
      <!-- Jumbotron -->
    </header>
    <!-- End your project here-->
  </body>

  <!-- MDB -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Custom scripts -->
  <script type="text/javascript"></script>
</html>

base.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My MDB Django Project</title>
  {% load static %}
  <!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<link href="{% static 'assets/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="{% static 'assets/css/mdb.min.css' %}" rel="stylesheet">
</head>
<body>
  <div style="height: 100vh">
    <div class="flex-center flex-column">
      <h1 class="animated fadeIn mb-4">MDBootstrap loves Django <i class="fa fa-heart red-text"></i></h1>
    </div>
   </div>

  <!-- jQuery -->
<script src="{% static 'assets/js/jquery-3.3.1.min.js' %}"></script>

<!-- Popper.js -->
<script src="{% static 'assets/js/popper.min.js' %}"></script>

<!-- Bootstrap -->
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>

<!-- Material Design for Bootstrap -->
<script src="{% static 'assets/js/mdb.min.js' %}"></script>

  <script>
    new WOW().init();
  </script>
</body>
</html>

system spec:
ubuntu 18.04
python 3.7
django 2.1.15
Headers - Bootstrap 5 & Material Design 2.0 navigation

I run the project locally via docker-compose:

sudo docker-compose up

When I try opening this url:

http://127.0.0.1:8000/core/

I get this error:

Error during template rendering In template /nowruzWebsite/core/templates/index.html, error at line 10

Invalid block tag on line 10: 'static'. Did you forget to register or load this tag? 
1   <!DOCTYPE html> 
2   <html lang="en"> 
3     <head> 
4       <meta charset="UTF-8" /> 
5       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 
6     <meta http-equiv="x-ua-compatible" content="ie=edge" /> 
7       <title>Material Design for Bootstrap</title> 
8    
9       <!-- MDB icon
--> 
10      <link rel="icon" href="{% static 'assets/img/mdb-favicon.ico' %}" type="image/x-icon" /> 
11   
12      <!-- Font Awesome --> 
13      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" /> 
14   <!-- Google Fonts Roboto --> 
15      <link 
16        rel="stylesheet" 
17        href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" 
18      /> 
19      <!-- MDB --> 
20      <link rel="stylesheet" href="{% static 'assets/css/mdb.min.css' %}" >

Traceback:

Environment:

Request Method: GET Request URL: http://127.0.0.1:8000/core/

Django Version: 2.1.15 Python Version: 3.7.9 Installed Applications: ['django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'core'] Installed Middleware: ['django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware']

Template error: In template /nowruzWebsite/core/templates/index.html, error at line 10 Invalid block tag on line 10: 'static'. Did you forget to register or load this tag? 1 : 2 :

3 : 4 : 5 : 6 : 7 : Material Design for Bootstrap 8 : 9 : 10 : 11 : 12 : 13 : 14 : 15 : 19 : 20 :

Traceback:

File "/usr/local/lib/python3.7/site-packages/django/template/base.py" in parse 470. compile_func = self.tags[command]

During handling of the above exception ('static'), another exception occurred:

File "/usr/local/lib/python3.7/site-packages/django/core/handlers/exception.py" in inner 34. response = get_response(request)

File "/usr/local/lib/python3.7/site-packages/django/core/handlers/base.py" in _get_response 126. response = self.process_exception_by_middleware(e, request)

File "/usr/local/lib/python3.7/site-packages/django/core/handlers/base.py" in _get_response 124. response = wrapped_callback(request, *callback_args, **callback_kwargs)

File "/nowruzWebsite/core/views.py" in index 5. return render(request, 'index.html')

File "/usr/local/lib/python3.7/site-packages/django/shortcuts.py" in render 36. content = loader.render_to_string(template_name, context, request, using=using)

File "/usr/local/lib/python3.7/site-packages/django/template/loader.py" in render_to_string 61. template = get_template(template_name, using=using)

File "/usr/local/lib/python3.7/site-packages/django/template/loader.py" in get_template 15. return engine.get_template(template_name)

File "/usr/local/lib/python3.7/site-packages/django/template/backends/django.py" in get_template 34. return Template(self.engine.get_template(template_name), self)

File "/usr/local/lib/python3.7/site-packages/django/template/engine.py" in get_template 144. template, origin = self.find_template(template_name)

File "/usr/local/lib/python3.7/site-packages/django/template/engine.py" in find_template 126. template = loader.get_template(name, skip=skip)

File "/usr/local/lib/python3.7/site-packages/django/template/loaders/base.py" in get_template 30. contents, origin, origin.template_name, self.engine,

File "/usr/local/lib/python3.7/site-packages/django/template/base.py" in init 156. self.nodelist = self.compile_nodelist()

File "/usr/local/lib/python3.7/site-packages/django/template/base.py" in compile_nodelist 194. return parser.parse()

File "/usr/local/lib/python3.7/site-packages/django/template/base.py" in parse 472. self.invalid_block_tag(token, command, parse_until)

File "/usr/local/lib/python3.7/site-packages/django/template/base.py" in invalid_block_tag 534. "or load this tag?" % (token.lineno, command)

Exception Type: TemplateSyntaxError at /core/ Exception Value: Invalid block tag on line 10: 'static'. Did you forget to register or load this tag?

python django bootstrap-4 material-design bootstrap-material-design
Original Q&A
1

There are 1 best solutions below

0
Karthik On BEST ANSWER

Please check this snippet. These settings work for me to show an image in html.

Folder Structure

Structure

Settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        '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',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

urls.py project

from django.contrib import admin
from django.urls import path,include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('igapp.urls')),
]

urls.py app

from django.urls import path
from . import views
urlpatterns = [
    path('', views.home, name="home"),
]

views.py

from django.shortcuts import render
def home(request):
    return render(request,"index.html")

index.html

{%load static%}
<html>
    <head><title>Sample</title></head>
    <body>
        <h3>Hello World</h3>
        <img src="{% static 'images/shop.png' %}" />
    </body>
</html>

Related Questions in PYTHON

Related Questions in DJANGO

Related Questions in BOOTSTRAP-4

Related Questions in MATERIAL-DESIGN

Related Questions in BOOTSTRAP-MATERIAL-DESIGN

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.