Question

我打算以模块化方式创建主页面。主页面可能有标题，页脚和主要部分，我希望将标记和特定于每个部分的css分开。因此，如果我需要在其他页面上使用这些部分，我可以只包含这些文件。

所以我需要能够以类似的方式将css文件包含到模板中，我可以包含一个html文件。我可以将所有样式保存在同一个css文件中，但如果我稍后删除一些html文件，我也希望删除该文件的样式。

所以我提出了这个最小的例子，它适用于我的设置，但我不确定它是否会在任何地方都有效，或者它是否在django中是惯用的。

如下所示，我在基本html文件中定义了一个头部分，在包含的html文件中定义了另一个头部分。我需要这两个部分来定义指向相应css文件的链接。我虽然阅读了 head html标签上的文档，但我不确定我是否可以定义多个头部，而且我不确定 head <包含文件中的/ em>部分甚至会结束，看起来它最终会在基本文件的 body 部分内部结束，我不知道所有浏览器是否都能正确呈现

所以我的问题是：我可以在所有平台上执行此操作吗？我应该这样做吗？这样做会有另一种更好的方法吗？

我收到了一些使用继承的建议，我不确定它是否有效，我没有基本文件，我可以对孩子进行一些更改，然后渲染孩子。我有几个文件，它们定义了主页的几个不同部分，我需要将它们放在一起。

base.html文件：

{% load static %} <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="{% static "appfolder/css/base.css" %}" /> </head> <body> {% include "header.html" %} {% include "main.html" %} {% include "footer.html" %} </body> </html>

base.css：

.header { background-color: red; } .footer { background-color: blue; }

main.html中：

{% load static %} <head> <link rel="stylesheet" type="text/css" href="{% static "appfolder/css/main.css" %}" /> </head> <main> main </main>

的main.css：

.main { background-color: green; }

Answer 1

您不应在HTML中定义多个头部。但是没有必要;你应该像使用任何其他元素一样使用模板继承和块。你根本不应该在这里使用include;继承更强大。

所以，base.html看起来像这样：

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css"
        href="{% static "appfolder/css/base.css" %}" />
    {% block extrastyles %}{% endblock %}
</head>

<body>
<header>header</header>
{% block main %}{% endblock %}
<footer>footer</footer>
</body>

</html>

和main.html是：

{% extends "base.html" %}
{% load static %}

{% block extrastyles %}
    <link rel="stylesheet" type="text/css"
        href="{% static "appfolder/css/main.css" %}" />
{% endblock %}

{% block main %}
    main
{% endblock %}

并在您的视图中呈现main.html，而不是base.html。

Answer 2

第一个问题，将head改为body是不正确的。这样做是因为main.html不是单独的html文件，而是base.html的一部分。第二个是，如果你将来需要一次，那么包含另一个文件并不容易。

我用另一种方式制作这样的东西。使用基本文件时，扩展基本模板而不是包含文件看起来更有用。因此，在基本模板中，我们可以制作一些占位符块。

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css"
        href="{% static "appfolder/css/base.css" %}" />

    {% block 'additional_includes' %}{% endblock %}
</head>

<body>
    <header>header</header>
    {% block 'content' %}{% endblock %}
    <footer>footer</footer>
</body>

</html>

然后我们将使用它。因此，创建子模板并重新定义所需的块（如果您不重新定义它们，它们将保持空白）：

{$ extends '/path_to_base/base.html' %}
{% load static %}

{% block 'additional_includes' %}
    <link rel="stylesheet" type="text/css" href="{% static "appfolder/css/main.css" %}" />
{% endblock %}

{% block 'content' %}
    your content
{% endblock %}

这就是全部。您需要在视图中引用main.html而不是base.html。当然，您还可以使用许多其他子模板。

<强> UPD。

决定编辑我的回复。 html文件的常见结构是：

<!DOCTYPE ...>
<html>
    <head>
        <!-- all your meta tags -->
        <!-- title -->
        <!-- css and other includes, you can include so many files as you need, but it is better to use as little as possible as it can reduce server performance -->
        <!-- scripts definitions (not necessary to put there, often they are paced in the end of file) -->
    </head>
    <body>
        <!-- content of file
        you can divide this part in several parts and include them
        but you can't use head here, because it is body -->
    </body>
</html>

此结构必须在不同语言的任何框架中使用，因为它只是浏览器使用的html。任何框架都必须有工具来使用模板引擎呈现简单的html页面。 django拥有自己的引擎，可以使用扩展和包含从小部件创建大量的大文件。您可以包含一些常用于所有页面的部分。您可以重新定义此包括将此包含包含在块标记中。您可以使用extend创建具有相同布局的不同页面，因此您不必多次复制代码（页眉或页脚）。

所以，在django中你可以创建以下结构。我使用了某种它，看起来很舒服：

base.html文件

<!DOCTYPE ...>
<html>
    <head>
        {% load static %}
        {% include 'meta.html' %}
        <title>{% block 'title' %}Main page{% endblock %} - my site</title>
        <link href='{% static "appfolder/css/base.css" %}' ... />

        {% block 'additional_includes' %}{% endblock %}
    </head>
    <body>
        {% block 'header' %}{% include 'header.html' %}{% endblock %}
        <!-- header is just visible site header, not including files -->
        {% block 'content' %}{% endblock %}
        {% block 'footer' %}{% include 'footer.html' %}{% endblock %}
    </body>
</html>

第一page.html中

{$ extends 'base.html' %}
{% load static %}

{% block 'title' %}First-page{% endblock %}

{% block 'additional_includes' %}
    <link href='{% static "appfolder/css/first-page.css" %}' ... />
{% endblock %}

<!-- if you DON'T use block, then the content defined in base template file will remain -->

{% block 'content' %}
    Some page content
{% endblock %}

第二page.html中

{$ extends 'base.html' %}
{% load static %}

{% block 'title' %}Second-page{% endblock %}

{% block 'additional_includes' %}
    <link href='{% static "appfolder/css/second-page.css" %}' ... />
{% endblock %}

<!-- if you USE block, then its content will be rewritten with new data. you can use {{ block.super }} to add the content of block from base template -->
{% block 'header' %}{% include 'header_for_second_page.html' %}{% endblock %}

{% block 'content' %}
    Another page content
{% endblock %}

我们可以将部分css文件包含到模板文件中吗？

2 个答案: