The templating system is wide open, giving you full control over how the HTML is rendered. By default we're using straight javascript with template literals for patching together chunks of HTML.
To create or modify a template, you'll only have to ensure:
The following files are called directly by Documon and must exist within the template folder.
| file | description | arguments | used by |
|---|---|---|---|
| _config.js | Configures the "assets" folder (see below). | documon.js | |
| index.jst | The main "app" page. | context | documon.js |
| indexShortcut.jst | Shortcut to the home page. | context | documon.js |
| page.jst | Standard wrapper template for all pages. | context, content | documon.js |
| package.jst | An index page that lists a package's members. | context | organizer.js |
| class.jst | This contains class description, Methods, Properties and Events (MPE). | organizer.js |
Each template (jst) must return a single function that accepts a "context" argument and returns a string.
Example:
module.exports = function (ctx){
return "<html><body>${ctx.id}</body></html>";
};The argument provided is a simple object structure containing page data.
The "page.jst" file receives a second argument "content", which is the main textual body content for the page that was formerly rendered by either index, package or class JST template.
To review the structured data, run Documon with teh "dumpData" option enabled -- the "tagged" javascript files show the json-like structure, which you can use as a reference.
The "_config.js" file is essentially a central configuration "object" that documon reads for template specific options and can also be used by the template developer to store global options/settings.
The _config.js file should export the following:
module.exports = {
assetsFolder : "assets"
}Documon only reads the "assetsFolder" property, all other properties in the "exports" object are not used by Documon, but can be used by templates as needed, so you're free to load up the object as you see fit.
The "assetsFolder" is the name of a folder in the templates folder that contains all the required assets such as javascript, css, images, etc. -- This entire folder will get copied over "as is" (including sub-folders) to the resulting web site that Documon generates.
For example, if the template folder structure looks like:
/path/to/template
/path/to/template/myAssets… and you need the "myAssets" folder to wind up in the resulting website, you'll set the "assetsFolder" property in "_config.js" as:
module.exports = {
assetsFolder : "myAssets"
}… then the "myAssets" folder will get copied into the final doumentation as:
/docs/myAssets