时间戳

首页 > 解决方案 > Django 包含模板及其 css

django - Django 包含模板及其 css

问题描述

我正在尝试将模板 - header.html 包含到 main.html 文件中。header.html 有自己的 css 文件。我有一个选择 - 将 css 链接到 header.html 的头部，然后包含它。但它使代码看起来更混乱，在同一个文档中有许多 html 标记。例如，如果我需要包含另一个 footer.html，那么 main.html 中会再次出现额外的 html 标签。

另一种选择是将所有样式简单地放在一个 main.css 文件中，并将其包含在 base.html 中。但它再次使 main.css 更难编辑。

有没有更好的解决方案？

谢谢

标签： djangoinheritancedjango-templatesinclude

解决方案

在项目的根目录下创建一个文件夹作为模板，并在 settings.py 文件中添加以下行以定义模板路径。

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',
            ],
        },
    },
]

和

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

在它制作base.html文件并在此处输入所有js和css文件之后。这将反映到所有项目中。

{% 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>

推荐阅读