There are two ways of adding third party scripts. Embedding is ideal for one-off scripts, e.g. widgets.js that is part of embedded tweets (see below). Adding global scripts is for scripts that should be loaded on every page.
Embedding
Hydejack supports embedding third party scripts directly inside markdown content. This will work in most cases, except when a script can not be loaded on a page more than once (this will occur when a user navigates to the same page twice).
Example:
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-lang="en">
<p lang="en" dir="ltr">
The next version of Hydejack (v6.3.0) will allow embedding 3rd party scripts,
like the one that comes with this tweet for example.
</p>
— Florian Klampfer (@qwtel)
<a href="https://twitter.com/qwtel/status/871098943505039362">June 3, 2017</a>
</blockquote>
The next version of Hydejack (v6.3.0) will allow embedding 3rd party scripts, like the one that comes with this tweet for example.
— Florian Klampfer (@qwtel) June 3, 2017
Global scripts
If you have scripts that should be included on every page you can add them globally by opening (or creating) _includes/my-scripts.html and adding them like you normally would:
<!-- file: `_includes/my-scripts.html` -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
my-scripts.html will be included at the end of the body tag.
Registering push state event listeners
When embedding scripts globally you might want to run some init code after each page load. However, the problem with push state-based page loads is that the load event won’t fire again. Luckily, Hydejack’s push state component exposes an event that you can listen to instead.
<!-- file: `_includes/my-scripts.html` -->
<script>
document.getElementById('_pushState').addEventListener('hy-push-state-load', function() {
// <your init code>
});
</script>
Note that the above code must only run once, so include it in your my-scripts.html.
hy-push-state-start- Occurs after clicking a link.
hy-push-state-ready- Animation fished and response has been parsed, ready to swap out the content.
hy-push-state-after- The old content has been replaced with the new content.
hy-push-state-progress- Special case when animation is finished, but no response from server has arrived yet. This is when the loading spinner will appear.
hy-push-state-load- All embedded script tags have been inserted into the document and have finished loading.
If everything else fails
If you can’t make an external script work with Hydejack’s push state approach to page loading, you can disable push state by adding to your config file:
# file: `_config.yml`
hydejack:
no_push_state: true
Continue with Build