Django включает шаблон вместе с его CSS - PullRequest
Новая
       12

Django включает шаблон вместе с его CSS

0 голосов
/ 19 ноября 2018

Я пытаюсь включить шаблон - header.html в файл main.html.В header.html есть собственный файл CSS.У меня есть один выбор - связать CSS с заголовком header.html, а затем включить его.Но это делает код более запутанным со многими HTML-тегами в одном документе.Например, если мне нужно включить другой файл footer.html, опять будут добавлены дополнительные html-теги в main.html.

Другой вариант - просто поместить все стили в один файл main.css и включить его вbase.html.Но опять же, это усложняет редактирование main.css.

Есть ли лучшие решения?

Спасибо

1 Ответ

0 голосов
/ 19 ноября 2018

Создайте папку как шаблоны в корневой директории вашего проекта и добавьте нижнюю строку в файле 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>
...