[Python Flask]レイアウトの継承方法

こんにちは。

この記事では、Python Fraskのhtmlのレイアウトを継承する方法を書きます。

この記事が誰かの役に立ったら幸いです。

概要
ベースのHTML/CSS
継承するHTML
1. 1ページ目
2. 2ページ目
Fraskのスクリプト
まとめ

概要

複数のページのアプリを作成しようとしたとき、それらのそれぞれのページに共通したレイアウトをいちいちコードで書くのは面倒。
かと言って、ページごとにレイアウトが異なっていたらダサい。

なので、一つ共通のレイアウトのコードを書き、それらを自動で反映させたい。

テンプレートの継承

これは、「テンプレートの継承」を使用すれば、楽に実現できる。
テンプレートを継承すると、その基本的なレイアウト(HTML/CSSのコード)をそのまま受け継がれる。
(つまり、継承元のHTMLをそのまま表示させることができる)

継承の指定：{% extends “ファイル” %}

extendsの後に、継承するファイルを書く。
記載するファイルは「templates」に格納しておく。

これで、継承することができる。

ブロック

継承したくても、まったく同じHTMLにはしたくない。
継承元のHTMLを受け継ぎつつも、新しいページでは微修正や独自の表現を使用したい。

そんなとき、「ブロック」という機能で実現することができる。

ブロックは、ひとかたまりのコンテンツを当てはめるための領域。

まず、ベースとなるテンプレートで、レイアウトの中にブロックを作る。
そのテンプレートを継承して作成された新しいテンプレートでは、継承元に組み込まれているブロックの内容だけを書く。そうすると、各ブロックが継承元のテンプレートのブロックにはめ込まれ、HTMLを作成することができる。

ブロックの記述：{block 名前 %}表示するコンテンツ{% endblock %}

これで、記載したコンテンツが継承元のブロック部分にはめ込まれて、ベースレイアウトが継承できるようになる。

例

１ページ目と2ページ目で同じレイアウトにしたいとき、
上記を使用すれば、同じコードを書かずに済む。

つまり、時間短縮できる！！

1ページ目

2ページ目
継承することで簡単に、同じレイアウトを簡単に作成することができる。
1pageから2pageに移動したが、レイアウトが同じになっていることが分かる。
コードは↓に記載する

ベースのHTML/CSS

ベースとするHTML/CSSを以下のように書いた。
(ブロックは全部で4つ書いています)

ファイル名：./tampaktes/layout.html


<!doctype html>
<html lang="ja">
<head>
    <title>{% block title %}{% endblock %}</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet"
        href="{{url_for('static', filename='style.css')}}">
</head>
<body>
    <div class="test">
        <div class="target">
            <h1 style="font-size: 50px;">{% block headline %}{% endblock %}</h1>

                <div style="font-size: 40px;">{% block content %}{% endblock %}</div>

                <div class="footer">
                    {% block footer %}{% endblock %}
                </div>
        </div>
    </div>
</body>
</html>
[\html]

ファイル名：./static/style.css

<pre class="wp-block-syntaxhighlighter-code">
html,body {height:100%;}
div.test{
    display:table;
    width:100%;
    height:100%;
    background-color:rgb(135, 219, 252);
    text-align:center;
    }
  div.test .target{
    display:table-cell;
    vertical-align:middle;
    } 
div.footer{
    font-size: 20px;
    border-bottom: 10px solid rgb(135, 250, 196);
    } 
</pre>

title,headline,footerは、いずれもテキストを指定するだけで、
今後はcontentにだけ、htmlを使った複雑な表示コンテンツを記述することになると、思う。

{% block title %}

titileを設定できるタイトルテキストを指定する

{% block headline %}

Webページの冒頭に表示するタイトルを指定する

{% block content %}

ページに表示するコンテンツ部分

{% block footer %}

フッター情報のテキストを指定する

継承するHTML

ベースのHTMLを継承するHTMLを以下のように書いた

最初に{% extends “layout.html” %}を記述して継承を宣言して、以後は用意した4つのブロックの内容を記載しているだけ。

まるまる書くよりも、継承をつかうことで楽に書ける。

1ページ目

ベースを継承する1ページ目は以下のように書いた

ファイル名：./templates/index.html

<pre class="wp-block-syntaxhighlighter-code">
{% extends &amp;amp;quot;layout.html&amp;amp;quot; %}
{% block title %}
index
{% endblock %}

{% block headline %}
{{title}}
{% endblock %}

{% block content %}
&amp;amp;amp;lt;p&amp;amp;gt;{{message}}&amp;amp;amp;lt;/p&amp;amp;gt;
{% endblock %}

{% block footer %}
coryright 2020 Rope_blog
{% endblock %}
</pre>

2ページ目

ベースを継承する2ページ目は以下のように書いた。

ファイル名：./tempalates/next.html

<pre class="wp-block-syntaxhighlighter-code">
{% extends &amp;amp;quot;layout.html&amp;amp;quot; %}
{% block title %}
Next
{% endblock %}

{% block headline %}
{{title}}
{% endblock %}

{% block content %}
&amp;amp;amp;lt;p&amp;amp;gt;{{message}}&amp;amp;amp;lt;/p&amp;amp;gt;
&amp;amp;amp;lt;pre&amp;amp;gt;{{data}}&amp;amp;amp;lt;/pre&amp;amp;gt;
{% endblock %}

{% block footer %}
coryright 2020 Rope_blog
{% endblock %}
</pre>

Fraskのスクリプト

fraskのスクリプトは以下のように書いた。
関数indexと関数nextを2つ用意して、url事にgetで呼び出せるようにしている。

ファイル名；main.py

<pre class="wp-block-syntaxhighlighter-code">
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET'])
def index():
    return render_template('index.html', \
        title=&quot;Welcome to Rope_Blog&quot;,\
        message=&quot;page1&quot;,\
    )  
@app.route('/next', methods=['GET'])
def next():
    return render_template('next.html', \
        title=&quot;Welcome to Rope_Blog&quot;,\
        message=&quot;page2&quot;,\
    )  
if __name__ == '__main__':
    app.debug=True
    app.run(),
</pre>