71日目 割烹芸人の実装2
テンプレって大事ですね。
さて、Topページも作れたので今回は共通テンプレートを作成して、これまで作ってきたものと合体させます。
共通テンプレートというのは、共通のヘッダやフッター、ナビゲーションメニューのことです。基本的にアプリケーション内ではどれも共通にしておくと統一感が出ます。
共通だからといって、これをいちいちもともとのHTMLに記述していたのでは、何か変更があった時にすべてのHTMLを直さないといけません。
Djangoではそれを防ぐためにテンプレートの作成と拡張機能が用意されています。
ということで、それを作っていきましょう。
今回は1カラム構造で、スマホでもPCでもあんまり差がないような作りにします。
ということで作ります。まずはtemplates/base.htmlからです。
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<meta content="" name="description">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="{% static 'base.css' %}">
<link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
{% block header %}{% endblock %}
</head>
<body class="base-body">
<header class="base-header"><img class="base-logo" src="{% static 'logo-min.png' %}"></header>
<main class="base-content">{% block content %}{% endblock %}</main>
<nav class="base-nav">nav</nav>
<footer class="base-footer">©割烹エディター</footer>
{% block script %}{% endblock %}
</body>
</html>
構造はヘッダー、メイン、ナビ、フッターの4層構造で。拡張する部分はheader, content, scriptにしておきます。
こんな感じに{% block xxx %}{% endblock %}と書いた部分にはめ込めるようになっています。
何か共通フォーマットに変更があった場合はこのファイルだけいじればいいので楽ですね。
さて、このままだと装飾されていないのでCSSも設定していきます。
static/base.cssを作ります。
.base-body{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
min-height: 100vh;
background-color: #222;
}
.base-header{
grid-column: 1;
grid-row: 1;
text-align: center;
background-color: #FFDF97;
}
.base-header img{
width: 80px;
}
.base-content{
grid-column: 1;
grid-row: 2;
background-color: #fff;
}
.base-nav{
grid-column: 1;
grid-row: 3;
text-align: center;
color: #f8f8f8;
padding: 5px;
}
.base-footer{
grid-column: 1;
grid-row: 4;
padding: 5px;
text-align: center;
background-color: #FFDF97;
}
@media (min-width: 900px) {
.base-body{
width: 900px;
box-sizing: border-box;
margin: auto;
}}
ResetcssはTopと同じ、あとはグリッド設定して、ヘッダーを作って、と、
こんな感じになりました。最大の横幅は900pxとしてます。まぁこれで共通部分は完了かな。ナビゲーションは後で設定します。
あとはそこにこれまで作ったエディターを突っ込むだけです。
アプリケーションの作成
python manage.py startapp editor
editorアプリケーションを作ります。
urlの設定
path('editor/',include('editor.urls')),
project/urls.pyに追加します。editor/urls.pyにも追加します。
app_name = 'editor'
urlpatterns = [
path('keditor/', views.Keditor.as_view(), name='editor_keditor'),
path('tategaki/', views.Tategaki.as_view(), name='editor_tategaki'),
path('', views.Editor_List.as_view(), name='editor_list'),
]
今のところ、editor/に使えるエディターのリストを表示させて、editor/keditor/でプレーンの割烹エディター、editor/tategaki/で縦書き割烹変換を呼び出す感じにしておきます。
editorの種類が増えたら追加する感じで。
viewの設定
class Keditor(generic.TemplateView):
template_name = 'editor/keditor.html'
class Tategaki(generic.TemplateView):
template_name = 'editor/tategaki.html'
class Editor_List(generic.TemplateView):
template_name = 'editor/editor_list.html'
この辺りは静的なのでテンプレートビューを継承して作りました。
templateの設定
{% extends 'base.html' %}
{% load static %}
{% block header %}
<link rel="stylesheet" href="{% static 'editor/editor.css' %}"
{% endblock %}
{% block content %}
editorlist
{% endblock %}
とりあえず仮。
URLもよさそうです。
あとはスタイルを整えておきます。といっても単にフォームを並べるだけですが。
構造は全部おなじにで、上側に入力フォーム、下にソースコードが出力されるtextareaを配置します。
小説家になろうのデザインと同じ感じにしておくと親和性が出るのであまり凝ったデザインにはしません。
ということで、エディターの追加が終わりました。
とりあえずこんな感じかな。
なんとかなりそうでよかった……
