在使用Flask-Bootstrap的base.html模版时，去除对cdnjs的资源依赖

本文链接：https://blog.csdn.net/Iron_Sky/article/details/106900440

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