七、テンプレートベース

1 、テンプレートパスを設定します

前のセクションでは、チェックアウトしたデータは、サイトの開発に沿って明確でないブラウザへの文字列として返されます。これらの内容は明らかに非現実的な文字列として書かれている場合には格好良いインターフェイスは、CSS、HTML、JSを使用するようにバインドされていることにします。

この問題を解決するために、Djangoテンプレートを使用して

ビューによって呼び出されたフロントページのテンプレートに記述され、その後、ブラウザに戻りました。

setting.pyプロファイルテンプレートではDjangoの負荷を設定する方法について説明し、テンプレートをレンダリングします。

内容：

2 、テンプレートの名前空間

私たちは、ブログ/テンプレートに私達のテンプレートを指示することができますが、実際にそうすることは非常に面倒になります。Djangoは、それはあなたが別のアプリケーション・テンプレート・ファイルに同じ名前を持っている場合、Djangoはそれらを区別することはできません、テンプレートファイルに一致する最初の名前を見つけ選択します。我々は正しいDjangoテンプレートを指す必要があり、最も簡単な方法は、名前空間を使用することです。具体的な実装では、別のディレクトリにこれらのテンプレートファイルは、アプリケーションにちなんで名付けられたということです。

3 、カスタムテンプレート

Djangoのテンプレート、htmlファイルが、テンプレート言語の独自のセットによって。

次のようにテンプレートの構文で出力変数があり、それは、テンプレート内のシステム定義テンプレートの変数の属性にアクセスするには、ドットシンタックスを使用するかもしれない、上、変数は、ビューから渡されていてもよいです。

テンプレート構文内のコードセクションを書きます：

たとえば：objectパラメータは、ビューのテンプレートに渡さ。テンプレートオブジェクトのプロパティを使用する必要がある場合は、使用してオブジェクトを。NAME属性のアクセスを。

テンプレートを書きます：

/blog/templates/personal_blog/title.html

テンプレートは3つの段階に分かれて呼び出します。

テンプレートをレンダリングするテンプレート定義のコンテキストを探します

テンプレートを使用して表示するビューのタイトルを作成します。

設定URL：

ブラウザのアクセス http://127.0.0.1:8000/blog/title/は、リストのような形を記事のタイトルを見ることができるはずです。

4 、レンダリングの高速レンダリング機能

Djangoテンプレートは、一般的な方法を呼び出すやすくするために、関数テンプレートへの迅速な呼び出しを提供し、テンプレートをロードするコンテキストを記入し、結果をレンダリングするテンプレートを含むHttpResponseオブジェクトを返す、Djangoのことです。

ショートカット機能は、ビューをオーバーライドする使用します。

レンダリング（）関数は、その最初のパラメータとして第2引数は、テンプレート第3引数コンテキストデータとしてテンプレート名をオブジェクトに要求します。それはHttpResponseオブジェクトを返し、指定されたコンテキストでレンダリングテンプレートが含まれています。

八、ブログのホーム

1 、記事ホーム

テンプレートテンプレート/ personal_blogディレクトリ内のindex.htmlを作成します。記事を表示するためにホームページを作るために使用されます。良い点を探すためには、いくつかのCSSスタイルを追加しました。

マージン：0自動; 高さ：60PX;

}

#navList李{

フロート：左; 高さ：60PX; 行の高さ：60PX;

リストスタイルのタイプ：なし。

}

#navList {

パディング：0 20ピクセル; フォントサイズ：16pxに; 表示ブロック; カーソル：ポインタ;

テキスト装飾：なし; 色：#FFF;

テキストの影：3px 3px 3px＃000;

}

#navList A：ホバー{背景：#FFF。

}

.forFlow {

幅：1200px; マージン：25ピクセルオート;

}

.dayTitle {色：#FFF。

パディング：計6Px計6Px。

フォントサイズ：12ピクセル; 表示ブロック; フロート：左; マージン右：10pxの;

}

.dayTitle {

色：#FFF;

テキスト装飾：なし; フォント重量：太字;

}

・day以下.postTitle {フォントサイズ：21px;

行の高さ：1.5em; フロート：左; クリア：右;}

・day以下.postTitle {

テキスト装飾：なし; 色：＃555;

}

・day以下.postTitle：ホバー{色：＃0e90d2。

テキスト装飾：なし;

}

.postCon {

フォントファミリ：マイクロソフトエレガントなブラック;パディング：15ピクセル0;クリア：両方;

}

.postDesc {クリア：両方。色：#bcbcbc。フロート：なし。テキスト整列：左;

行の高さ：200％; フォントサイズ：12ピクセル;

}

.readmore {

色：＃1 9ab26b。

テキスト装飾：なし;

}

</スタイル>

</ head>の

<身体>

<ulのID = "navList">

</ UL>

{post_list％でpの％}

<a href=""> {{}} p.created_timeする</a>

</ div>

<aのclass="" href=""> {{}} p.titleする</a>

</ div>

<DIV CLASS = "c_b_p_desc">摘要：＆NBSP;＆NBSP;＆NBSP; {{p.content |スライス： '100'}} {＃

|スライスフィルタ、服用のみ最初の100 文字の＃}

<a href=""のclass="readmore">阅读全文する</a>

ビュー機能：

設定URL：

サーバーを再起動しますブラウズ http://127.0.0.1:8000/blog/index/ 次のような効果があります

2 、記事詳細ページ

記事のタイトルをクリックすると、フルテキストは記事の詳細ページにリンクされなければならないお読みください。テンプレート/ personal_blog / detail.html詳細ページモジュールを書きます：

詳細ページの記事を知る必要のために詳細ページビュー、。要求のすべての要件は、文書番号を表示するために渡されますとき。

Configuration詳細ページのURL、IDが使用パターンurlパラメータ抽出を取得します。

ビューでは、URLビューでIDを渡す必要があるので、idパラメータを受信する必要があるので、全文を読むためのURLリンクとタイトルページを変更します。

サーバーが再起動し、詳細ページにアクセスしようとします：

ベースモデルジャンゴ