如何在 Django 中组织 HTML 和 CSS 块内容

Question

我想问一下为网站创建 Django 块内容的好方法是什么。

主要想法是，它将成为一个简单的网站，主要侧重于显示图像。

我想知道使用 Bootstrap4 库创建网站的 FrontEnd 部分是否是个好主意，其中主要后端部分是在 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文件

{% 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 是否是一个好的解决方案。

希望问题详细一点！

Answer 1

在我看来，模块化模板是个好主意。例如，如果您知道组件对不同的 javascript 库有非常具体的需求，则可以创建一个块并覆盖父级。您可以将主索引文件组织为模块化组件的 "driver and include engine"（索引文件中包含的其他模板文件）。这是我过去采用的方法之一。

您将扩展主 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)

如何在 Django 中组织 HTML 和 CSS 块内容

How to organize HTML with CSS block content in Django

html

css

django

structure