Flask Web Development P31~36

Flask

リンクと静的ファイルとときどき時間

スポンサーリンク

リンク

リンクを直接コード内に直接書くのは、メンテとかリンク切れとかで対応するのが面倒くさいので、URL_for()という関数を使います。
URL_for()はhtmlの一部に、ファイル名を書き込むことで簡単にリンクが作れます。

base.htmlの一部をこんな感じに書き換えてみると

<ul class="nav navbar-nav">
   <li><a href="{{url_for('index')}}">Home</a></li>
   <li><a href="{{url_for('user', name= 'john')}}">About us</a></li>
   <li><a href="/">How to</a></li>
</ul>

Homeからindexへ、About usからuer/johnへ飛ぶリンクが’http://xxx.jp’とかを入れずに作成できました。

Flaskのページリンクで@app.route()とurl_for()の中身がややこしくなる問題について - Qiita
はじめに pythonでwebアプリケーションを作成しているときに(flaskで),なんかいまいちflaskのルートについて理解できなかったので備忘録兼実験を含めて書いていきましたよ.いかに結論的なコードを示しておきます. #...

静的ファイルの読み込み

ファビコンの画像などの表示をする時には、staticというフォルダを作っておいてそこに画像を置いておくとBootstrapはそのファイルの中を読み込みます。
以前作成したtemplatesと同じ階層にstaticというフォルダを作成して、favicon.iconを置いていきましょう。
favicon.iconは画像ファイルであればなんでもいいです。名前をfavicon.iconとしておきましょう。

base.htmlの{% block title %}と{% block navbar %}の間に以下の様な文面を入れましょう。

{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
{% endblock %}

どのページに行ってもファビコンが無事に表示されるはずです。

時刻

この記事最後のトピックです。

ユーザーが居る国に応じた時間を表示させることは重要&可能です。
とりあえず、flask-momentをインストールしていきましょう。

> conda install -c conda-forge flask-moment

hello.pyはこんな感じ

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from datetime import datetime

app = Flask(__name__)
bootstrap = Bootstrap(app)
moment = Moment(app)

@app.route('/')
def index():
   return render_template('index.html', current_time=datetime.utcnow())

@app.route('/user/<name>')
def user(name=None):
   return render_template('user.html', name=name)

@app.errorhandler(404)
def page_not_found(e):
   return render_template('404.html'), 404

@app.errorhandler(500)
def internal_server_error(e):
   return render_template('500.html'), 500

if __name__ == '__main__':
   app.run(debug=True)

base.htmlは{% block content %}

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
<p>The local date and time is {{ moment(current_time).format('LLLL') }}.</p>
<p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>
{% endblock %}

ここでLからLLLLの間で時間の表示を変更できます。
LLLL = Monday, June 21, 2021 8:30 AM
LLL = June 21, 2021 8:31 AM
LL = June 21, 2021
L = 06/21/2021

fromNow()は時間が更新された時間が何分前かを表示します。

Flask-Momentはその他format(), fromNow(), fromTime(), calendar(),
valueOf(), and unix()などが使えるらしいです。

Moment.js | Docs

ちなみに、base.htmlに{{ moment.lang(‘ja’) }}を入れると日本語になるっす。

base.htmlはこんな感じ

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{{ moment.lang('ja') }}
<p>The local date and time is {{ moment(current_time).format('LLLL') }}.</p>
<p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>
{% endblock %}

んで表示はこんな感じ

The local date and time is 2021年6月21日 月曜日 08:42.

That was 1分前
Amazon | Flask Web Development: Developing Web Applications with Python | Grinberg, Miguel | Software Development
Amazon配送商品ならFlask Web Development: Developing Web Applications with Pythonが通常配送無料。更にAmazonならポイント還元本が多数。Grinberg, Miguel作品ほか、お急ぎ便対象商品は当日お届けも可能。

前回の記事はこちら

次回の記事はこちら

タイトルとURLをコピーしました