如何用django方式改变每个页面的背景图片和内容

Question

我有一个 base.html 文件和 10 多个具有不同背景图片和内容的其他页面。我尝试使用 {% extends "base.html" %} ，但如果这样做，我该如何更改每个页面中的背景图片和内容？请帮我解决这个问题。提前致谢。

编辑

我的目录：

还有我的base.html：

     {% load staticfiles %}

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
          <meta name="description" content="">
          <meta name="author" content="">
          <link rel="icon" href="../../favicon.ico">

          <title>Parasol.</title>

          <!-- Bootstrap core CSS -->
            <link href="{%  static 'css/bootstrap.min.css' %}" rel="stylesheet">
            <link href="{%  static 'css/navbar-static-top.css' %}" rel="stylesheet">
            <link href="{%  static 'css/style.css' %}" rel="stylesheet">

          <!-- Custom styles for this template -->
          <link href="navbar-static-top.css" rel="stylesheet">
          <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
          <style>
          {% block additional_styles %}
     body {
      background:url(static/custom/img/voice.jpg) no-repeat center center fixed;
     }
  </style>

      {% endblock %}

        </head>
        <body>
       <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                <a class="navbar-brand" href="{% url "home" %}">Parasol.</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Photos <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="{% url "firstsite" %}">Timeline</a></li>
                  <li class="active"><a href="./">Quotes<span class="sr-only">(current)</span></a></li>
                  <li><a href="{% url "friends" %}">Friends</a></li>
                </ul>
              </div><!--/.nav-collapse -->
            </div>
          </nav>
          <div class="container">
            <div class="jumbotron">
              <h1>Just her and the revolution</h1>
              <p>
      <a href="{% url 'go' %}" class="btn btn-lg btn-primary">Let's take a trip.. </a>
              </p>
            </div>

          </div>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
          <script src="../../dist/js/bootstrap.min.js"></script>
          <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
          <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

        </body>
      </html>

Answer 1

有很多不同的方法可以做到这一点，具体取决于内容的类型、您的项目和模板结构。关于背景图片，你可以简单地添加块到你的 base.html:

{% block additional_styles %}
<style>
   body {
    background-image: url(images/base.jpg);
   }
</style>
{% endblock %}

然后在您的 template_1.html（这是其他一些页面的模板）中：

{% extends 'base.html' %}
{% block additional_styles %}
<style>
   body {
    background-image: url(images/1.jpg);
   }
</style>
{% endblock %}

Answer 2

除上述答案外，在 base.html

中添加以下标签

{% block additional_styles %}
{% endblock %}

在您的 <head> 标签中。喜欢（base.html）

    <head>
        {% block additional_styles %}
        {% endblock %}
    </head>

Answer 3

您可以通过覆盖 bootstrap 的预定义样式来做到这一点，如在 css 文件或额外样式部分或取代特定部分样式，例如

<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #32CD32;">

<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-image: url({% static "img/ok.jpg" %}); background-repeat: repeat-x;">

如何用django方式改变每个页面的背景图片和内容

How to change the background picture and content of each pages in django way

html

css

django

django-templates

编辑