ブロックを持つベーステンプレートを定義する
上書き可能なブロック領域を持つレイアウトを作成します
「ブロックを持つベーステンプレートを定義する」はCoddyKit上の無料Flask Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFlask Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Flask Academyコースには全4レッスンが含まれています。
レイアウトはどのページにも繰り返し登場する
サイトのすべてのページで、同じヘッダー、ナビゲーション、フッターを使います。そのHTMLを各テンプレートにコピーすると、保守が困難になります。ベーステンプレートで解決できます。🧩
1つの骨組みから複数のページを作る
ベーステンプレートにHTMLの完全な骨組みを一度だけ記述します。子ページはそれを再利用し、異なる部分だけを埋めるため、共通のマークアップを1つのファイルにまとめられます。
ブロックで空きを示す
ベース内のブロックは、子ページが上書きできる領域を示します。ブロックの外側は固定され、すべてのページで共有されます。
ブロックを宣言する
名前付きのblockタグで領域を開始し、endblockで終了します。その間にある内容が、その領域のデフォルトコンテンツになります。
<title>{% block title %}My Site{% endblock %}</title>実際のベースの骨組み
このbase.htmlでは、doctype、head、bodyを一度だけ定義します。ページがカスタマイズするのはtitleブロックとcontentブロックだけです。
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Site{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>ブロックには分かりやすい名前を付ける
各blockには、content、title、sidebarのような説明的な名前を付けます。子ページが上書きするときは、その正確な名前でブロックを参照します。
ブロックにはデフォルト値を設定できる
blockタグの間にある内容はデフォルトになります。子ページがブロックを上書きしなければ、訪問者にはこの代替テキストが表示されます。
{% block footer %}© CoddyKit{% endblock %}ベースファイルの置き場所
レイアウトはtemplatesフォルダーに置き、通常はbase.htmlという名前にします。子テンプレートはこのパスを指定して、ベーステンプレートを継承します。
コーディング前にブロックを計画する
実際に変わるページ領域を考えてみましょう。タイトル、本文、場合によってはサイドバーなどです。変化する各領域を、ベースレイアウトの1つのblockにします。
Blocks Can Nest
blockは、styles blockを保持するhead blockのように、別のblockの中に置けます。ネストを使うと、領域全体を定義し直さずに細かな部分を調整できます。
Less Markup to Maintain
ベーステンプレートを使うと、navを一度更新するだけで、すべてのページが同時に変わります。この単一の信頼できる情報源こそ、共有layoutの目的です。✨
Quick Check
ベーステンプレートでblockタグを使う目的は何ですか?
Recap: Base Templates
base templateは共通のマークアップを一度だけ保持し、名前付きblockをカスタマイズ可能な差し込み口として公開します。次は、子ページからこのベースを拡張します。🎯
AI チューターと学ぶ Python — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「ブロックを持つベーステンプレートを定義する」レッスンは無料ですか?
はい。「ブロックを持つベーステンプレートを定義する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Flask Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flask Academyコースには全4レッスンが含まれています。
「ブロックを持つベーステンプレートを定義する」で何を学びますか?
上書き可能なブロック領域を持つレイアウトを作成します ブラウザで直接実行するハンズオンコードでFlask Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Flask Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのFlask Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「ブロックを持つベーステンプレートを定義する」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFlask Academyレッスンでコードを書いて実行できますか?
はい。すべてのFlask Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ブロックを持つベーステンプレートを定義する
- 子ページでベースを拡張する
- 再利用可能なパーシャルをインクルードする
- 繰り返し使うマークアップをマクロにする