[英]How do I make changes to my Django HTML view file that extends a base template?
我有一個正在研究的 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 %}
根據您的基本圖像的位置,您應該嘗試:
{% extends "<DJANGO_APP>/base.html" %}
它不是那樣工作的,當你從 base.html 擴展時,你只需要覆蓋這些塊,它應該是這樣的:
底座.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 %}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.