[英]How to show footer from index.html to all html pages using tags and filters?
if I have index.html and it contains many plugins like a search box, posts , comment section, etc ... and I just want to take the Footer section and add it to all of my html pages using tags and filters , to edit it easy in all html page in future , can i do this ?如果我有index.html并且它包含许多插件,如搜索框、帖子、评论部分等......我只想获取页脚部分并使用标签和过滤器将其添加到我的所有 html 页面中,以进行编辑将来在所有 html 页面中都很容易,我可以这样做吗?
this is my footer code in index.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 -->
the way @João Haas recommended above works wonderfully, there is another which I personally use, although I don't think either is technically better than the other, that is setting the footer as its own, separate snippet. @João Haas 上面推荐的方式非常有效,我个人使用了另一种方法,尽管我认为技术上没有一种比另一种更好,那就是将页脚设置为自己的独立片段。 I personally find this to be cleaner looking to read and edit.我个人认为这更便于阅读和编辑。
<!-- 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>
To do this set up a templates directory in your main dir and then a sub-directory just for snippets.为此,请在您的主目录中设置一个模板目录,然后设置一个仅用于片段的子目录。 the structure would look something like this:结构看起来像这样:
manage.py
templates
----base.html
----snippets
----base_css.html
----header.html
----footer.html
----other_snippet.html
----another_snippet.html
----and_another_snippet.html
honestly, the more the merrier, I use these things like crazy.老实说,越多越好,我疯狂地使用这些东西。 They make life a million times easier when the code gets increasingly complex.当代码变得越来越复杂时,它们使生活变得轻松一百万倍。
You probably want to have a base HTML file with multiple blocks, and create other pages extending from it:您可能想要一个包含多个块的基本 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>
You would then create all files like this:然后,您将创建这样的所有文件:
<!-- 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 %}
The idea of extending with blocks is that whenever you ask for page.html
, it will use base.html
with the block definitions you created on page.html
.使用块扩展的想法是,无论何时您请求page.html
,它都会使用base.html
和您在page.html
创建的块定义。 If a block is not defined, it will simply not be rendered on the final html.如果一个块没有定义,它就不会在最终的 html 上呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.