如何使用适当的样式连接 Django 应用程序和 HTML 模板？答案

【问题标题】：How to connect Django app and HTML template with proper styling?如何使用适当的样式连接 Django 应用程序和 HTML 模板？
【发布时间】：2020-05-17 18:16:23
【问题描述】：

每当我运行与模板连接的 django 文件时，它都不会显示任何样式，但每当我运行 html 文件时，它都会向我显示具有正确样式的页面。如何解决这个问题呢？尽管 html 文件中的链接以及每当我将其与 django 连接时的链接都是相同的。你可以看到它。

应用网址

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index')
]

项目网址

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

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)


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

views.py

from django.shortcuts import render
from django.http import HttpResponse

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

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/icomoon.css">
</head>
<body>
    <header role="banner" id="fh5co-header">
    <div class="fluid-container">
        <nav class="navbar navbar-default navbar-fixed-top js-fullheight">
            <div id="navbar" class="navbar-collapse js-fullheight">
                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="#" data-nav-section="home"><span>Home</span></a></li>
                    <li><a href="#" data-nav-section="services"><span>Services</span></a></li>
                    <li><a href="#" data-nav-section="explore"><span>Project</span></a></li>
                    <li><a href="#" data-nav-section="pricing"><span>Pricing</span></a></li>
                    <li><a href="#" data-nav-section="team"><span>Team</span></a></li>
                </ul>
            </div>
        </nav>
  </div>
</header>
</body>
</html>

【问题讨论】：

标签： html django python-3.x

【解决方案1】：

为了在 django 模板中获取 css 文件和静态文件，你必须修改你的模板。

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link href="{% static 'css/animate.css' %}" rel="stylesheet">
    <link href="{% static 'css/icomoon.css' %}" rel="stylesheet">
</head>

并将您的 css 文件和其他静态文件放在静态文件夹中，确保您的主 url 文件中也有这些代码行

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

如果您有更多的 html 页面，请先创建一个 base.html 文件，然后使用 {% block content %} 和 {% endblock %} 从中继承其他 html 文件。请参阅文档https://tutorial.djangogirls.org/en/template_extending/

【讨论】：

我将所有的 html css 文件按名称模板放在单独的文件夹中，但它没有给我样式，我也将 static 放在链接中。
它的css文件应该在static文件夹中，html文件应该在templates文件夹中，两个文件夹在同一级别
说 NameError: name 'urlpatterns' is not defined
请发布您的项目网址
将静态 url 部分保留在主 url 模式下方