読者です 読者をやめる 読者になる 読者になる

牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

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

Django

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


まずは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 %}

これでWhat's upをクリックするとdetail.htmlに飛んで、そこからresult.htmlに飛ぶはず。
とりあえずできあがり。

Screenshot

こんな画面だったのが(´・ω・`)

こうなりました(゚Д゚)


あれ...手間かかった割にあまりぱっとしない感じorz
コンテンツがたりないからかな?
う〜む。



Web標準XHTML+CSSデザイン  クリエイターが身につけておくべき新・100の法則。Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
加藤 善規 平澤 隆 両見 英世

インプレスジャパン 2007-07-03
売り上げランキング : 4353
おすすめ平均

Amazonで詳しく見る
by G-Tools


実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
市瀬 裕哉 福島 英児 望月 真琴

九天社 2007-02
売り上げランキング : 1197
おすすめ平均

Amazonで詳しく見る
by G-Tools