markdown 瓶确保进口的JS在jQuery的之后执行

Posted 2021-05-06

{% block head %}
  {{  super()  }}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />
{% endblock %}

...


{% block content %}
<div class="container">
  {% block page_content %}{% endblock %}
</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
    <script src="{{url_for('static', filename='custom.js')}}"></script>
    <script type="text/javascript">
      $(document).on('click', '[data-toggle="lightbox"]', function(event) {
          event.preventDefault();
          $(this).ekkoLightbox();
      });
    </script>
  {% endblock %}

Note
- 使用 script block + super()
- 在 content block 後面加上 script block



References
- http://ashleydw.github.io/lightbox/#image-gallery