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
GitHub
parent
93c4fbc4b9
commit
8fc9bccda8
8 changed files with 83 additions and 7 deletions
|
|
@ -8,6 +8,7 @@
|
||||||
- DRY up button CSS using Sass lists and YIQ Color Contrast mixin.
|
- 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 `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)
|
- 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)
|
## [4.5.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.2)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,4 +29,15 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<![endif]-->
|
<![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 %}
|
||||||
|
|
@ -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 analytics.html %}
|
||||||
{% include /comments-providers/scripts.html %}
|
{% include /comments-providers/scripts.html %}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
title: "Configuration"
|
title: "Configuration"
|
||||||
permalink: /docs/configuration/
|
permalink: /docs/configuration/
|
||||||
excerpt: "Settings for configuring and customizing the theme."
|
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.
|
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).
|
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
|
### 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:
|
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:
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
title: "JavaScript"
|
title: "JavaScript"
|
||||||
permalink: /docs/javascript/
|
permalink: /docs/javascript/
|
||||||
excerpt: "Instructions for customizing and building the theme's scripts."
|
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).
|
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.
|
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
|
## Build Process
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ permalink: /docs/history/
|
||||||
excerpt: "Change log of enhancements and bug fixes made to the theme."
|
excerpt: "Change log of enhancements and bug fixes made to the theme."
|
||||||
sidebar:
|
sidebar:
|
||||||
nav: docs
|
nav: docs
|
||||||
last_modified_at: 2017-09-12T08:49:12-04:00
|
last_modified_at: 2017-09-12T12:06:47-04:00
|
||||||
---
|
---
|
||||||
|
|
||||||
## Unreleased
|
## 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.
|
- 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 `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)
|
- 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)
|
## [4.5.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.2)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,4 +29,15 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<![endif]-->
|
<![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 %}
|
||||||
|
|
@ -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 analytics.html %}
|
||||||
{% include /comments-providers/scripts.html %}
|
{% include /comments-providers/scripts.html %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue