Storyteller 5.1.0

Documentation Skinning Edit on GitHub

Storyteller requires a layout.htm file at the root directory of the documentation. This file is used to specify the standard layout for all the topics in your documentation project. At runtime, Storyteller renders topic content by processing the directives in the layout.htm file for navigation elements, linking to client side assets, and rendering the topic content. The layout.htm file has a similar function to master pages in server side web rendering tools like Razor or Spark.

For an example, see the layout for this documentation website.

See Linking to Other Topics for an explanation of how to use the preprocessed directives for navigation elements.

Also see Embedding Images for working with images.

Inner Content

To place the actual content of a topic file within the layout, use this directive: <[inner]>.

Topic Title

To embed the title of the current topic, use <[title]>

Version

To embed the version of the product passed to the st doc-run or st doc-export commands, use <version>

Root Url

To embed the url to the root of the documentation project, use <[RootUrl]&gh;.

Note! The directives for images, styles, and scripts are only necessary for assets bundled directly into the documentation export. These directives are applied differently depending upon whether the documentation is running in the live preview, exported for website hosting, or exported for local file system browsing. If you are linking to assets from another website, you do not need these directives.

Edit on GitHub Link

You can add a link to edit the current documentation topic in GitHub (or any other hosting provider) by using the documentation/docs/theme.md transform like this example shown below that is taken from the Storyteller documentation itself:

<a
	href="https://github.com/storyteller/storyteller/blob/master/documentation/<[FilePath]>"  
	class="text-muted">
	<i class="fa fa-github"></i> Edit on GitHub
</a>

This usage results in the following html:

Edit on GitHub

I used font-awesome for the icon above, but that is neither required nor in the box for the Storyteller documentation.

CSS Files

To link to CSS files with Storyteller's pathing rules in exports, use this syntax:

<[css:content/bootstrap.min.css]>

The path in css:[path] should be relative to the root of the documentation directory.

Script Files

To link to script files with Storyteller's pathing rules in exports, use this syntax:

<[script:content/prism.js]>

Topic Breadcrumbs

To use a breadcrumbs element from Bootstrap, use this syntax:

<[Breadcrumbs]>