我正在做一个元素，关键是要学习 django 和 python。
当我尝试使用命令 {% extends 'base.html' %} 来扩展 html 代码并创建新模板或新页面时出现问题。
它的结构是这样的； base.html 是索引文件或我放置实际网站上显示的大部分代码的文件。然后我为我想制作的每个功能制作模板。所以我想要一个可以正常加载的注册(提交)模板。
这是我的base.html:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="icon/favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="static/css/jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="static/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="static/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
{% block jumbotron %}{% endblock %}
<div class="container">
{% if messages %}
<div class='row'>
<div class='col-sm-12 col-sm-offset'>
{% for message in messages %}
<p{% if message.tags == "success" %} class="alert alert-success" {% endif %}>{{ message }}</p>
{% endfor %}
</div>
</div>
{% endif %}
<div class="row">
{% block content%}{% endblock %}
</div>
<hr>
<footer>
<p>© Copyright 2014</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
还有我的url.py:
from django.conf.urls import patterns, include, url
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
# Examples:
url(r'^$', 'signups.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
url(r'^thank-you/$', 'signups.views.thankyou', name='thankyou'),
url(r'^about-us/$', 'signups.views.aboutus', name='aboutus'),
url(r'^admin/', include(admin.site.urls)),
)
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL,
document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
和view.py:
from django.shortcuts import render, render_to_response, RequestContext, HttpResponseRedirect
from django.contrib import messages
# Create your views here.
from .forms import SignUpForm
def home(request):
form =SignUpForm(request.POST or None)
if form.is_valid():
save_it = form.save(commit=False)
save_it.save()
messages.success(request, 'Thank you for joining! We will be in touch with you as soon as possible:) ')
return HttpResponseRedirect('/thank-you/')
return render_to_response("signup.html", locals(), context_instance=RequestContext(request))
def thankyou(request):
return render_to_response("thankyou.html", locals(), context_instance=RequestContext(request))
def aboutus(request):
return render_to_response("aboutus.html", locals(), context_instance=RequestContext(request))
这是我正在运行的 signup.html 模板(即按预期调用 CSS)。
{% extends 'base.html' %}
{% block jumbotron %}
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
{% endblock %}
{% block content %}
<div class="col-sm-3">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-block btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-3">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-block btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-3">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-block btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-3">
<h2>Join Now</h2>
<form method='POST' action=''> {% csrf_token %}
{{form.as_p }}
<input type='submit' class='btn btn-success btn-block'>
</form>
</div>
{% endblock %}
现在，当访问者访问该网站时，他们可以“加入”，他们输入姓名和电子邮件，然后被重定向到一个新页面，上面写着“谢谢”等等。此感谢页面确实不按预期调用 CSS。它只是显示为带有现在格式的纯 HTML(当然除了 h1、h2 等)。 thankyou.html 模板如下所示:
{% extends 'base.html' %}
{% block content %}
<div class='col-sm-12' style='text-align: center'>
<h1>Thank you for joining!</h1>
</div>
{% endblock %}
最后我尝试创建一个 AboutUs 页面只是为了看看 CSS 是否会被调用到那个页面，但这里也没有运气。 AboutUs 页面与感谢页面的情况相同。 aboutus.html 模板如下所示:
{% extends 'base.html' %}
{% block jumbotron %}
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>This is Us</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
{% endblock %}
{% block content %}
<div class="col-sm-3">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-block btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-3">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-block btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-3">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-block btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-3">
<h2>Join Now</h2>
<form method='POST' action=''> {% csrf_token %}
{{form.as_p }}
<input type='submit' class='btn btn-success btn-block'>
</form>
</div>
{% endblock %}
我试过:
- 添加 {% load static %}
- 重新来过
- 从 signup.html 复制“工作”代码并进行更改
我自己还不能调试代码，但我认为 url.py 中可能存在问题，但我真的无法弄清楚。我可能会在这方面陷入困境。
非常感谢您的大力帮助和时间!
最好的，
罗宾
最佳答案
您的样式表链接都是相对 URL，它们应该是绝对的:
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
注意开头的斜杠。
虽然你应该使用 static 标签，但在执行 load static 之后:
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
关于python - Django 模板扩展不调用 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27787483/