Flask Web Development P31～36

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

リンク
静的ファイルの読み込み
時刻

リンク

リンクを直接コード内に直接書くのは、メンテとかリンク切れとかで対応するのが面倒くさいので、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.co.jp

前回の記事はこちら

次回の記事はこちら

リンク

静的ファイルの読み込み

時刻

コメント