Flask Academy · レッスン

ブロックを持つベーステンプレートを定義する

上書き可能なブロック領域を持つレイアウトを作成します

レッスン 1/413 ステップ

「ブロックを持つベーステンプレートを定義する」は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 %}&copy; 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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ブロックを持つベーステンプレートを定義する
  2. 子ページでベースを拡張する
  3. 再利用可能なパーシャルをインクルードする
  4. 繰り返し使うマークアップをマクロにする
← Flask Academyに戻る