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

【问题标题】：How to show footer from index.html to all html pages using tags and filters?如何使用标签和过滤器将页脚从 index.html 显示到所有 html 页面？
【发布时间】：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 的回答告诉你怎么做。
感谢您的宝贵时间

标签： html django django-rest-framework django-templates

【解决方案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' %} ??
别担心，我会在上面的答案中添加以帮助描述该过程
谢谢你救了我的兄弟，我在等你谢谢
别担心，如果答案对你有用，请记住你可以投票并接受，如果没有，请告诉我我能做些什么来提供更多帮助
你好你能帮我解决这个问题吗[stackoverflow.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 的方式比你的方式容易，但你的方式非常有帮助，真的会对我有很大帮助，谢谢
是的，布什的方法确实可能更有效，具体取决于项目的规模