django方式如何改变每个页面的背景图片和内容
Posted
技术标签:
【中文标题】django方式如何改变每个页面的背景图片和内容【英文标题】：How to change the background picture and content of each pages in django way 【发布时间】：2015-11-12 15:12:31 【问题描述】：我有一个 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>
【问题讨论】：
请解释一下你说的内容是什么？是动态数据还是静态数据？ 它不是动态的。它是静态的 似乎我只需要在我所有其他页面的基础中覆盖我的 body css。如何做到这一点 我的 CSS 正文：body background:url(../img/voice.jpg) no-repeat center center fixed; -webkit-background-size: cover -moz-background-size: cover; -o-background-size: cover; background-size: cover;
【参考方案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 %
【讨论】：
对不起，我对 django 很陌生。附加样式是什么意思？ @blackwindow 这只是块的随机名称。通常，在您的浏览器中，base.html（父模板）中此块的内容将被 template_1.html（子模板，它继承 base html 与 % extends 'base. html' % 补充阅读：docs.djangoproject.com/en/1.8/topics/templates模板系统是Django的核心，那篇文章绝对值得一读。 嗨，svfat，我尝试了上述方法（编辑了我的问题）。但不知道为什么我的背景图片正在加载。你能帮忙吗？提前致谢 @blackwindow 我不清楚你的问题。您的背景图片是否正在加载？ @blackwindow 你应该将 【参考方案2】：除了上述答案之外，在 base.html 中添加以下标签
% block additional_styles %
% endblock %
在您的<head> 标记中。
喜欢（在 base.html 中）
<head>
% block additional_styles %
% endblock %
</head>
【讨论】：
【参考方案3】：您可以通过覆盖引导程序的预定义样式（如在 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方式如何改变每个页面的背景图片和内容的主要内容，如果未能解决你的问题，请参考以下文章