HTML page templates

The FrameMaker publishing solution allows you to create an HTML page template to customize your page layout. The page template allows you to add the following components to the published output:

Mini-TOC:

Add a table of contents of the sub-topics within the current topic.

Breadcrumb

Add a navigation trail of the current topic.

Header and footer

Add headers and footers that contain dynamic content defined by variables in the FrameMaker source.

To try out the examples in this topic, create a FrameMaker document using the Reference Card standard FrameMaker template. This template uses the paragraph styles and variables used in the samples in this topic.

After you create the HTML page template, you can set the HTML Page template in the Output tab for any of the available outputs (see Outputs settings).

important: All the components in the HTML page template are optional. You can define a page template with any combination of the components.

Create an HTML page template

1)To create a page template, create a file with a .htt, .htm, or .html extension and open the file in any text editor.

2)Paste the following HTML content into the text file:

3)To add dynamic content to a page header, specify the HTML page template attribute data-type as fm_variable.

To define a header that uses the FrameMaker user-defined variable Chapter Title Name, add the following p tag after the opening body tag (<body>):

<p data-type="fm_variable">Chapter Title Name</p>

important: The data-type HTML page template attribute is used by the publish solution to identify the type of content described by the enclosing tag. In the above example, the p tag contains a FrameMaker variable.

For more details, see Define a header and footer.

4)To add a navigation trail to the output, specify the HTML page template attribute data-type as breadcrumbs.

Add the following after the opening body tag (<body>):

In the above example, specify the character (in this case, greater than symbol) that separates each item of the breadcrumb. The other parts of the definition are required by the publishing solution to create the breadcrumb.

For details and more options in the breadcrumb, see Define a breadcrumb.

5)To define a mini TOC, add the following after the breadcrumb described in the previous step:

<div data-type="minitoc">
   <p data-type="minitoc-level1">
      <span data-type="minitoc-selector">'H1_Heading1'</span>
   </p>
   <p data-type="minitoc-level2">
      <span data-type="minitoc-selector">'H2_Heading2'</span>
   </p>
</div>

To define the mini TOC, specify the data-type attribute as minitoc. For each level, use the data-type attribute for the specific level. Specify the required FrameMaker paragraph style name to display at the corresponding level of the min-TOC.

You can create multi-level mini TOCs of up to 20 levels. For more details, see Define a mini TOC.

6)To specify the location where the FrameMaker source content is displayed, use a div tag with the data-type attribute as body. Add the following after the mini TOC:

7)To define a footer, add the following before the close body tag (</body>):

<p data-type="fm_variable">Creation Date (Long)</p>

Creation Date (Long)is the name of a variable defined in the document. For more details, see Define a header and footer.

8)After you create the page template, you need to include the template in the Outputs tab of the Publish Settings dialog. The publish procedure then creates the mini TOC in the specified output.

important: All page template components are defined within HTML tags. This means that you can add CSS styling (using the style or class tags) to any of the components.

Define a mini TOC

To define a mini TOC, use a div tag with data-type attribute minitoc:

Use the data-type-after attribute to specify the location of the mini TOC in the published output. For example, the following data-type-after definition specifies that the mini TOC will appear after the first occurrence of a H1_Heading paragraph in the published output.

Specify multiple paragraphs in the data-type-after attribute for a mini TOC. The following sample will publish the mini TOC after the first occurrence of an H1_Heading1 style or H2_Heading2 style, whichever appears first in the source. Define multiple paragraphs if, for example, the book contains multiple documents. Where documents can start with a different heading paragraph style.

To specify data-type-after paragraphs:

•Enclose the paragraph(s) in double quotes

•Separate multiple paragraphs with commas or spaces

•Use the backslash escape character if a paragraph name contains a single of double quote.

•If a paragraph and a character style have the same name, fully qualify the style name using p and span, respectively.

note: The data-type-after attribute is optional. If you do not specify the attribute, the mini TOC appears at the point in the output where it is defined in the template.

To define an element in the mini TOC, add a p or div tag with the data-type attribute to specify the level of the element inside the minitoc div tag.

For example, to define a two-level mini TOC:

You can create a multi-level mini TOC of up to 20 levels. Also, the levels in the mini TOC must be placed in ascending order.

You can add a caption at the top of the mini TOC that contains a specific literal value. To add the caption “This section covers the following:”, add a p or div tag with data-type minitoc-caption at the top of the mini TOC definition:

<div data-type="minitoc">
   <p data-type="minitoc-caption">This section covers the following:</p>
   <p data-type="minitoc-level1"></p>
   <p data-type="minitoc-level2"></p>
   <p data-type="minitoc-level3"></p>
</div>

To specify the paragraph to be displayed at a level of the mini TOC, add a tag with the data-type attribute as minitoc-selector:

<div data-type="minitoc">
   <p data-type="minitoc-caption">This section covers the following:</p>
   <p data-type="minitoc-level1"><span data-type="minitoc-selector">'H2_Heading2'</span></p>
   <p data-type="minitoc-level2"><span data-type="minitoc-selector">'H3_Heading3'</span></p>
   <p data-type="minitoc-level3"><span data-type="minitoc-selector">'H4_Heading4'</span></p>
</div>

You can specify multiple paragraphs at the same level of the mini TOC:

<p data-type="minitoc-level1"><span data-type="minitoc-selector">'H2_Heading2' 'H3_Heading3'</span></p>

If you specify multiple paragraphs at the same level of the mini TOC:

•The published content displays the paragraph that was found.

•If multiple paragraphs are found, the published content displays the paragraphs at the same level.

important: Add CSS styles to any of the HTML tags used in the mini TOC definition by using the style of class attributes.

Define a breadcrumb

To define a breadcrumb, use the data-type attribute as breadcrumbs. For example:

You can add static text to display at the start of the breadcrumb. For example, to display “Start of Breadcrumb: ”:

<p data-type="breadcrumbs">Start of Breadcrumb:</p>

Use the anchor (a) tag to specify the home location of the breadcrumb. You can specify any static text as anchor text.

<p data-type="breadcrumbs">Start of Breadcrumb:<a data-type="home_link" href="#">Home</a>

Besides the text of the anchor, the other attributes and values must be added as they are defined above. The publisher uses the exact attributes and values to create the breadcrumb.

Define the separator character to display between the elements of the breadcrumb using the data-type attribute as separator. In the following sample, the separator is the greater than (>) symbol.

<p data-type="breadcrumbs">Start of Breadcrumb:<a data-type="home_link" href="#">Home</a><span data-type="separator">:></span></p>

Like the text at the start, you can also add a static text at the end of the breadcrumb. For example, to display “ :End of Breadcrumb”:

<p data-type="breadcrumbs">Start of Breadcrumb:<a data-type="home_link" href="#">Home</a><span data-type="separator">:></span> :End of Breadcrumb</p>

Define a header and footer

Use FrameMaker variables to define headers and footers in the HTML output.

To define a header or footer, use an HTML tag with the data-type attribute specified as fm_variable. For example, to define a header with the Chapter Title Name variable:

<p data-type="fm_variable">Chapter Title Name</p>

You can also mix static text and variables in a header or footer. The following example displays the last modified date of the current document.

<p>Last modified date:<span data-type="fm_variable">Modification Date (Short)</span></p>

Define the body content

To place the FrameMaker topic content dynamically in the published output, define a div tag and use the data-type attribute specified as body. For example, to create a template with a header, the body, and then a footer:

<p data-type="fm_variable">Chapter Title Name</p>
<div data-type="body">[The FrameMaker topic content will be placed here]</div>
<p>Last modified date:<span data-type="fm_variable">Modification Data (Short)</span></p>

Sample HTML page template

The following sample HTML page template defines the following components.

•A header at the top of the page body

•A breadcrumb trail

•A mini TOC

•The topic content

•A footer after the topic content

To try out this sample, create a document using the Reference Card standard FrameMaker template.

<html>
<body>

<p data-type="fm_variable">Chapter Title Name</p>

<p data-type="breadcrumbs">Start of Breadcrumb: <a data-type="home_link" href="#">Home</a><span data-type="separator">:></span></p>

<div data-type="minitoc">
   <p data-type="minitoc-caption">This section covers the following:</p>
   <p data-type="minitoc-level1"><span data-type="minitoc-selector">'H2_Heading2'</span></p>
   <p data-type="minitoc-level2"><span data-type="minitoc-selector">'H3_Heading3'</span></p>
   <p data-type="minitoc-level3"><span data-type="minitoc-selector">'H4_Heading4'</span></p>
</div>

<p>Last modified date:<span data-type="fm_variable">Modification Date (Short)</span></p>
</body>
</html>