Q&A前提・実現したいこと
Djangoでウェブアプリを作っています。
機能としてはMastodonのクライアントですが、まだそこまで到達しておらず、Djangoとテンプレートで躓いている段階です。
staticのロードやテンプレートの継承、blockタグなど基本的な使い方は知っています。
発生している問題・エラーメッセージ
Djangoのテンプレートエンジンを使い、一つ一つページを作っています。
最低限の要素のみのページの段階でテスト的に表示したところ、表示自体は意図したとおりにされたことを確認したのですが、
ふとChromeのDevtoolsで検証してみると、継承元のHTMLでheadタグに入れていた要素が全てbodyに移動されていました。
該当のソースコード
テンプレートのHTMLは次のとおりです。
html:appbase.html
1{% load static %} 2<!DOCTYPE html> 3<html lang="ja"> 4 <HEAD> 5 <title>g+don</title> 6 <meta charset="utf-8"/> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 9 <link rel="shortcut icon" href="{% static "gplusdon/images/app_icon.png" %}" > 10 <link rel="stylesheet" href="{% static "gplusdon/lib/materialize/css/materialize.min.css" %}" > 11 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 12 13 <link href="{% static "gplusdon/lib/alertify/css/themes/bootstrap.css" %}" rel="stylesheet" > 14 <link href="{% static "gplusdon/lib/alertify/css/alertify.css" %}" rel="stylesheet" > 15 16 <link href="{% static "gplusdon/css/index.css" %}" rel="stylesheet" > 17 </HEAD> 18 <body> 19 <div id="toppanel" class="grey lighten-3"> 20 <div class="navbar-fixed"> 21 <nav id="navibar" class="white"> 22 <div class="nav-wrapper"> 23 <div class="row"> 24 <div class="col s6 m4 l4"> 25 <a href="#" data-target="slide-out" class="sidenav-trigger show-on-medium-and-down"><i class="material-icons black-text">menu</i></a> 26 <img id="img_brand" class="brand-image hide-on-med-and-down" src="{% static "gplusdon/images/app_icon.png" %}" width="{{ imgsize }}" height="{{ imgsize }}"> 27 <span class="brand-title black-text">G+don</span> 28 </div> 29 <div class="col s2 m4 l5 "> 30 <form class="hide-on-med-and-down"> 31 <div class="input-field col s12" style="padding:2px 0 2px 0;"> 32 <input id="search" type="search" class="navsearch grey lighten-3" placeholder="search any"> 33 <label class="label-icon" for="search"><i class="material-icons black-text">search</i></label> 34 <i class="material-icons black-text">close</i> 35 </div> 36 </form> 37 </div> 38 <div class="col s4 m4 l3"> 39 <ul class="right"> 40 <li><a href="#" class="hide-on-small-only"><i class="material-icons black-text">search</i></a></li> 41 <li><a href="#" class="hide-on-small-only"><i class="material-icons black-text">refresh</i></a></li> 42 <li><a href="#"><i class="material-icons black-text">more_vert</i></a></li> 43 </ul> 44 </div> 45 46 </div> 47 </div> 48 </nav> 49 </div> 50 <div id="mainpanel"> 51 <div class="row"> 52 <div id="maincol_leftmenu" class="col l3 hide-on-med-and-down"> 53 <div class="collection"> 54 <a href="#" class="collection-item maincol_menu"><i class="material-icons red-text">edit</i><span class="red-text">Toot</span></a> 55 <a href="gplusdon/start" class="collection-item maincol_menu"><i class="material-icons">info</i><span>Start</span></a> 56 <a href="#" class="collection-item maincol_menu"><i class="material-icons">account_circle</i><span>Account</span></a> 57 <a href="#" class="collection-item maincol_menu"><i class="material-icons">view_day</i><span>Timeline</span></a> 58 <a href="#" class="collection-item maincol_menu"><i class="material-icons">email</i><span>Direct message</span></a> 59 <a href="#" class="collection-item maincol_menu"><i class="material-icons">star</i><span>Favourites</span></a> 60 <a href="#" class="collection-item maincol_menu"><i class="material-icons">list</i><span>Lists</span></a> 61 </div> 62 </div> 63{% block content %}{% endblock %} 64 </div> 65 </div> 66 67 </div> 68 69 <script src="{% static "gplusdon/lib/cookies.js" %}"></script> 70 <script src="{% static "gplusdon/lib/jquery.min.js" %}"></script> 71 <script src="{% static "gplusdon/lib/materialize/js/materialize.min.js" %}"></script> 72 73 <script src="{% static "gplusdon/lib/mastodon.js" %}"></script> 74 75 <!-- user include --> 76{% block userinclude %}{% endblock %} 77 </body> 78</html>
html:onetoote.html
1{% extends "gplusdon/appbase.html" %} 2{% load static %} 3 4{% block content %} 5<div id="maincol_rightmain" class="col s12 m12 l9"> 6<strong>ほげ</strong> 7</div> 8{% endblock %} 9 10 11{% block userinclude %} 12<script src="{% static "gplusdon/js/util.js" %}"></script> 13<script src="{% static "gplusdon/js/clientclass.js" %}"></script> 14<script src="{% static "gplusdon/js/index.js" %}"></script> 15{% endblock %}
Python側のコードは次のとおりです。（実際には他のページのdefもありますが、省略しています。
python:view.py
1from django.shortcuts import render 2from django.http import HttpRequest, HttpResponse, HttpResponseRedirect, HttpResponseBadRequest, HttpResponseServerError 3from django.template import RequestContext, Context, loader 4from datetime import datetime 5 6# Create your views here. 7 8 9def gplusdon_toote_detail(request): 10 """Renders g+don""" 11 assert isinstance(request, HttpRequest) 12 return render( 13 request, 14 'gplusdon/onetoote.html', 15 {"imgsize":52} 16 ) 17
URLマッピング用のPythonコードは次のとおりです。（本件に関係ないURLは省略しています。）
python:urls.py
1""" 2Definition of urls for testapp. 3""" 4 5from django.conf.urls import include, url 6from apps.views import * 7 8# Uncomment the next two lines to enable the admin: 9#from django.contrib import admin 10#admin.autodiscover() 11 12urlpatterns = [ 13 # Examples: 14 # Uncomment the admin/doc line below to enable admin documentation: 15 # url(r'^admin/doc/', include('django.contrib.admindocs.urls')), 16 17 url(r'^$', home, name='home'), 18 url(r'^gplusdon/tt$', gplusdon_toote_detail,name='gplusdon_toote_detail'), 19 20 # Uncomment the next line to enable the admin: 21 #url(r'^admin/', include(admin.site.urls)), 22] 23
試したこと
Djangoは最初2.0.5で、最新の2.1.2にアップデートして試しましたが、結果は同じでした。
補足情報（FW/ツールのバージョンなど）
Python 3.6.2
Django 2.0.5 → 2.1.2
コード中の不備・過不足等ございましたら、どうかアドバイスいただけますようよろしくお願い致します。
もしさらに情報が必要でしたら追記します。
回答1件
0
自己解決
すみません。自己解決しました。
UTF-8 BOM付きで保存していたのがいけなかったようです。
投稿2018/10/18 01:55
総合スコア12
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。