Skip to content

03. HTML Pages

Jump to bottom
James231 edited this page Jun 9, 2020 · 2 revisions

This section describes creating a .html page in the Input folder which will become a page of the documentation when the tool is run.

A HTML page can contain all the usual HTML tags. The code you write will be inserted into the Page.html file in the Template folder to produce the complete documentation page. This means it will likley be inserted within <body> tags so you don't need to do any groundwork, just write the content for your page.

Simple Example

For example, if you create an index.html page in the Input folder with the following content:

<h3>My Page Title</h3>
<p>
    This is my page content.
</p>

And if the Page.html file in the Template folder contains this content:

<html>
    <body>
        <h1>This is my documentation</h1>
        @ChildContent;
    </body>
</html>

Then when you generate the documentation an index.html file will be created in the Output folder with the following content:

<html>
    <body>
        <h1>This is my documentation</h1>
        <h3>My Page Title</h3>
        <p>
            This is my page content.
        </p>
    </body>
</html>

Page Properties

A HTML page may contain properties at the start of the Input file. A property consists of just a name and a value and allows the value to be injected elsewhere in the template. For example, this is useful if you want to put the title of each page in a different location to the content within the Page.html template. Or if you want to display information for each page in the sidenav.

Page properties should be specified using PProperty tags like this:

<PProperty name="propertyName" value="propertyValue"/>

Al properties should be at the top of the HTML page and each should be on a new line. The remainder of the file should consist of the HTML which will get injected into the template file. Within templates, page properties can be accessed using the @Page.propertyName; syntax (where the ; is important!).

Page Property Example

To give an example suppose we have the following HTML page:

<PProperty name="PageTitle" value="My Super Page"/>
<PProperty name="LastEdit" value="6th June 2020"/>

<p>
    This is my page content.
</p>

Then if the Page.html template file is this:

<html>
    <body>
        <h3>@Page.PageTitle;</h3>
        <p>Last Edit: @Page.LastEdit;</p>
        @ChildContent;
    </body>
</html>

Then the final generated documentation page is this:

<html>
    <body>
        <h3>My Super Page</h3>
        <p>Last Edit: 6th June 2020</p>
        <p>
            This is my page content.
        </p>
    </body>
</html>

Template Elements

HTML pages can also contain Template Elements (i.e. custom controls) for example you can create a control <card>...</card> Template elements can have multiple inputs including child content. See this page on Template Elements for more information.

Enjoying using Documentation Templater? Make sure you ⭐ the repo!!!

Clone this wiki locally