时间戳

首页 > 解决方案 > 如何在 Django 中使用 CSS 块内容组织 HTML

html - 如何在 Django 中使用 CSS 块内容组织 HTML

问题描述

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

主要想法是它将是一个简单的网站，主要专注于显示图像。

我想知道使用 Bootstrap 4 库创建网站的前端部分是否是个好主意，其中主要后端部分是在 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 是否是一个很好的解决方案。

我希望我能详细说明这个问题！

标签： htmlcssdjangostructure

解决方案

在我看来，模块化模板是个好主意。例如，如果您知道组件对不同的 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)

推荐阅读