Django初心者です。Django1.8.3で画像portfolioを表示させる簡単なアプリを作っています。
base.htmlでcssを読み込んで、extendsしてindex.htmlにもabout.htmlにもスタイルが当たるようにしたいです。
index.htmlはうまくスタイルが当たるのですが、about.htmlの方が
"GET /about/static/portfolio/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 2542
となり、/static/の前に"about"がついてしまってCSSが読み込まれません。なぜでしょうか?
ちなみにindex.htmlの方は、
"GET /static/portfolio/bootstrap/css/bootstrap.min.css HTTP/1.1" 304 0
となります。
ディレクトリ構造
myapp ├── myapp │ ├── __init__.py │ ├── __init__.pyc │ ├── settings.py │ ├── settings.pyc │ ├── urls.py │ ├── urls.pyc │ ├── views.py │ ├── views.pyc │ ├── wsgi.py │ └── wsgi.pyc ├ ├── db.sqlite3 ├── manage.py ├── portfolio │ ├── __init__.py │ ├── __init__.pyc │ ├── admin.py │ ├── admin.pyc │ ├── migrations │ │ ├── 0001_initial.py │ │ ├── 0001_initial.pyc │ │ ├── 0002_auto_20150817_0851.py │ │ ├── 0002_auto_20150817_0851.pyc │ │ ├── __init__.py │ │ └── __init__.pyc │ ├── models.py │ ├── models.pyc │ ├── sql │ │ └── actressmaster.sql │ ├── templates │ │ ├── about.html │ │ ├── base.html │ │ ├── contact.html │ │ ├── index.html │ │ └── portfolio │ ├── tests.py │ ├── urls.py │ ├── urls.pyc │ ├── views.py │ └── views.pyc ├── static │ └── portfolio │ └── bootstrap │ ├── css │ │ ├── 4-col-portfolio.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ └── js │ ├── bootstrap.js │ ├── bootstrap.min.js │ └── jquery.js
settings.py
(投稿文字数制限があるので省略できるところは省略しています)
python
1 2import os 3 4BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 5 6ALLOWED_HOSTS = [] 7 8 9# Application definition 10 11INSTALLED_APPS = ( 12 'django.contrib.admin', 13 'django.contrib.auth', 14 'django.contrib.contenttypes', 15 'django.contrib.sessions', 16 'django.contrib.messages', 17 'django.contrib.staticfiles', 18 'portfolio', 19) 20 21ROOT_URLCONF = 'avdatapage.urls' 22 23TEMPLATES = [ 24 { 25 'BACKEND': 'django.template.backends.django.DjangoTemplates', 26 'DIRS': [os.path.join(BASE_DIR, 'templates')], 27 'APP_DIRS': True, 28 'OPTIONS': { 29 'context_processors': [ 30 'django.template.context_processors.debug', 31 'django.template.context_processors.request', 32 'django.contrib.auth.context_processors.auth', 33 'django.contrib.messages.context_processors.messages', 34 ], 35 }, 36 }, 37] 38 39WSGI_APPLICATION = 'avdatapage.wsgi.application' 40 41# Static files (CSS, JavaScript, Images) 42# https://docs.djangoproject.com/en/1.8/howto/static-files/ 43 44STATIC_URL = '/static/' 45 46 47STATICFILES_DIRS = ( 48 os.path.join(BASE_DIR, 'static'), 49) 50
urls.py
python
1from django.conf.urls import include, url 2from django.contrib import admin 3 4urlpatterns = [ 5 url(r'^admin/', include(admin.site.urls)), 6 7 url(r'^$', 'avdatapage.views.top', name='top'), 8 9 url(r'^portfolio/', include('portfolio.urls')), 10 11 url(r'^about/$', 'avdatapage.views.about', name='about'), 12 13 url(r'^contact/$', 'avdatapage.views.contact', name='contact'), 14]
views.py
python
1from django.shortcuts import * 2from portfolio.models import ActressMaster 3 4def top(request): 5 all_actress = ActressMaster.objects.all() 6 7 return render_to_response('index.html', {'all_actress': all_actress}, context_instance=RequestContext(request)) 8 9def about(request): 10 return render_to_response('about.html', locals(), context_instance=RequestContext(request)) 11 12 13def contact(request): 14 return render_to_response('contact.html', locals(), context_instance=RequestContext(request))
base.html
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 6 <meta charset="utf-8"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <meta name="description" content=""> 10 <meta name="author" content=""> 11 12 <title>データページ</title> 13 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 14 <!-- Bootstrap Core CSS --> 15 <link href="static/portfolio/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 16 17 <!-- Custom CSS --> 18 <link href="static/portfolio/bootstrap/css/4-col-portfolio.css" rel="stylesheet"> 19 20 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 21 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 22 <!--[if lt IE 9]> 23 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 24 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 25 <![endif]--> 26 27</head> 28 29<body> 30 31 <!-- Navigation --> 32 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 33 <div class="container"> 34 <!-- Brand and toggle get grouped for better mobile display --> 35 <div class="navbar-header"> 36 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 37 <span class="sr-only">Toggle navigation</span> 38 <span class="icon-bar"></span> 39 <span class="icon-bar"></span> 40 <span class="icon-bar"></span> 41 </button> 42 <a class="navbar-brand" href="{% url 'top' %}">データページ</a> 43 </div> 44 <!-- Collect the nav links, forms, and other content for toggling --> 45 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 46 <ul class="nav navbar-nav"> 47 <li> 48 <a href="{% url 'about' %}">About</a> 49 </li> 50 <li> 51 <a href="#">Services</a> 52 </li> 53 <li> 54 <a href="{% url 'contact' %}">Contact</a> 55 </li> 56 <li> 57 <a href="#">Login</a> 58 </li> 59 </ul> 60 </div> 61 <!-- /.navbar-collapse --> 62 </div> 63 <!-- /.container --> 64 </nav> 65 66 <!-- Page Content --> 67 <div class="container"> 68 69 {% block main %} 70 71 {% endblock main %} 72 73 </div> 74 <!-- /.container --> 75 76 <!-- jQuery --> 77 <script src="static/portfolio/bootstrap/js/jquery.js"></script> 78 79 <!-- Bootstrap Core JavaScript --> 80 <script src="/static/portfolio/bootstrap/js/bootstrap.min.js"></script> 81 82</body> 83 84</html>
index.html
html
1{% extends "base.html" %} 2 3{% block main %} 4 5 <!-- Page Heading --> 6 <div class="row"> 7 <div class="col-lg-12"> 8 <h1 class="page-header"><i class="fa fa-heart-o"></i> リスト 9 <small>名前の順</small> 10 </h1> 11 </div> 12 </div> 13 <!-- /.row --> 14 15 {% for actress in all_actress %} 16 <div class="col-md-3 portfolio-item"> 17 <h4>{{ actress.idolname }}</h4> 18 <a href="#"> 19 <img class="img-responsive" src="http://placehold.it/750x450" alt=""> 20 </a> 21 </div> 22 {% endfor %} 23 24 <hr> 25 26 <!-- Pagination --> 27 <div class="row text-center"> 28 <div class="col-lg-12"> 29 <ul class="pagination"> 30 <li> 31 <a href="#">«</a> 32 </li> 33 <li class="active"> 34 <a href="#">1</a> 35 </li> 36 <li> 37 <a href="#">2</a> 38 </li> 39 <li> 40 <a href="#">3</a> 41 </li> 42 <li> 43 <a href="#">4</a> 44 </li> 45 <li> 46 <a href="#">5</a> 47 </li> 48 <li> 49 <a href="#">»</a> 50 </li> 51 </ul> 52 </div> 53 </div> 54 <!-- /.row --> 55 56 <hr> 57 58 <!-- Footer --> 59 <footer> 60 <div class="row"> 61 <div class="col-lg-12"> 62 <p>Copyright © Your Website 2014</p> 63 </div> 64 </div> 65 <!-- /.row --> 66 </footer> 67 68{% endblock main %}
about.html
html
1{% extends "base.html" %} 2 3{% block main %} 4 This is about page 5{% endblock main %}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/25 18:06