在使用Flask-Bootstrap的base.html模版時,去除對cdnjs的資源依賴

  在使用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')) }}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章