HTML page templates

Understand how the Adobe FrameMaker publishing solution allows you to create an HTML page template to customize your page layout.

In this topic

Introduction
Create an HTML page template
Define a mini TOC
Define a breadcrumb navigation
Define a header and footer
Define the body content
Sample HTML page template

Introduction

The Adobe 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 sections 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 standard 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 Output 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

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

Paste the following HTML content into the text file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
</body> 
</html>

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> element after the opening <body> element:
```
<p data-type="fm_variable">Chapter Title Name</p>
```
The HTML page template attribute @data-type is used to identify the type of content described by the enclosing element. In the above example, the <p> element contains a FrameMaker variable.
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:
```
<p data-type="breadcrumbs">
<a data-type="home_link" href="#">Home</a>
<span data-type="separator">:&gt;</span>
</p>
```
In the above example, specify the character (in this case, the greater than symbol written as the HTML entity >) 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 navigation.
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 attribute @data-type 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.
To specify the location where the FrameMaker source content is displayed, use a <div> element with the @data-type attribute set to body. Add the following after the mini TOC:
```
<div data-type="body"></div>
```
To define a footer, add the following before the closing 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.
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> element with the @data-type attribute with value minitoc:

<div data-type="minitoc"></div>

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.

<div data-type="minitoc" data-type-after="H1_Heading1"></div>

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.

<div data-type="minitoc"
     data-type-after="H1_Heading1 H2_Heading2">
</div>

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.
```
<div data-type="minitoc"
     data-type-after="p.H1_Heading1 p.H2_Heading2">
</div>
```

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> element with the attribute @data-type to specify the level of the element inside the element <div>.

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

<div data-type="minitoc">
  <p data-type="minitoc-level1"></p>
  <p data-type="minitoc-level2"></p>
</div>

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> element 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 an element with the data-type attribute and the value 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 navigation

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

<p data-type="breadcrumbs"></p>

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) element 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></p>

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">:&gt;</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">:&gt;</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 element with the attribute @data-type with the value 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 an element <div> and with the attribute @data-type with the value 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> 
<!-- Header using FM variable --> 
<p data-type="fm_variable">Chapter Title Name</p> 
<!-- Breadcrumb --> 
<p data-type="breadcrumbs">Start of Breadcrumb:
<a data-type="home_link" href="#">Home</a>
<span data-type="separator">:&gt;</span></p>
<!-- mini TOC -->
<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> 
<!-- Footer using FM variable --> 
<p>Last modified date: <span data-type="fm_variable">Modification Date (Short)</span></p> 
</body> 
</html>