How to Add Custom Script to Single Post in Jekyll
What I want:
- All scripts should be added to the
- No need for dependencies between scripts during loading.
custom-scripts.html contains all the logic for the rendering:
This include expects two page variables
custom-css-list and renders tags for each value in these lists.
The call to this include is added to the
head.html which renders the content of the
And here is how it’s implemented. For the current post, the front matter header contains links to files on CDN:
During processing this will be rendered into the following lines:
Below is the code for the “Click Me!” label added directly to this post. The
jQuery code gets element by its id and sets the animate.css class to bounce (inline CSS styles are omitted for brevity). After a second the CSS classes got removed, so they can be applied again:
If you’ve got requirements that make this approach not feasible, here are two more options that you can use: