Modifying the default theme is very easy, YUIDoc uses Handlebars.js to render it's templates. It uses a default set of templates, but allows for specific template file overides to allow for easy customization.
Directories
The default theme consists of assets
, layouts
and partials
directories and a theme.json
file with theme related variables (JS and CSS to load, etc..)
themes/ default/ assets/ //Project assets, css, js layouts/ *.handlebars //Handlebars files for layouts partials/ *.handlebars //Handlebars files for partials theme.json //JSON file with theme variables
Layouts
There are 2 main layout files: main.handlebars
and xhr.handlebars
main |
The basic wrapper around every rendered page. It contains the fulll HTML markup, layout, css, js, etc.. |
---|---|
xhr |
Is a smaller version that's returned by the built-in server when requesting
a page via XHR. This way it on'y transfers the smaller data and not the entire page.
|
Partials
Partials are used to create all of the data driven portions of the layout. These partials include:
attrs
, classes
, events
, files
, index
, method
, module
, options
, props
, sidebar
index |
Renders the main index content. |
---|---|
sidebar |
Renders the tabview containing the lists of classes and modules. |
options |
Renders the filter options at the top of the page |
attrs |
Renders Attribute data |
classes |
Renders Class data |
events |
Renders Event data |
files |
Renders source files |
method |
Renders Method data |
module |
Renders Module data |
props |
Renders the property data |
Overriding a Partial/Layout
YUIDoc trys to make overriding it's templates very easy. When you need to make a change to a partial or layout file, you do not need to copy every file over into your template directory. YUIDoc will parse it's internal templates first, then apply your overrides to it afterward. This way if you only need to modify one template file, you only need to modify that one file.
mkdir -p mytheme/partials vim mytheme/partials/method.handlebars // Make it how you want yuidoc --theme ./mytheme