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.
To place the actual content of a topic file within the layout, use this directive:
To embed the title of the current topic, use
To embed the version of the product passed to the
st doc-run or
st doc-export commands, use
To embed the url to the root of the documentation project, use
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:
I used font-awesome for the icon above, but that is neither required nor in the box for the Storyteller documentation.
To link to CSS files with Storyteller's pathing rules in exports, use this syntax:
The path in
css:[path] should be relative to the root of the documentation directory.
To link to script files with Storyteller's pathing rules in exports, use this syntax:
To use a breadcrumbs element from Bootstrap, use this syntax: