如何使用标签和过滤器将页脚从 index.html 显示到所有 html 页面?
Posted
技术标签:
【中文标题】如何使用标签和过滤器将页脚从 index.html 显示到所有 html 页面?【英文标题】:How to show footer from index.html to all html pages using tags and filters? 【发布时间】:2020-12-17 17:02:53 【问题描述】:如果我有 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 -->
【问题讨论】:
您是否使用为其他视图扩展的基本 HTML 模板? 不,我不@Ryan 这就是你所需要的。 @João Haas 的回答告诉你怎么做。 感谢您的宝贵时间 【参考方案1】:@João Haas 上面推荐的方式非常有效,我个人使用了另一种方式,虽然我认为两者在技术上并不比另一种更好,那就是将页脚设置为自己的、单独的 sn-p。我个人认为阅读和编辑更简洁。
<!-- 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>
为此,请在您的主目录中设置一个模板目录,然后为 sn-ps 设置一个子目录。结构看起来像这样:
manage.py
templates
----base.html
----snippets
----base_css.html
----header.html
----footer.html
----other_snippet.html
----another_snippet.html
----and_another_snippet.html
老实说,越多越好,我会疯狂地使用这些东西。当代码变得越来越复杂时,它们让生活变得轻松了一百万倍。
【讨论】:
真的非常感谢兄弟,只是几个问题,我必须先创建 footer.html 然后添加我的样式然后我在任何页面中使用 % include 'sn-ps/footer.html' % ?? 别担心,我会在上面的答案中添加以帮助描述该过程 谢谢你救了我的兄弟,我在等你谢谢 别担心,如果答案对你有用,请记住你可以投票并接受,如果没有,请告诉我我能做些什么来提供更多帮助 你好你能帮我解决这个问题吗[***.com/questions/63764870/…【参考方案2】:您可能希望拥有一个包含多个块的基本 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 上呈现。
【讨论】:
thhhhhannnkss 一个 loooot 兄弟 ,,, 非常感谢 ,,, 我发现 Bush Muncher 的方式比你的方式容易,但你的方式非常有帮助,真的会对我有很大帮助,谢谢 是的,布什的方法确实可能更有效,具体取决于项目的规模以上是关于如何使用标签和过滤器将页脚从 index.html 显示到所有 html 页面?的主要内容,如果未能解决你的问题,请参考以下文章