r:include_javascript
<r:include_javascript />
JavaScript
must be stored in a directory called javascripts. To include
a file called main.js, use this syntax:
<r:include_javascript name="main" />Do not include the .js extension when adding file names.
You can also include multiple scripts by separating them with commas. For example,
if you wanted to add three files named file-1.min.js, file-2.min.js,
and file-3.js, add them like so:
<r:include_javascript name="file-1.min, file-2.min, file-3" />Attribute Options
async - Boolean value (true or false). Used
to load javascript asynchronously.
defer - Boolean value (true or false). Used
to defer loading javascript until other resources have been loaded.
type - String value. Specify a
type for JavaScript resources. Eg: module.
nomodule - Boolean value (true or false).
Used to target browsers that don't support ES6.
Example
<r:include_javascript name="file-1.min, file-2.min, file-3" async="false" defer="false" />
NOTE: Don't use async and defer on the same
r:include_javascript tag. This is
an antipattern.
Specifying the type attribute:
<r:include_javascript name="file-1.min, file-2.min, file-3" type="module" />
Specifying the nomodule attribute:
<r:include_javascript name="file-a-es5, file-b-es5" nomodule="true" />
Notes on ES6+
As of May 2021, CleanSlate uses the Terser Gem to mangle and minify JavaScript resources. ES6+ is supported. If your JavaScript file won't load or you get the message, "Holy moly, we just blew a fuse.", you should check to make sure the name and path to the file are correct.
If you don't want Terser to touch your JavaScript, you can disable compress and mangle in your config.yml file to bypass Terser completely.
{% link_javascript %}
JavaScript must be stored in a directory called javascripts. To include
a file called main.js, use this syntax:
{% link_javascript name: "main" %}
Do not include the .js extension when adding file names.
You can also include multiple scripts by separating them with commas. For example,
if you wanted to add three files named file-1.min.js, file-2.min.js,
and file-3.js, add them like so:
{% link_javascript name: "file-1.min, file-2.min, file-3" %}
Attribute Options
async - Boolean value (true or false). Used
to load javascript asynchronously.
defer - Boolean value (true or false). Used
to defer loading javascript until other resources have been loaded.
type - String value. Specify a
type for JavaScript resources. Eg: module.
nomodule - Boolean value (true or false).
Used to target browsers that don't support ES6.
Example:
{% link_javascript name: "file-1.min, file-2.min, file-3", async: false, defer: false %}
NOTE: Don't use async and defer on the same
link_javascript tag. This is
an antipattern.
Specifying the type attribute:
{% link_javascript name: "file-1.min, file-2.min, file-3", type: "module" %}
Specifying the nomodule attribute:
{% link_javascript name: "file-a-es5, file-b-es5", nomodule: true %}
Notes on ES6+
As of May 2021, CleanSlate uses the Terser Gem to mangle and minify JavaScript resources. ES6+ is supported. If your JavaScript file won't load or you get the message, "Holy moly, we just blew a fuse.", you should check to make sure the name and path to the file are correct.
If you don't want Terser to touch your JavaScript, you can disable compress and mangle in your config.yml file to bypass Terser completely.
Last updated on December 15, 2021.
We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:
- A brief description of the issue
- A link to the page where you saw the issue
- Screenshots that illustrate the problem - How do I take a screenshot?
Kindly email CleanSlate@mail.wvu.edu for help or use the form on the request help page.