1
열쇠는 장고와 파이썬을 배우는 반면 프로젝트를 진행하고 있습니다.Django 템플릿 확장은 CSS를 호출하지 않습니다.
{% 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 %}
{% extends 'base.html' %}
{% block content %}
<div class='col-sm-12' style='text-align: center'>
<h1>Thank you for joining!</h1>
</div>
{% endblock %}
을 그리고 마지막으로 나는 CSS는 그 일에 부름을받을 것인지 단지보기 위해 AboutUs 페이지를 만들려고했는데, 여기에 행운 중 하나를 다음 ThankYou.html과 템플릿은 다음과 같습니다. 많은 정보 페이지와 마찬가지로 AboutUs 페이지에서도 마찬가지입니다. 내가 시도
{% 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 %}
:
- 는 {% 부하 정적 %}를 추가
- 모든 것을 다시 "작업을 복사
- 그것을하고있는 aboutus.html 템플릿은 다음과 같습니다 "signup.html의 코드를 변경하고
아직 디버깅 할 수 없습니다. 직접 코드를 작성하지만 url.py에 문제가있을 수 있다고 생각하지만 실제로 이해할 수는 없습니다. 나는 이것에 파란이있을 수 있었다.
대단히 감사합니다.
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
참고 초기 슬래시 :
최저
,로빈
절대 URL이있는 솔루션은 매력처럼 작동했습니다. 하지만 당신은 이미 이것을 이미 알고있을 것입니다. 반면 정적 태그에 대해서는 확실하지 않습니다. 나는 당신과 Aus_lacy가 보여 주었던 것처럼 시도했지만 제대로 작동하지 못했습니다. –
@RobinWiman 여기에 정적 파일을 구성하고 템플릿 내에서 사용하는 예제가 있습니다. 나는 당신이 그것을 가지고 가서 일하게 할 수있을 것이다라고 확신한다 -> http://www.tangowithdjango.com/book/chapters/templates_static.html –