Fork me on GitHub

YUIDoc Themes

Main Page > YUIDoc Themes
Jump to Table of Contents

YUIDoc uses Handlebars.js to render its templates. For easy customization, YUIDoc's default templates provide a specific set of file overrides.

Directories

The default theme consists of assets/, layouts/ and partials/ directories, along with a theme.json file that describes theme-related variables, such as the JS and CSS to load. 

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

A YUIDoc template has two primary layout files: main.handlebars and xhr.handlebars.

main Provides a complete wrapper around every rendered page. main.handlebars includes the full HTML header and footer markup, CSS, and JS for every YUIDoc API page.
xhr Provides a smaller layout for the built-in doc server to use when requesting an individual page via XHR. This enables the browser to refresh just the content pane and avoid loading the complete markup for the entire page. The xhr template enables YUIDoc to progressively enhance the API documentation in an efficient manner.

Partials

For each section of the layout that derives from parsed YUIDoc comment data, YUIDoc provides a Handlebars partial.

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, which enable the user to hide and show private methods, inherited methods, and so on.
attrs Renders documentation for an individual YUI Attribute.
classes Renders documentation for an individual class.
events Renders documentation for an individual event.
files Renders the API's source files.
method Renders documentation for an individual method.
module Renders documentation for an individual module.
props Renders documentation for an individual property.

Overriding a Partial/Layout

YUIDoc's --themedir option specifies a directory containing layouts and partials that override the default theme. For example: 

$ yuidoc --themedir ./mytheme

causes YUIDoc to inspect the directory ./mytheme for template overrides. If this directory contains an override such as ./mytheme/partials/method.handlebars, YUI will parse its internal templates first, then apply the custom method.handlebars partial. If a theme has no explicit override for a given template file, YUIDoc simply falls back to using the default layout or partial.

Build Status