HTML 静的 template_html/css_WEB-ITnose の継承-htmlチュートリアル-php.cn

HTML 静的 template_html/css_WEB-ITnose の継承

WBOY

リリース： 2016-06-21 09:06:09

オリジナル

1252 人が閲覧しました

ウェブサイトのテンプレートデザインには、一般に、ナビゲーション、下部、アクセス統計コードなど、ウェブサイトのいくつかの共通部分があります。合理的な計画テンプレートを使用すると、作業負荷が軽減されると同時に、乱雑で読みにくい静的なページレイアウトがエレガントになります。

私たちの Web サイトのメインページは、本文に加えて、ナビゲーションバー、下部の列、および統計列で構成されているとします。つまり、nav.html、bottom.html、tongji.html です。

ページを構築するとき、次のように、これらの共通ファイルをインクルードする Base.html を書くことができます:

<!DOCTYPE html><html><head>    <title>{% block title %}默认标题{% endblock %}</title></head><body> {% include 'nav.html' %}{% block content %}    <div>这里是默认内容，所有继承自这个模板的，如果不覆盖就显示这里的默认内容。</div>{% endblock %}{% include 'bottom.html' %}{% include 'tongji.html' %}</body></html>

ログイン後にコピー

ここで、すべてのインクルードは共通ファイルを導入し、ブロックは、base.html を継承する他のページを定義します。これらのモジュールを独自のページで再定義して、カバレッジと置換を実現します。

たとえば、base.html を継承して、base.html のタイトルとコンテンツのモジュールを置き換えるメインページのindex.html を設計します。以下は、index.html ファイルの内容です:

{% extends 'base.html' %}{% block title %}欢迎光临首页{% endblock %}{% block content %}{% include 'ad.html' %}这里是首页，欢迎光临{% endblock %}

ログイン後にコピー

このページを実行すると、元のbase.html のモジュールが置き換えられていることがわかります。