Ease adding scripts that depend on jQuery

mmistakes / minimal-mistakes

:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.

https://mmistakes.github.io/minimal-mistakes/

MIT License

12.43k stars 25.61k forks source link

Ease adding scripts that depend on jQuery #2110

Closed mjpieters closed 5 years ago

mjpieters commented 5 years ago

It's currently very cumbersome to add scripts to the theme that must load in the footer to benefit from the jQuery support already present. Either we must

list main.min.js and https://use.fontawesome.com/releases/v5.7.1/js/all.js (but without the defer, integrity and crossorigin options), or
customise the scripts.html include, or
copy across all JS assets, download the package.json and banner.js files from GitHub (using the right versions) to be able to build the asset locally.

Yet all I want to do is load one extra, small JS file to handle contact form submission with AJAX and some validation..

Please add a simple option to load additional scripts in the footer, in addition to main.min.js and font-awesome. Perhaps a extra_scripts list?

mmistakes commented 5 years ago

The default layout almost never changes (aside from bumping a theme version number in comments) and is therefore safe for overriding.

You could add your script here by copying _layouts/default.html to your repo and override the bundled one.

mjpieters commented 5 years ago

Right, that's another work-around then. Not ideal, not when adding additional scripts in the footer would be fairly common, I think?

mmistakes commented 5 years ago

Which is where footer_scripts or overriding _includes/footer/custom.html come into play.

mjpieters commented 5 years ago

But neither footer_scripts nor _includes/footers/custom.html let me place an extra script tag after the existing scripts (so after jQuery and magnific-popup have been loaded).

mmistakes commented 5 years ago

Have a look at PR #2116 and let me know if this meets your need. You can test by using this gem in your Gemfile

gem 'minimal-mistakes-jekyll', :git => 'https://github.com/mmistakes/minimal-mistakes.git', :branch => 'after-footer-scripts'

And then adding your "after footer" script paths to _config.yml like so:

after_footer_scripts:
  - /assets/js/custom-script-loads-after-footer.js

mjpieters commented 5 years ago

This is absolutely perfect. It fits my needs exactly, I no longer would need to customise the default.html layout or scripts.html include.