如何使用标签和过滤器将页脚从index.html显示到所有html页面



如果我有index.html并且它包含许多插件,如搜索框、帖子、评论区等。。。我只想使用页脚部分,并使用标签和过滤器将其添加到我的所有html页面中,以便将来在所有html页面上轻松编辑,我能做到吗?

这是我在index.html:中的页脚代码

<footer style="margin:auto" class="py-5 bg-dark h-50 d-inline-block w-100 p-3">
<div class="container">
<div class="text-center mt-4">

<a href="/Privacy_Policy" style="margin:5px;width:140px" role="presentation" type="button" class="btn btn-secondary btn-lg">Privcy Policy</a>

<a href="/request_apps/" style="margin:5px;width:140px" role="presentation" type="button" class="btn btn-secondary btn-lg">Request apps</a> 

<a href="/our_Mission" style="margin:5px;width:140px" role="presentation" type="button" class="btn btn-secondary btn-lg">Our Mission</a>

<a href="/Contact_US" style="margin:5px;width:140px" role="presentation" type="button" class="btn btn-secondary btn-lg">Contact us</a>

<a href="/About_Me" style="margin:5px;width:140px" role="presentation" type="button" class="btn btn-secondary btn-lg">About us</a>
</div>
<!-- copyright -->
<p style="font-family:monospace;font-size:18px" class="m-0 text-center text-white" >Copyright 2019-2020 SoftDLR.com All Rights Reserved. </p>
</div>
<!-- /.container -->

@João Haas上面推荐的方法非常有效,我个人使用了另一种方法,尽管我不认为其中一种在技术上比另一种更好,那就是将页脚设置为自己的单独片段。我个人觉得这是更干净的阅读和编辑。

<!-- base.html -->
<html>
<head>
<!-- stuff you want every page to have on the head -->
<!-- head block for extending -->
{% block head %}
{% endblock %}
</head>
<body>
<!-- body block for extending -->
{% include 'snippets/base_css.html' %}
{% include 'snippets/header.html' %}
{% block body %}
{% endblock %}
<!-- your footer html -->
{% include 'snippets/footer.html' %}
</html>
<!-- snippets/footer.html -->
<footer class="container">
<p> footer info </p>
</footer>
<!-- snippets/header.html -->
<div class="container">
<p>Header info</p>
</div>

要做到这一点,请在主目录中设置一个templates目录,然后为snippets设置一个子目录。结构看起来像这样:

manage.py
templates
----base.html
----snippets
----base_css.html
----header.html
----footer.html
----other_snippet.html
----another_snippet.html
----and_another_snippet.html

老实说,越开心,我就疯狂地使用这些东西。当代码变得越来越复杂时,它们使生活变得轻松了一百万倍。

您可能想要一个包含多个块的基本HTML文件,并从中创建其他页面:

<!-- base.html -->
<html>
<head>
<!-- stuff you want every page to have on the head -->
<style>
* {
font-size: 14;
}
</style>
<!-- head block for extending -->
{% block head %}
{% endblock %}
</head>
<body>
<!-- body block for extending -->
{% block body %}
{% endblock %}
<!-- your footer html -->
<footer>
...
</footer>
</html>

然后你会创建这样的所有文件:

<!-- page.html -->
{% extends "base.html" %}
<!-- page specific head -->
{% block head %}
<style>
div {
margin: 0;
}
</style>
{% endblock %}
<!-- page specific body -->
{% block body %}
<p>The footer should be added after this paragraph!</p>
{% endblock %}

使用块扩展的想法是,每当您请求page.html时,它都会将base.html与您在page.html上创建的块定义一起使用。如果没有定义一个块,它将不会在最终的html上呈现。

最新更新