This post is a test of using external Javascript code in Jekyll-based Github pages. As such, credit is due before I even begin. Specifically, this material has been derived from similar posts by Emma Tosch, Mike Chirico, and (probably) others. I thank them for these insights, and added what it took for me to implement their suggestions.
To wit, the procedure that worked for me to use external Javascript sources in this context is, as follows:
(1) Add source link specifications to an _includes/head.html file. For example, to include the vis.js library in a rendered post page, add the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.js" type="text/javascript"></script>
(2) Make certain this file becomes part of the Jekyll rendering chain. For example, you may have a _layout/post.html template for your blog posts which uses the default layout. Your default layout might be, as mine is, in the _layout/default.html template. So, I simply added an,
{% include head.html %}
directive in the the HEAD section of _layouts/default.html.
(3) Establish a convenient location, under the _includes directory, for your custom or other locally-served Javascript source files.
(4) Modify the front matter of the post in question by adding a variable to contain the qualified name of the Javascript code file to be included. For example:
my_js_code: js/awesome.js
(5) Modify the content of _layout/post.html to load the desired Javascript script files. A good way to do this would be to add the following to the end of the layout:
{% for js in page.my_js_code %}
<script type="text/javascript">{% include {{ js }} %}</script>
{% endfor %}
NOTE
When we add the link in _includes/head.html, as shown in step #1, it gets loaded into every page in the blog. This is certainly less than desirable for pages that do not need this Javascript. A good way to solve this problem is to, first, add a variable into the page’s front matter, like this:
load_vis: true
then, “fence in” the lines from Step #1, like this:
{% if page.load_vis %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.js" type="text/javascript"></script>
{% endif %}
This way, the inclusion of this Javascript link in the final rendering is performed according to the setting of this variable. If the variable is absent, (or set to false), the link is not included.
An example of external Javascript below
The interactive pie chart below, (taken from the brython gallery), is generated by python code, interpreted by brython.js. Note that this requires another loop in the _layout/post.html file for python scripts. It looks like this:
{% if page.add_brython %}
{% for py in page.all_my_py_code %}
<script type="text/python">
{% include {{ py }} %}
</script>
{% endfor %}
{% endif %}
Note that indentation has been left out to keep the python code up against the margins, (since indentation has syntactical meaning in python). This also requires that the HTML where the piechart is rendered be included into the page, so it is also located under the _includes directory.
SVG pie chart
|