Lab 13 - Specialize the DITA OT HTML5 output using a plugin

During the lab, you will specialize the default DITA Open Toolkit HTML5 output to add a custom footer to each page.

You can customize the default HTML5 output by providing to the DITA Open Toolkit a plugin which contains your custom footer and CSS. Using Componize pipelines you can run this output processing and include standard transformation parameters through the use of pipeline options.

  1. Copy the com.componize.custom-html5 plugin from the Eclipse resources into the plugins folder located in your DITA Open Toolkit installation.
  2. At the root of bin folder located in your DITA Open Toolkit installation, run the following command: dita --install
  3. Connect to the Alfresco Share interface.
  4. Update the dita-ot.properties file from the Eclipse resources to add the nav-toc parameter with value full, then copy that file in your Document Library. 
    nav-toc = full
  5. At the root of your Document Library, update the DITA Open Toolkit pipeline configuration file named ditaot-html5.xml. Add a new transtype option which points to custom-html5. Add a new propertyfile option which points to your DITA Open Toolkit property file 
    <?xml version="1.0" encoding="UTF-8"?>
<pipelineConfiguration xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="cpnz:pipeline:xsd:pipeline-configuration.xsd">
    <pipeline>ditaot-html5</pipeline>
    <options>
      <option>
        <name>transtype</name>
        <value>custom-html5</value>
      </option>
      <option>
        <name>propertyfile</name>
        <value>alfresco:/Sites/my-sample-site/documentLibrary/dita-ot.properties</value>
      </option>
...
  6. Save your changes.
  7. Test your pipeline configuration on a sample ditamap file.
The HTML5 output should be using your custom CSS file and footer.