Как организовать HTML с блочным контентом CSS в Django - PullRequest
Новая
       4

Как организовать HTML с блочным контентом CSS в Django

0 голосов
/ 05 апреля 2019

Я хотел бы спросить, что является хорошим подходом к созданию блочного контента Django для веб-сайта.

Основная идея заключается в том, что это будет простой веб-сайт, в основном ориентированный наотображение изображения.

Я хочу знать, будет ли хорошей идеей создать FrontEnd часть веб-сайта с использованием библиотеки Bootstrap 4, в которой основная часть BackEnd создается в Djangoфреймворк ?

Я хотел бы упростить производственную часть, используя шаблонную форму для отображения другой части главной страницы, и я хочу спросить, является ли это хорошим решением?

Сначала я создал один HTML-файл, который долженвключить всю определенную часть веб-страницы (заголовок, часть содержимого, нижний колонтитул) 

{% load static %}
<!doctype html>
<html lang="en">
<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



</head>

<body>


</body>
</html>

Во-вторых, я создаю html-файл navbar 

{% block content %}
    <header id="main-navigation">
        <nav class="navigation">
            <ul class="main-navigation">
                <li class="home">
                    <a class="nav-link" href="{% url 'home_view' %}">Home</a>
                </li>
                <li class="contact">
                    <a class="nav-link" href="{% url 'contact_view' %}">Contact</a>
                </li>
                <li class="logo">
                    <a class="nav-link" href="{% url 'logo_view' %}">Logo</a>
                </li>
            </ul>
        </nav>
    </header>
{% endblock %}

В конце я хочу включить часть нижнего колонтитулавеб-сайт 

{% block content %}
    <div class="footer">
            <p>Footer part</p>
        </div>
{% endblock %}

Я также хочу знать, будет ли использование MODAL хорошим решением, если я хочу установить фиксированную панель навигации с нижним колонтитулом и прокручиваемый контент, например, для отображения изображений.

Я надеюсь, что я уточню еще вопрос!

1 Ответ

1 голос
/ 05 апреля 2019

На мой взгляд, это хорошая идея для модуляции ваших шаблонов.Например, если у вас есть компоненты, которые, как вы знаете, будут иметь особые потребности для разных библиотек JavaScript, вы можете создать блок и переопределить родительский элемент.Вы можете организовать свой основной индексный файл как «драйвер и модуль включения» для своих модульных компонентов (другие файлы шаблонов, которые вы включаете в индексный файл).Это один из подходов, которые я использовал в прошлом.

Вы бы расширили основной html-файл, а затем переопределили блок контента тем, что собираетесь добавить в него.Каждый раздел вашего сайта (предположительно) будет иметь шаблон верхнего уровня.Например: у вас есть основной html-файл, который действует как драйвер, который включает в себя все, что будет совместно использоваться всеми шаблонами, которые будут расширять его и переопределять блок контента.

Пример базового файла: 

{% load staticfiles %}
<html lang="en">
<head>
    {% block meta %}
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
    {% endblock %}

    <title>{% block title %}your title override{% endblock title %}</title>

    <!-- Favicon -->
    <link rel="icon" href="{% static "favicon.ico" %}"/>
    <!-- LOAD CSS FILES -->
    {% block stylesheets %}
        {% include 'path/to/your/stylesheets.html' %}
    {% endblock stylesheets %}
</head>

<body>
{% block header %}
    {% include 'path/to/your/header.html' %}
{% endblock header %}

{% block content %}{% endblock content %}
<br>
<br>

{% block footer %}
    {% include 'path/to/your/footer.html' %}
{% endblock footer %}

<!-- Load JS last for load times -->
{% block javascripts %}
    {% include 'path/to/your/javascripts.html' %}
{% endblock javascripts %}
</body>
</html>

Тогда вы можете просто иметь это на ваш взгляд: 

from django.template.response import TemplateResponse


def index(request):
    context = {}
    return TemplateResponse(request, 'path/to/your/template.html', context)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...