勝手にチュートリアル4.1 見ため編

Djangoドキュメントのチュートリアルその４の続きを勝手にやってみた第１回。
チュートリアルでできたものを、ただ主観的に見栄えよくしたいための手順メモ。

まずはCSSとHTMLの勉強から。

CSSレイアウト実践講座とスタイルシートリファレンス（ABC順）で大雑把に把握。
デザインおこすと時間かかるので、とりあえず~~poromeria.comの~~{neut}さん作のCSS＋HTMLテンプレート「n010 chocomint」を拝借。ともてもキュートなデザインお借りします。
（時間ができたらデザイン考える予定。）

今回、使うファイルは「n010 chocomint」のtop.htmlとstyle.cssのみです。
早速ですがファイル名を変えます。top.htmlをbase.htmlへ、style.cssはそのまま。

ファイルを置く場所

ルートフォルダにtemplatesとstaticを置きたいので、ディレクトリを作成してsetting.pyのBASE_PATHとTEMPLATE_DIRSを書き換え。

import os
BASE_PATH = os.path.dirname(__file__ )

TEMPLATE_DIRS = (
    os.path.join(BASE_PATH, 'templates'),
)

各ファイルを以下に置く。

mysite/templates/base.html
miysite/static/css/style.css

UTF-8、LFに変換

トラブルの無いように、文字コードをUTF-8に改行をLFに変換しておきます。
例：emacsの場合。
テキストを開いて下記コマンドでで変換。

C-x RET f utf-8-unix

style.cssの先頭行を書き換える

@charset "UTF-8";

base.htmlをcharsetをUTF-8に

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"">

base.htmlの中を少々書き換える。

スタイルシートの場所を/static/css/style.cssに指定。

<link rel="stylesheet" type="text/css" href="/static/css/style.css">

サイト名（仮）を任意で変更。（暫定でMYSITE）
下記表記になってるところを変える。

<h1><em>c</em>h<em>o</em>c<em>o</em>m<em>i</em>n<em>t</em></h1>

テンプレートを生かしてemを1文字おきにではさんでカラフルにするか

<h1><em>M</em>Y<em>S</em>I<em>T</em>E</h1>

もしくはシンプルに。

<h1>MYSITE</h1>

次はタイトル

<title>{% block title %}タイトル{% endblock %}</title>

メニュー（仮）
後日トップページ制作予定（リンク飛ぶとエラー）

<ul id="menu">
<li><a href="/" title="TOP" class="on"><span class="num">01.</span>Top;</a></li>
<li><a href="/polls/" title="POLLS"><span class="num">02.</span>POLLS;</a></li>
</ul>

『About this templateここから』と表記されている部分を下記に変更。

<!-- About this templateここから -->
<div class="textbox">
{% block main %}

{% endblock %}
</div><!-- END div.textbox -->
<!-- About this templateここまで -->

とりあえずこれでbase.htmlは終わり。
いらない表記は後で取り除く。

base.htmlをextendsで継承する。

次にtemplates/polls/にあるindex.html、detail.html、results.html各ファイルの先頭と一番下に下記を追加。
先頭に

{% extends "base.html" %}
{% block title %}POLL{% endblock %}
{% block main %}

一番下に

{% endblock %}

h1をh2に

着せ替えテンプレートプロジェクトの仕様？でh1はサイトタイトルになる大きな文字指定なので、templates/polls/detail.htmlとresults.htmlに書いてあるh1をh2に変える。

静的なファイル

ルートフォルダのurl.pyに以下を追加。
理由はhttp://ymasuda.jp/python/django/docs/index.html:titleドキュメントの静的なファイルの提供方法あたりを参照。

from django.conf import settings
import os

#---省略---

if settings.DEBUG:
    urlpatterns += patterns('',
                            (r'^static/(?P<path>.*)',
                             'django.views.static.serve',
                             {'document_root' : os.path.dirname(__file__) +
                              '/static'}),
                            )

pollsの表示にリンク

templates/polls/index.htmlを変更

{% extends "base.html" %}
{% block title %}POLL{% endblock %}

{% block main %}

{% if latest_poll_list %}
<ul>
  {% for poll in latest_poll_list %}
      <li><a href="/polls/{{ poll.id }}">{{ poll.question }}</a></li>
  {% endfor %}
</ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

{% endblock %}