mdbootstrap 5 未在 Django 2.1.15 中显示

Posted 2023-02-24

技术标签:

【中文标题】mdbootstrap 5 未在 Django 2.1.15 中显示【英文标题】：mdbootstrap 5 not showing in Django 2.1.15 【发布时间】：2020-12-31 08:05:48 【问题描述】：

我有一个简单的 django 项目。我想在其中添加材料设计引导程序。

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>

系统规格： Ubuntu 18.04 蟒蛇 3.7 django 2.1.15 标头 - Bootstrap 5 & Material Design 2.0 navigation

我通过 docker-compose 在本地运行项目：

sudo docker-compose up

当我尝试打开这个网址时：

http://127.0.0.1:8000/core/

我收到此错误：

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' %" >

追溯：

环境：

请求方法：GET 请求地址：http://127.0.0.1:8000/core/

Django 版本：2.1.15 Python 版本：3.7.9 已安装的应用程序： ['django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', '核心'] 已安装的中间件： ['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']

模板错误：在模板 /nowruzWebsite/core/templates/index.html 中，第 10 行错误第 10 行的块标记无效：“静态”。你是否忘记注册或加载此标签？ 1：2：
3 : 4 : 5 : 6 : 7 : Bootstrap 的材料设计 8 : 9 : 10 : 11 : 12 : 13 : 14 : 15 : 19 : 20 :
追溯：

文件“/usr/local/lib/python3.7/site-packages/django/template/base.py” 解析中 470. compile_func = self.tags[命令]

在处理上述异常（'static'）期间，另一个异常发生：

文件 “/usr/local/lib/python3.7/site-packages/django/core/handlers/exception.py” 在内部 34. response = get_response(request)

文件 “/usr/local/lib/python3.7/site-packages/django/core/handlers/base.py” 在 _get_response 126. response = self.process_exception_by_middleware(e, request)

文件 “/usr/local/lib/python3.7/site-packages/django/core/handlers/base.py” 在 _get_response 124. response = Wrapped_callback(request, *callback_args, **callback_kwargs)

索引中的文件“/nowruzWebsite/core/views.py” 5. 返回渲染(request, 'index.html')

文件“/usr/local/lib/python3.7/site-packages/django/shortcuts.py”在使成为 36. content = loader.render_to_string(template_name, context, request, using=using)

文件 “/usr/local/lib/python3.7/site-packages/django/template/loader.py”在渲染到字符串 61. template = get_template(template_name, using=using)

文件 “/usr/local/lib/python3.7/site-packages/django/template/loader.py”在获取模板 15. return engine.get_template(template_name)

文件 “/usr/local/lib/python3.7/site-packages/django/template/backends/django.py” 在 get_template 34. return Template(self.engine.get_template(template_name), self)

文件 “/usr/local/lib/python3.7/site-packages/django/template/engine.py”在获取模板 144. 模板，起源 = self.find_template(template_name)

文件 “/usr/local/lib/python3.7/site-packages/django/template/engine.py”在查找模板 126. 模板 = loader.get_template(name, skip=skip)

文件 “/usr/local/lib/python3.7/site-packages/django/template/loaders/base.py” 在 get_template 30. 内容，来源，origin.template_name，self.engine，

文件“/usr/local/lib/python3.7/site-packages/django/template/base.py” 在 初始化 156. self.nodelist = self.compile_nodelist()

文件“/usr/local/lib/python3.7/site-packages/django/template/base.py” 在 compile_nodelist 194.返回parser.parse()

文件“/usr/local/lib/python3.7/site-packages/django/template/base.py” 解析中 472. self.invalid_block_tag(token, command, parse_until)

文件“/usr/local/lib/python3.7/site-packages/django/template/base.py” 在 invalid_block_tag 534.“还是加载这个标签？” % (token.lineno, 命令)

异常类型：/core/ 处的 TemplateSyntaxError 异常值：无效第 10 行的块标记：“静态”。您是否忘记注册或加载这个标签？

【问题讨论】：

你没有在你的html中加载静态标签% load static % 放在哪里？ @Karthik 在 html 文件的顶部作为第一行 @Karthik 哇！谢谢。像魔术一样工作。我仍然有加载图像的问题。像<img src="% static 'assets/img/a.jpg' %"/> 或<img src="img/f.jpg"/> 一样加载它们不起作用。如何加载它们？请输入答案，以便我标记为答案。试试<img src="% static "a.jpg" %" />或者<img src="% static "img/a.jpg" %" /> 【参考方案1】：

请检查这个sn-p。这些设置对我有用，可以在 html 中显示图像。

文件夹结构

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 项目

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 应用程序

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>

【讨论】：

以上是关于mdbootstrap 5 未在 Django 2.1.15 中显示的主要内容，如果未能解决你的问题，请参考以下文章

媒体文件未在 DEBUG=False Django 2.2.6 中显示

设置所有等高的卡片 (mdbootstrap)

在 django_select2 中，field_id 参数未在 ajax url 中传递

Django celery 定期任务间隔更改未在数据库中更新

MDBootstrap 上的工具提示不会显示

MDBootstrap 树视图无法按预期工作