If the first Tutorial explains the basics of the template creation, this tutorial is aimed at the file organization when creating and editing your template.
The json
files for the templates are all stored in the src/js/templates/
directory. Yours should go there too. Subdirectories are possible.
Just create your own template, for example myowntemplate.json
. You can start from scratch (follow the tutorial), or copy an existing template to serve as a base (a good way to start, in my opinion).
A single file in the project references all the templates that are presented by Geckos. It's the file src/js/templates/load-templates.js
.
If you're on Windows, after creating the json
file for your template, you can just launch the script generate-requirejs-template.vbs
. It will generate the load-template.js
file with all the templates in the directory.
You can also edit the file. It's a simple one :
define([ 'json!templates/templates01.json', 'json!templates/myowntemplate.json' ], function( tpl1, tpl2) { return { load: function() { var list = [ ]; list.push(tpl1); list.push(tpl2); return list; } }; });
Editing manually this file is helpful when you want to display / use only a couple of templates. In this example, two templates only are loaded by Geckos.
If you don't reference your template in this file, it won't appear on the UI.
Many templates use external resource files. You could embed them as DataURL, but external files are easier to maintain and use in development mode.
External files for a template are better all in one place. In the src/js/templates
directory, create a subdirectory named mytemplate
. You will put your images and other external files there.
When you references those files in your templates, the starting point is coming from src
directory. It should look like this in the template :
"path": "./js/templates/mytemplate/myfile.png"
Again, look at existing templates to learn a few tips !