Exporting Static Sites From Tiddlywiki

Part 4: Adding Javascript and Per-page Resources

Part: 0 1 2 3 4 5 6 7 8 9 10

Summary

In the previous section, we added the Bootstrap framework and got it to play nicely with Tiddlywiki but we saw that, although the menus were responsive, they lacked functionality.

In this section we're going to add that functionality by loading the necessary javascript and then use the same technique to add some Google Analytics code.

We'll also look at how we can add individual pieces of javascript and css on a page-by-page basis to customise how each page looks and behaves.

Adding Bootstrap Javascript from the CDN

Getting the responsive menus to work is really easy (like everything, if you know how) - we can load the necessary scripts from a CDN, just like we did with the css.

The links we need can be found on the website. The ones we used look like this.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

The only difference, when including javascript files is that, instead of in the <head>, they usually go right before the closing </body>, which is where we'll put them in $:/didaxy/templates/static.tiddler.html

Adding Bootstrap and jQuery without the CDN

Just as with the css files, if we had a good reason to, we could instead download the javascript files and include them into our own pages.

The thing we'd need to be careful about here, however, is that whilst our css is being made into a separate file each time we rebuild our site (static.css) any javascript we add will get inlined into the page itself.

If we did this with the bootstrap javascript code we'd be forcing our users to reload the javascript on every page, instead fo just once for the whole site, which is probably not what we want to do.

To solve this problem, we would set up a mechanism just like the one that currently 'bundles' the css into its own file, to do the same for javascript.

It's much easier for now to just load them from the CDN.

Adding Google Analytics

Having said that, there are some pieces of javascript that we really might want inlined into each page and the Google analytics tracking code is one of them.

If you want to do this, you need to sign up for google analytics, which will give you a snippet of code that looks like this

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXXX-1', 'auto');
  ga('send', 'pageview');

</script>

where XXXXXXXXXX is a code unique to you.

If you put this code in a tiddler called $:/didaxy/scripts/ganalytics.js you can include it in your pages by adding the line 

`{{$:/didaxy/scripts/ganalytics.js||$:/core/templates/plain-text-tiddler}}`

to $:/didaxy/templates/static.tiddler.html.

Note that, for inclusion in a plugin, we'd ideally like not to have to hard-code the tracking code into this tiddler and use a layer of transclusion instead.

Unfortunately, when we use two layers of transclusion it gets really difficult to get things to show up the way we want them to. There's probably a way to do it, but for now the easiest workaround is to include the tracking snippet directly into $:/didaxy/templates/static.tiddler.html and have it just transcluding the tracking code, which is stored in $:/didaxy/token/ganalytics. This is sub-optimal because it complicates the template and mixes javascript in with the html (and wikitext) but it'll do for now.

Per page resources

Everything we've discussed so far is to do with adding the same styling and code to each page of our site.

It seems a shame, though, to be constructing our own build system and not have more "fine-grained" control over what gets included in each page.

What would be really great would be if we could add stylesheets and scripts to individual pages, and we can. It's actually pretty simple.

Any tiddler that we want to add resources to when it gets turned into a static page, we give two new fields "scripts" and "styles" and in them we write a list of the scripts and styles, respectively, to be included.

The scripts and styles refer to separate tiddlers, each of which contains either css or javascript.

We use a list widget in the <head> of the template...

`
<$list filter="[list[!!styles]]">
`<style>`
{{!!text}}
`</style>`
</$list>

`

and another alongside the other script tags at the bottom of the body...

`
<$list filter="[list[!!scripts]]">
`<script>`
{{!!text}}
`</script>`
</$list>
`

to transclude the contents of these tiddlers, between suitable sets of tags.

Now we can give the tiddler a scripts field, add an entry "say-yo.js", make a tiddler called "say-yo.js" and give it the content "console.log("yo!"); just as we did with this page.

Open the console and refresh the page and you should see that it does, in deed, "say yo"

Are We Nearly There Yet?

We've got a nicely formatted site and all the javascript and css our hearts could desire - are we nearly done? Almost! The last important piece of the puzzle is to be able to add some images to our pages, but first we need to "fix" our URLs, hopefully before they ever become a problem.

Next: Making the URLs web-safe.

Start | Tutorials | Contact