Allow <head> and footer scripts to be changed via config (#1241)

* Allow `<head>` and footer scripts to be changed via config
* Update JavaScript documentation

Close #1238
This commit is contained in:
Michael Rose 2017-09-12 12:27:36 -04:00 committed by GitHub
parent 93c4fbc4b9
commit 8fc9bccda8
8 changed files with 83 additions and 7 deletions

View file

@ -8,6 +8,7 @@
- DRY up button CSS using Sass lists and YIQ Color Contrast mixin.
- Add `btn--primary` button class. **Note:** elements that were previously using only a `.btn` class will now also need `.btn--primary` (eg. `<a class="btn btn--primary" href="#">my link</a>`).
- Add `air`, `contrast`, `dark`, `dirt`, `mint`, and `sunrise` skin color options. [#1208](https://github.com/mmistakes/minimal-mistakes/issues/1208)
- Allow scripts in `<head>` and before `</body>` to be added/overridden with `head_scripts` and `footer_scripts` arrays in `_config.yml`. [#1241](https://github.com/mmistakes/minimal-mistakes/pull/1241)
## [4.5.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.2)

View file

@ -30,3 +30,14 @@
}
</style>
<![endif]-->
{% if site.head_scripts %}
{% for script in site.head_scripts %}
{% if script contains "://" %}
{% capture script_path %}{{ script }}{% endcapture %}
{% else %}
{% capture script_path %}{{ script | absolute_url }}{% endcapture %}
{% endif %}
<script src="{{ script_path }}"></script>
{% endfor %}
{% endif %}

View file

@ -1,4 +1,15 @@
<script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
{% if site.footer_scripts %}
{% for script in site.footer_scripts %}
{% if script contains "://" %}
{% capture script_path %}{{ script }}{% endcapture %}
{% else %}
{% capture script_path %}{{ script | absolute_url }}{% endcapture %}
{% endif %}
<script src="{{ script_path }}"></script>
{% endfor %}
{% else %}
<script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
{% endif %}
{% include analytics.html %}
{% include /comments-providers/scripts.html %}

View file

@ -2,7 +2,7 @@
title: "Configuration"
permalink: /docs/configuration/
excerpt: "Settings for configuring and customizing the theme."
last_modified_at: 2017-09-12T10:38:09-04:00
last_modified_at: 2017-09-12T12:25:16-04:00
---
Settings that affect your entire site can be changed in [Jekyll's configuration file](https://jekyllrb.com/docs/configuration/): `_config.yml`, found in the root of your project. If you don't have this file you'll need to copy or create one using the theme's [default `_config.yml`](https://github.com/mmistakes/minimal-mistakes/blob/master/_config.yml) as a base.
@ -167,6 +167,21 @@ If you don't set `repository` correctly you may see the following error when try
For more information on how `site.github` data can be used with Jekyll check out [`github-metadata`'s documentation](https://github.com/jekyll/github-metadata).
### Site Scripts
Add scripts to the `<head>` or closing `</body>` elements by assigning paths to either `head_scripts` and/or `footer_scripts`.
For example, to add a CDN version of jQuery to page's head along with a custom script you'd do the following:
```yaml
head_scripts:
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
```
Consult the [JavaScript documentation]({{ site.baseurl }}{% link _docs/17-javascript.md %}) for more information on working with theme scripts.
{: .notice--info}
### Site Default Teaser Image
To assign a fallback teaser image used in the "**Related Posts**" module, place a graphic in the `/assets/images/` directory and add the filename to `_config.yml` like so:

View file

@ -2,7 +2,7 @@
title: "JavaScript"
permalink: /docs/javascript/
excerpt: "Instructions for customizing and building the theme's scripts."
last_modified_at: 2016-11-03T11:35:42-04:00
last_modified_at: 2017-09-12T12:25:08-04:00
---
The theme's [`assets/js/main.min.js`] script is built from several vendor, jQuery plugins, and other scripts found in [`assets/js/`](https://github.com/mmistakes/minimal-mistakes/tree/master/assets/js).
@ -29,6 +29,21 @@ To modify or add your own scripts include them in [`assets/js/_main.js`](https:/
If you add additional scripts to `assets/js/plugins/` and would like them concatenated with the others, be sure to update the `uglify` script in [`package.json`](https://github.com/mmistakes/minimal-mistakes/blob/master/package.json). Same goes for scripts that you remove.
You can also add scripts to the `<head>` or closing `</body>` elements by adding paths to following arrays in `_config.yml`.
**Example:**
```yaml
head_scripts:
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
footer_scripts:
- /assets/js/your-custom-footer-script.js
```
**Note:** If you assign `footer_scripts` the theme's `/assets/js/main.min.js` file will be deactivated. This script includes jQuery and various other plugins that you'll need to find replacements for and include separately.
{: .notice--warning}
---
## Build Process

View file

@ -4,7 +4,7 @@ permalink: /docs/history/
excerpt: "Change log of enhancements and bug fixes made to the theme."
sidebar:
nav: docs
last_modified_at: 2017-09-12T08:49:12-04:00
last_modified_at: 2017-09-12T12:06:47-04:00
---
## Unreleased
@ -17,6 +17,7 @@ last_modified_at: 2017-09-12T08:49:12-04:00
- DRY up button CSS using Sass lists and YIQ Color Contrast mixin.
- Add `btn--primary` button class. **Note:** elements that were previously using only a `.btn` class will now also need `.btn--primary` (eg. `<a class="btn btn--primary" href="#">my link</a>`).
- Add `air`, `contrast`, `dark`, `dirt`, `mint`, and `sunrise` skin color options. [#1208](https://github.com/mmistakes/minimal-mistakes/issues/1208)
- Allow scripts in `<head>` and before `</body>` to be added/overridden with `head_scripts` and `footer_scripts` arrays in `_config.yml`. [#1241](https://github.com/mmistakes/minimal-mistakes/pull/1241)
## [4.5.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.2)

View file

@ -30,3 +30,14 @@
}
</style>
<![endif]-->
{% if site.head_scripts %}
{% for script in site.head_scripts %}
{% if script contains "://" %}
{% capture script_path %}{{ script }}{% endcapture %}
{% else %}
{% capture script_path %}{{ script | absolute_url }}{% endcapture %}
{% endif %}
<script src="{{ script_path }}"></script>
{% endfor %}
{% endif %}

View file

@ -1,4 +1,15 @@
<script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
{% if site.footer_scripts %}
{% for script in site.footer_scripts %}
{% if script contains "://" %}
{% capture script_path %}{{ script }}{% endcapture %}
{% else %}
{% capture script_path %}{{ script | absolute_url }}{% endcapture %}
{% endif %}
<script src="{{ script_path }}"></script>
{% endfor %}
{% else %}
<script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
{% endif %}
{% include analytics.html %}
{% include /comments-providers/scripts.html %}