Flask Web Development　P31～36

2021年10月12日 21:38

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

リンク

リンクを直接コード内に直接書くのは、メンテとかリンク切れとかで対応するのが面倒くさいので、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'とかを入れずに作成できました。

静的ファイルの読み込み

ファビコンの画像などの表示をする時には、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()などが使えるらしいです。

ちなみに、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分前

この記事が気に入ったらサポートをしてみませんか？

Flask Web Development P31～36

Flask Web Development　P31～36