February 21, 2021
←前回：Day 37 Djangoで移動できるWebサイトを作成する
「Djangoを一から学びたい」とのことでありましたら[Day 1]Djangoの開発環境から読むことをおすすめします。
はじめに
これは日記として書いています。
誰かの役に立つことを想定していません。
技術的な参考にはならないかと思うので、他のQiitaの記事を読むことをおすすめします。
今日やったこと
・_footer.htmlの追加
・base.htmlの追加
・〇〇さんようこそ!の作成
・/aboutのページのバリエーションを増やす
・スキルの表示
・名前の選別
・現在時刻の表示
・_footerの変更
の計5つです。
_footer.htmlの追加
templatesに新たなHTMLファイルを作成した。
これはただのHTMLです。
<div>
<p>Copyright 2018-</p>
</div>
base.htmlの追加
base.htmlも追加
今後はこのbase.htmlをベースにHTMLを作成していきます。
{% load static %}
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
</head>
<body>
{% include '_navber.html' %}
{% block main %}
{% endblock %}
{% include '_footer.html' %}
</body>
</html>
cssを使ったらloadが必要になったので追加しました。(1行目)
あと、blockタグを使ってindex.htmlとabout.htmlの方をシンプルにしました。
index.htmlとabout.htmlの変更
indexの方には画像を追加しておきました。
{% extends 'base.html' %}
{% load static %}
{% block main %}
<h1>ホーム</h1>
<img src="{% static 'welcome.jpg' %}" />
{% endblock %}
{% extends 'base.html' %}
{% block main %}
<h1>自己紹介</h1>
{% endblock %}
〇〇さんようこそ!の作成
〇〇さんようこそ!としたいのでindex.htmlを変更し、views.pyに関数を追加しました。
{% block main %}
<h1>ホーム</h1>
<h1>{{ username }}さんようこそ！</h1>
<img src="{% static 'welcome.jpg' %}" />
{% endblock %}
class IndexView(TemplateView):
template_name = 'index.html'
def get_context_data(self):
ctxt = super().get_context_data()
ctxt['username'] = '名無し'
return ctxt
/aboutのページのバリエーションを増やす
・カンマ区切りの数字を表示する
{% extends 'base.html' %}
{% load humanize %}
{% block main %}
<h1>自己紹介</h1>
<h2>実績</h2>
<p>これまでに{{ num_services|intcomma }}個のサービスを作りました！</p>
<h2>スキル</h2>
<ul>
<li>Python</li>
<li>C言語</li>
<li>Swift</li>
<li>Java</li>
<li>PHP</li>
</ul>
{% endblock %}
viewを変えます。
いつもと一緒です。
class AboutView(TemplateView):
template_name = 'about.html'
def get_context_data(self):
ctxt = super().get_context_data()
ctxt['num_services'] = 12345678
return ctxt
settingの追加
about.htmlでhumanizeをloadしたのでsettingに追加していきます。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
+ 'django.contrib.humanize',
'website',
]
・スキルの表示
viewの追加
def get_context_data(self):
ctxt = super().get_context_data()
ctxt['num_services'] = 12345678
ctxt['skills'] = [
'Python',
'C',
'Swift',
'PHP',
'Go',
]
return ctxt
about.htmlの変更
<h2>スキル</h2>
<ul>
{% for skill in skills %}
<li>{{ skill }}</li>
{% empty %}
<li>スキルがありません</li>
{% endfor %}
</ul>
{% endblock %}
・名前の選別
index.htmlの変更
ここでは名前の選別をしたというよりも、if文を学んだということになります。
{% block main %}
<!-- <h1>{{ username }}さんようこそ！</h1> -->
{% if username == 'Kizashi' %}
<h1>自分です</h1>
{% elif username %}
<h1>{{ username }}さん,ようこそ！</h1>
{% else %}
<h1>匿名さん,ようこそ！</h1>
{% endif %}
・現在時刻の設定
about.htmlの変更
<h1>自己紹介</h1>
<h2>実績</h2>
<p>{% now 'Y-m-d H時i分' %}現在までに{{ num_services|intcomma }}個のサービスを作りました！</p>
<h2>スキル</h2>
setting.pyの変更
TIME_ZONE = 'Asia/Tokyo'
・_footerの変更
<div>
<p>Copyright 2018-{% now 'Y' %}</p>
</div>
おわりに
今後は毎日続けれるように工夫したいと思います。
まずそのためには、自分のできる最低限までレベルを下げることが重要なので、今までのような解説口調はやめようと思います。（かなり大変なので。。。）
今日やったことをすべて載せて、書き方が多少汚くても構わず進めていきます。
それではまたまた
←前回：Day 37 Djangoで移動できるWebサイトを作成する
→次回：Day 39 djangoで静的ファイルの使用方法