Question

我正在尝试将模板-header.html包含在main.html文件中。 header.html有其自己的css文件。我有一个选择-将CSS链接到header.html的头部，然后将其包括在内。但这会使代码在同一文档中带有许多html标记时看起来更混乱。例如，如果我需要添加另一个footer.html，则另外的html标签也会出现在main.html中。

另一种选择是将所有样式简单地放入一个main.css文件中，并将其包括在base.html中。但这又使main.css难以编辑。

有没有更好的解决方案？

谢谢

Answer 1

在项目的根目录下将一个文件夹作为模板，并在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>

Django include模板及其CSS

1 个答案: