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

标签 html css django structure

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

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

我想知道使用 Bootstrap 4 库创建网站的 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 %}

最后我想包含网站的页 footer 分

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

我也想知道如果我想放置带页脚的固定导航栏和可滚动内容(例如用于显示图像),使用 MODAL 是否是一个好的解决方案。

我希望我能详细说明问题!

最佳答案

在我看来,模块化您的模板是个好主意。例如,如果您知道组件对不同的 javascript 库有非常特殊的需求,您可以创建一个 block 并覆盖父组件。您可以将主索引文件组织为模块化组件的“驱动程序和包含引擎”(您包含在索引文件中的其他模板文件)。这是我过去采用的方法之一。

您将扩展主 html 文件,然后用您要放入其中的任何内容覆盖内容 block 。您网站的每个部分(大概)都会有一个顶级模板。例如:您的主 html 文件充当驱动程序,其中包含将在所有模板之间共享的所有内容,这些模板将扩展它并覆盖内容 block 。

示例基础文件:

{% 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>

然后你就可以在你的 View 中看到这个:

from django.template.response import TemplateResponse


def index(request):
    context = {}
    return TemplateResponse(request, 'path/to/your/template.html', context)

关于html - 如何在 Django 中使用 CSS block 内容组织 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55534382/

相关文章:

javascript - 上传文件大小限制为 32kB,我收到错误 "CGI.pm: Server closed socket during multipart read (client aborted?)."

java - 文件无法正确上传

jquery - 如何在图表上绘制图像?

Django CheckboxSelectMultiple : my checkboxes are not checked

python - 如何修改 django REST 框架中的 request.data

json - 如何在 Django 中对 API 响应强制保留 2 位小数?

java - 从 JSOUP 中的表中选择 tr

jquery - 如何为叠加动画设置图像DIV

html - 如何并排放置 svg 和按钮并垂直对齐它们?

css - Rails 4 中的图像路径