JavaScriptを有効にしてください

【Flask】flask-appbuilder を使ったwebアプリにfaviconを表示させたい

 ·  ☕ 2 分で読めます · 👀... ページ閲覧数
この記事は2019/12/12にQrunchに掲載した内容です。
(Qrunchのサービス終了に伴いこちらに引っ越ししました)

まとめてアウトプットすることも大事ですが、少しずつ小さな単位でアウトプットし、後からまとめることの大切さも実感する今日この頃です。

必要最低限の記述ですみません。

やりたいこと

flask(flask-appbuilderプラグイン利用)でwebアプリ起動時faviconを表示するようにしたい。
イメージはこんな感じ(ブラウザはsafariです)。
image_1

やりかた

GitHubに良い情報が。 参考リンク
I nice way to do it is to override base.html template and add it to the block head_css

base.htmlをオーバーライドしてhead_cssをごにょゴニョすれば良さそう。

やってみる

関連するフォルダ構成はこんな感じ。
(config.pyとかは省略してます)

 .
├─ static
│      └─ favicon.png
├─ templates
│      ├─ custom_base.html
│      └─ sample.html
├─ __init__.py
└─ views.py

custom_base.html

{% extends 'appbuilder/baselayout.html' %}

{% block head_css %}
    {{ super() }}
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
{% endblock %}

sample.html

{% extends "./custom_base.html" %}

{% block content %}
  <h2>favicon表示させたい</h2>
{% endblock %}

views.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
from flask import render_template
from flask_appbuilder import BaseView, expose, has_access

from . import appbuilder, db


class MyView(BaseView):
    default_view = 'method1'

    @expose('/method1/')
    @has_access
    def method1(self):
        # do something with param1
        # and return to previous page or index

        return (
            render_template(
                "sample.html", appbuilder=appbuilder
            ),
            200,
        )

appbuilder.add_view(MyView, "Method1", category='My View')


db.create_all()

これでFlaskを起動させ、{baseurl}/myview/method1にアクセスすると、staticフォルダ配下に設置したfaviconファイルの内容が表示される。

…しかし、この方法だと他のurlにアクセスするとfaviconが表示されません。ぐぬっ。

AppBuilderインスタンス生成時にベーステンプレートの設定を加えられるようなので__init__.pyに設定を追加します。

__init__.py

1
2
3
4
5
6
from flask import Flask
from flask_appbuilder import AppBuilder, SQLA

app = Flask(__name__)
db = SQLA(app)
appbuilder = AppBuilder(app, db.session, base_template='custom_base.html')

再びflaskを起動しなおすと全てのrouteにfaviconが表示されます( ´∀`)ワーイ

共有

BAMBi
著者
BAMBi
サーバサイド~インフラがメインでフロントも好きです。趣味はアニメ鑑賞、ゲーム、つまみ細工です。