在使用Flask開發後臺時,使用到了Flask-Bootstrap。雖然很方便,但是有個問題是它會從cdnjs.cloundflare.com拉取bootstrap.min.css,jquery.min.js等資源。這在有些沒有網絡連接的現場是很大的問題。因此要去除掉從cdnjs獲取資源這個特性。
1 查找原因
在Python的Lib/site-packages/flask_bootstrap/templates/bootstrap/base.html的代碼:
{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
<head>
{%- block head %}
<title>{% block title %}{{title|default}}{% endblock title %}</title>
{%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %}
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
</head>
<body{% block body_attribs %}{% endblock body_attribs %}>
{% block body -%}
{% block navbar %}
{%- endblock navbar %}
{% block content -%}
{%- endblock content %}
{% block scripts %}
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{%- endblock scripts %}
{%- endblock body %}
</body>
{%- endblock html %}
</html>
{% endblock doc -%}
其中所有的“bootstrap_find_resource(...)”調用都是導致從cdnjs獲取代碼的原因。
2 解決辦法
在自己的引用了base.html的代碼中,把第1步中所有涉及了“bootstrap_find_resource(...)”的塊給替換掉,改成從本地獲取相應的資源:
# 替換block styles
{%- block styles %}
<!-- Bootstrap -->
<!-- <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-3.3.7/dist/css/bootstrap.min.css') }}"/>
{%- endblock styles %}
# 替換block scripts
{% block scripts %}
<!-- {{ super() }} --> # 屏蔽掉繼承base.html,然後從本地獲取js
<script src="{{ url_for('static', filename='jquery-3.4.1/jquery-3.4.1.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-3.3.7/dist/js/bootstrap.min.js') }}"></script>
{{ moment.include_moment(local_js=url_for('static', filename='js/monent-with-locales.min.js')) }}
{% block page_script %}{% endblock %}
{% endblock %}
3 去除moment對cdnjs的依賴
除了bootstrap,還有moment組件也會從cdnjs獲取資源,這裏只需要在moment.include_monent()這個調用中,給參數local_js賦上本地Js的路徑即可。
{{ moment.include_moment(local_js=url_for('static', filename='js/monent-with-locales.min.js')) }}