我们可以将部分 css 文件包含到模板文件中吗？
Posted
技术标签:
【中文标题】我们可以将部分 css 文件包含到模板文件中吗？【英文标题】：Can we include partial css files into a template file? 【发布时间】：2016-12-01 12:20:49 【问题描述】：我打算以模块化方式创建一个主页。主页可能有页眉、页脚和主要部分，我想将标记和特定于这些部分的 css 分开。因此，如果我需要其他页面上的这些部分，我可以只包含文件。
所以我需要能够以与包含 html 文件类似的方式将 css 文件包含到模板中。我可以将所有样式保留在同一个 css 文件中，但如果我稍后删除一些 html 文件，我希望也删除该文件的样式。
所以我想出了这个最小的例子，它适用于我的设置，但我不确定它是否适用于任何地方，或者它是否在 django 中是惯用的。
正如您在下面看到的，我在基本 html 文件上定义了一个 head 部分，在包含的 html 文件上定义了另一个。我需要这两个部分来定义指向相应 css 文件的链接。我阅读了关于 head html 标记的文档，但我不太确定是否可以只定义多个 head 部分，也不确定 head 部分在哪里从包含的文件中甚至会结束，它似乎最终会出现在基本文件的 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;
【问题讨论】：
【参考方案1】：您不应该在 HTML 中定义多个 head 部分。但是没有必要；您应该像使用任何其他元素一样使用模板继承和块。你根本不应该在这里使用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。
【讨论】：
感谢您的建议。我对原始问题进行了一些更改，但我并不清楚我想要做什么。我打算在单独的文件上创建主页的几个部分，然后将这些文件放在一起。所以我不确定继承是否有效。【参考方案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。当然，您还可以使用许多其他子模板。
更新。
决定编辑我的回复。 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 有自己的引擎，可以使用扩展和包含从小部分创建大量大文件。您可以包含所有页面共有的一些部分。您可以重新定义这包括将其包装在块标记中。并且您可以使用扩展创建具有相同布局的不同页面，因此您不必多次复制代码（用于页眉或页脚）。
因此，在 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>
first-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 %
second-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 %
【讨论】：
感谢您的建议。我对原始问题进行了一些更改，但我并不清楚我想要做什么。我打算在单独的文件上创建主页的几个部分，然后将这些文件放在一起。所以我不确定继承是否有效。 我认为这不是问题。您可以创建一些小片段，例如meta.html、includes.html、header.html、menu.html、footer.html 以及您需要的任何其他片段。其次，您创建layout.html 可以用作任何其他文件的基础。它设置您网站的布局，包含我之前描述的文件，并为附加包含和内容定义块，就像它在回答中一样。最后，您可以从layout.html 派生：您可以重新定义块的内容，所有包含将保留。 more here
您更新的答案帮助我了解了基础知识。以上是关于我们可以将部分 css 文件包含到模板文件中吗？的主要内容，如果未能解决你的问题，请参考以下文章
我们可以直接将 Parquet 文件加载到 Hive 中吗？
嗨，我们可以使用自动电源将大 XML 文件存储到 azure sql db 中吗？