Xie Ke vs Iyama Yuta in Weiqi league of China; Image generated by Wgo.js loading the game record sgf file.

Loading Javascripts on a single page in Jekyll

MathJax is loaded through javascripts in Jekyll blogs to render handily, see here and a blog post1 I originally take references from. Whenever writing a post, simply put mathjax: true in the preamble as follows:

title: "Sample title"
date: 2000-01-01
categories:
  - Blog
tags:
  - Jekyll
keywords: Jekyll
mathjax: true

That specific page will load the MathJax javascript from the script src specified. Inspired by this, I realized that other custom javascripts can be loaded as well.

Page-specific loading method 1

Of course, after a simple Google search, I found someone had already done this2. Simple put the following Liquid templates in any of the html header files in Jekyll will do the trick. As I am using the minimal-mistakes template, the code can be added in /_include/scripts.html or in the HEAD section in /_layout/default.html.

{ % if page.custom_js % }
    { % for js_file in page.custom_js % }
    <script type="text/javascript" src="{{ site.baseurl }}/assets/js/{{ js_file }}.js"></script>
    { % endfor % }
{ % endif % }

Now say if we have module1.js and module2.js under /assets/js/ folder, modifying the preamble above to

title: "Sample title"
date: 2000-01-01
categories:
  - Blog
tags:
  - Jekyll
keywords: Jekyll
custom_js:
  - module1
  - module2

will load the javascript after building.

Page-specific loading method 2

However, say if we have lots of .js files for the same package. We can do something like the MathJax trick. Here I will demonstrate how to load the javascript-based Simple Game Format (sgf) viewer on a specific blog post for showing Go (weiqi) games record.

The package we are gonna use is called WGo.js3: https://github.com/waltheri/wgo.js.

It has a list of .js files and some stylesheet, so

  • First copy the wgo folder in the repository to the /assets/ folder;
  • Then add the following code block in scripts.html (which is loaded in default.html).
{% if page.wgo %}
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/wgo.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/kifu.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/sgfparser.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/player.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/basicplayer.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/basicplayer.component.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/basicplayer.infobox.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/basicplayer.commentbox.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/basicplayer.control.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/player.editable.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/scoremode.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/assets/wgo/player.permalink.js"></script>

<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/wgo/wgo.player.css" />
{% endif %}

Accordingly, change the preamble to the following:

title: "Sample title"
date: 2000-01-01
categories:
  - Blog
tags:
  - Jekyll
keywords: Jekyll
wgo: true

we can use WGo.js to display sgf files!

Go board Examples

Let us see some examples. The code will be given, and we can see what it is like.

Showing a full game

  • Scrolling the mouse will forward the moves.
  • A dropdown menu is in the top left corner.
  • A custom board option is used.
<div data-wgo="{{site.baseurl}}/assets/sgfs/XieKe-IyamaYuta.sgf" 
width="700" 
data-wgo-board="stoneHandler: WGo.Board.drawHandlers.SHELL, lineWidth: 1">
</div>

Showing from the 50th move

<div data-wgo="{{site.baseurl}}/assets/sgfs/XieKe-IyamaYuta.sgf" 
data-wgo-move="50">
</div>

Showing a static diagram

  • data-wgo-board specifies the region highlighted.
  • data-wgo-diagram shows a static diagram (useful to demo tsumego problems).
  • top, right, left, bottom are the rows and columns to skip from top, right, left and bottom (useful to demo tsumego problems).
<div style="display: inline-block; width: 500px" 
data-wgo-diagram="{{site.baseurl}}/assets/sgfs/XieKe-IyamaYuta.sgf" 
data-wgo-marklastmove="true"
data-wgo-board="section:{top:0, right:0, left: 8, bottom: 6}"
data-wgo-move="110">
</div>

References

  1. http://sgeos.github.io/github/jekyll/2016/08/21/adding_mathjax_to_a_jekyll_github_pages_blog.html ↩

  2. https://mattgemmell.com/page-specific-assets-with-jekyll/ ↩

  3. http://wgo.waltheri.net/ ↩

Comments

You May Also Enjoy