如何更改扩展基本模板的 Django HTML 视图文件?

Posted

技术标签:

【中文标题】如何更改扩展基本模板的 Django HTML 视图文件?【英文标题】:How do I make changes to my Django HTML view file that extends a base template? 【发布时间】:2022-01-09 13:35:57 【问题描述】:

我有一个正在处理的 Django 测试项目,并且已经工作了几个小时,但我被困住了。我无法将其他 html 语法添加到我的 html 文件中,以将基本模板扩展到其中。

我有一个在我的 html 视图上工作的基本模板,但是,当我在 html 视图中进行更改时,它不会反映。看起来我在 HTML 视图和基本模板之间缺少了一些东西。

下面是 HTML 视图

<!DOCTYPE html>
% extends "base.html" %
<!--https://www.anwita-arun.in/ -->
  % block head %
    <html lang="en">
    <head>
      <title>Test Project</title>
    </head>
  % endblock %

  % block  body %
    <body>
      <h1 style="font-size: 250px"> Testing </h1>
      <p> aloha </p>
      <form method="POST">
        <!-- Form creation with post. No method "post" needed -->
        % csrf_token %
        <!-- Insert token -->
         form.as_p 
        <!-- form variable -->
        <input type="submit">
        <!--  Form input submission -->
      </form>
    </body>
  % endblock %

下面是基本模板

<!DOCTYPE html>
<!--https://www.anwita-arun.in/ -->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Rajdhani&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-rfs/bootstrap-rfs.css">
  <meta http-equiv="refresh" content="">
</head>
  % block head %
  % endblock %

  <body style="scroll-behavior: smooth">
    <div class="container-fluid">
      <div class="Header">
        <div class="jumbotron display-5 bg-white p-3 mb-2 text-center">
          <h1 class=" display-5 text-dark mb-5 mt-5" id="header">Augusma J. Photography</h1>
        </div>
        <nav class="text-center navbar navbar-expand-lg text-dark jumbotron navbar-light bg-light"><h2 class="display-3">Creating Memories</h2>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="h2 navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link display-3" style="color:#ff33cc" href="index" target="_blank">Portfolio</a>
              </li>
              <li class="nav-item">
                <a class="nav-link display-3" style="color:#ff33cc" href="about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link display-3" style="color:#ff33cc" href="contact">Contact</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      </div>
    % block body %
    % endblock %

    <footer class="text-center text-white" style="background-color: black;">
      <div class="container pt-4">
      <!-- Section: Social media -->
        <section class="mb-4">
          <!-- Facebook -->
          <a class="btn btn-link btn-floating btn-lg btn btn-outline-primary text-light m-1" href="#!" role="button" data-mdb-ripple-color="dark"><i class="fab fa-facebook-f fa-4x"></i></a>
          <!-- Twitter -->
          <a class="btn btn-link btn-floating btn-lg btn btn-outline-primary text-light m-1" href="#!" role="button" data-mdb-ripple-color="dark"><i class="fab fa-twitter fa-4x"></i></a>
          <!-- Instagram -->
          <a class="btn btn-link btn-floating btn-lg btn btn-outline-primary text-light m-1" href="https://instagram.com/augusmajphotography?igshid=5bhelg1i1vwh" target="_blank" role="button" data-mdb-ripple-color="dark"><i class="fab fa-instagram fa-4x"></i></a>
          <!-- Linkedin -->
          <a class="btn btn-link btn-floating btn-lg btn btn-outline-primary text-light m-1" href="#!" role="button" data-mdb-ripple-color="dark"><i class="fab fa-linkedin fa-4x"></i></a>
        </div>
      <!-- Grid container -->
      <!-- Copyright -->
        <div class="text-center text-light p-3" style="background-color: rgba(0, 0, 0, 0.2);">
          © 2021 Copyright:
          <a class="text-light" href="https://www.facebook.com/stevenson.gerard">Website Designed by Evolving Technologies</a>
        </div>
      <!-- Copyright -->
      </footer>
      % block footer %
      % endblock %

  </div>
  <div class="javascript">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </div>
    % block JS %
    % endblock %

【问题讨论】:

控制台有错误吗? 没有。它运行良好,没有错误 【参考方案1】:

不是这样的,当你从 base.html 扩展时,你只需要覆盖块,它应该是这样的:

base.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
  % block head %
  % endblock %
</head>
<body>
  <p>This p tag will always be shown</p>
  % block content %
  <p>This content is a placeholder, will be overridden.</p>
  % endblock %
</body>
</html>

在您继承的模板中

% extend 'base.html' %

% block head %
<link rel="stylesheet" type="text/css" href="css/my_extra_custom_css.css" media="screen" />
% endblock %

% block content %
<h1>Content from my app, overriding the placeholder.</h1>
% endblock %

【讨论】:

以上是关于如何更改扩展基本模板的 Django HTML 视图文件?的主要内容,如果未能解决你的问题,请参考以下文章

Django 基础模板文件

Django:如何重新分发包含可扩展 HTML 模板的项目/应用程序?

如何通过按钮更改 Django 模板使用的 CSS?

Django 在子模板中扩展公共变量或块

扩展 Django 管理模板 - 更改更改列表

Django DRY - 如何在 Django 模板中扩展两个 .html 文件?