Fatal编程技术网
  • python/
  • Python 我们可以将部分css文件包含到模板文件中吗？

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

python html css django

Python 我们可以将部分css文件包含到模板文件中吗？,python,html,css,django,django-templates,Python,Html,Css,Django,Django Templates,我打算以模块化的方式创建一个主页。主页可能有一个页眉、一个页脚和一个主要部分，我希望将特定于这些部分的标记和css分开。因此，如果我需要其他页面上的这些部分，我可以只包含这些文件 所以我需要能够以类似于包含html的方式将css文件包含到模板中。我可以在同一个css文件上保留所有样式，但是如果我以后删除一些html文件，我希望该文件的样式也被删除 所以我提出了这个最小的例子，它可以在我的设置中使用，但是我不确定它是否可以在任何地方使用，或者它在django中是否是惯用的 正如您在下面看到的，我在

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

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

所以我提出了这个最小的例子，它可以在我的设置中使用，但是我不确定它是否可以在任何地方使用，或者它在django中是否是惯用的

正如您在下面看到的，我在基本html文件上定义了一个head部分，在包含的html文件上定义了另一个head部分。我需要这两个部分来定义到相应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>
main.html：

{% load static %}

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

<main>
    main
</main>
您不应该在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>

{%load static%}
{%block extrastyles%}{%endblock%}
标题
{%block main%}{%endblock%}
页脚
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 %}

{%extends“base.html”%}
{%load static%}
{%block extrastyles%}
{%endblock%}
{%block main%}
主要的
{%endblock%}
在您的视图中，您呈现的是main.html，而不是base.html。

第一个问题是，将
头部
放入
正文
是不正确的。它使您的
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>
此结构必须在任何不同语言的框架中使用，因为它只是浏览器使用的HTML。任何框架都必须有工具来使用其模板引擎呈现简单的HTML页面。Django有自己的引擎，可以使用扩展和包含从小部件创建大量大文件。您可以包含一些对所有页面都通用的部分。可以在块标记中重新定义此包含包装此包含。您可以使用extend创建具有相同布局的不同页面，因此不必多次复制代码（页眉或页脚）

因此，在Django中，您可以创建以下结构。我用了一些，看起来很舒服：

base.html


{%load static%}
{%include'meta.html%}
{%block'标题“}主页{%endblock%}-我的网站
{%block'附加_包括“%}{%endblock%}
{%block'头'%}{%include'头.html%}{%endblock%}
{%block'内容'%}{%endblock%}
{%block'页脚'%}{%include'页脚.html%}{%endblock%}
first-page.html

{%extends'base.html%}
{%load static%}
{%block'标题“}第一页{%endblock%}
{%block'附加_包括“%”
{%endblock%}
{%block'内容“%”
一些页面内容
{%endblock%}
second-page.html

{%extends'base.html%}
{%load static%}
{%block'标题“}第二页{%endblock%}
{%block'附加_包括“%”
{%endblock%}
{%block'标题'%}{%include'第二页的标题'.html'%}{%endblock%}
{%block'内容“%”
另一页内容
{%endblock%}
谢谢你的建议。我对原来的问题做了一些修改，我没有弄清楚我想做什么。我打算在单独的文件上创建主页的几个部分，然后将这些文件合并在一起。所以我不确定继承是否有效。谢谢你的建议。我对原来的问题做了一些修改，我没有弄清楚我想做什么。我打算在单独的文件上创建主页的几个部分，然后将这些文件合并在一起。所以我不确定继承是否有效。我认为这不是一个问题。您可以创建一些小片段，例如
meta.html
，
includes.html
，
header.html
，
menu.html
，
footer.html
，以及您需要的任何其他片段。第二，创建可以用作任何其他文件基础的
layout.html
。它设置了站点的布局，包含了我前面描述的文件，并为附加的内容定义了块。最后，您可以从
layout.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 %}

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

<!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>

<!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>

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

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