Break up libs and scripts into 2 seperate template blocks.

Some scripts need to execute after the page has finished loading.
To ensure that, the `scripts` block is placed at the bottom of the page.

However, if a user embeds scrpts within the body, and those scripts
rely in libs, then the libs need to already be loaded. By having
`libs` be a seperate block at the top of the page (int he header),
we can ensure that will work.

And we still want the libs in a block so a user can override them,
or even add to them (via `{{ super() }}`).

Fixes #956
This commit is contained in:
Waylan Limberg
2016-08-10 15:49:16 -04:00
parent 77ca449714
commit 8b6c13f0e0
3 changed files with 17 additions and 11 deletions

View File

@@ -189,7 +189,8 @@ following blocks:
* `site_meta`: Contains meta tags in the document head.
* `htmltitle`: Contains the page title in the document head.
* `styles`: Contains the link tags for stylesheets.
* `scripts`: Contains the JavaScript libraries included in the page.
* `libs`: Contains the JavaScript libraries (jQuery, etc) included in the page header.
* `scripts`: Contains JavaScript scripts which should execute after a page loads.
* `analytics`: Contains the analytics script.
* `extrahead`: An empty block in the `<head>` to insert custom tags/scripts/etc.
* `site_name`: Contains the site name in the navigation bar.

View File

@@ -26,11 +26,17 @@
{%- endfor %}
{%- endblock %}
{%- block libs %}
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="{{ base_url }}/js/jquery-1.10.2.min.js"></script>
<script src="{{ base_url }}/js/bootstrap-3.0.3.min.js"></script>
<script src="{{ base_url }}/js/highlight.pack.js"></script>
{%- endblock %}
{%- block analytics %}
{%- if google_analytics %}
@@ -71,9 +77,6 @@
</footer>
{%- block scripts %}
<script src="{{ base_url }}/js/jquery-1.10.2.min.js"></script>
<script src="{{ base_url }}/js/bootstrap-3.0.3.min.js"></script>
<script src="{{ base_url }}/js/highlight.pack.js"></script>
<script>var base_url = '{{ base_url }}';</script>
<script data-main="{{ base_url }}/mkdocs/js/search.js" src="{{ base_url }}/mkdocs/js/require.js"></script>
<script src="{{ base_url }}/js/base.js"></script>

View File

@@ -27,7 +27,7 @@
{%- endfor %}
{%- endblock %}
{%- block scripts %}
{%- block libs %}
{% if page %}
<script>
// Current page data
@@ -39,15 +39,10 @@
<script src="{{ base_url }}/js/jquery-2.1.1.min.js"></script>
<script src="{{ base_url }}/js/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="{{ base_url }}/js/highlight.pack.js"></script>
<script src="{{ base_url }}/js/theme.js"></script>
{%- endblock %}
{%- block extrahead %} {% endblock %}
{%- for path in extra_javascript %}
<script src="{{ path }}"></script>
{%- endfor %}
{%- block analytics %}
{% if google_analytics %}
<script>
@@ -119,7 +114,14 @@
</div>
{% include "versions.html" %}
{% include "versions.html" %}
{%- block scripts %}
<script src="{{ base_url }}/js/theme.js"></script>
{%- for path in extra_javascript %}
<script src="{{ path }}"></script>
{%- endfor %}
{%- endblock %}
</body>
</html>