Neetesh Narvaria

29 Jul 2020

Objective

Need to customize HTML output when we publish a publication from Tridion Docs.

How to Do it

We need to create DITA-OT plugin which extends html5 plugin

Let’s do it

What we need is Tridion Docs installed on server

And we should be able to publish content on HTML5

Status should be ‘Release Candidate’ or ‘Draft’ after publish a publication

And you will see html output once click on download as below

For Map

For Topic

Let’s do some stuff with this HTML output

What we are going to do
We’ll apply some CSS on output and also add SDL logo as well.

We are going to need custom output format where we’ll publish this publication.

Let’s name it like ‘Exercise-html5output’

What we are going to learn

Create output format with style processor on Tridion Docs
Customize DITA-OT html output

Here are steps to create new output format

Go to Tridion docs installation folder
%TRIDION_DOCS%\Web\Author\ASP\ClientConfig
Take backup of xml

Openxml and Search for DitaOTTransactionTypeField

Add following xml tag on enumlist tag to add transtype on Tridion Docs

         <item>

                <value>exercise-html5</value>

                <label resourceref="FDITAOTTRANSTYPE.ValueList.exercise-html5.Text">exercise-html5</label>

         </item>

Search for StyleProcessorField on xml

Add following xml tag to add style processor on Tridion Docs

        <item>

                <value>DITA-OT\Exercise</value>

                <label resourceref="FSTYLEPROCESSOR.ValueList.Exercise.Text">Exercise</label>

         </item>

Save MetadataConfig.xml

To Create Style-processor on Tridion Docs folder
- Go to %TRIDION_DOCS%\App\Utilities\DITA-OT
- Copy Infoshare and paste it and rename new folder to Exercise
Now Open Tridion Docs webclient
- Go to Settings -> Output Format
- Click on new button
- Add following information on output format window and click ok
- Now Update publish plug-in setting as this transformtype is not configured on Publish setting
  Open Publish Plug-in setting add “exercise-html5” transformation type and save it

Restart service “Trisoft InfoShare BackgroundTask One”

This allows publication to publish on exercise-html5 output format.

Let’s Customize HTML format now

As we created Style-processor on one previous step, we will create exercise-html5 plugin
What is StyleProcessor in Tridion Docs
- StyleProcessor is DITA-OT for Tridion docs, which process input DITA and render different output based on given transformation type to processor
- In our case we’ll use transformation type exercise-html5.
To Create plugin Go to directory %TRIDION_DOCS%\App\Utilities\DITA-OT\Exercise\plugins
Right click create New folder give some name to folder which will denote your custom plugin.
- In my case I’ll give name sdl.exercise-html5

Go to sdl.exercise-html5 directory do following steps to develop plugin

Create xml as DITA-OT tool will look for plugin.xml and perform operations based on that
Require tag on above xml allows plugin to extend “org.dita.html5” plugin which comes with dita-ot.
Let’s add some feature to plugin
- Add <feature extension="dita.conductor.target.relative" file="integrator.xml"/> after transtype tag and we’ll create integrator.xml and write some xml instructions on it.
Please visit https://www.dita-ot.org/3.5/topics/html-customization.html to understand xml tags mentioned above.
Now we need to provide
- exercise-html5.xsl
- map2html5-cover.xsl
- css
- images directory
this would look like

Let’s look at each file

exercise.css

/*Exercise CSS*/

 

.topichead h2,.topictitle1 {

               border-bottom: 1px solid #dbdbdb;

               font-size: 36px;

    color: #b0b0b0;

    line-height: 80px;

}

.map, .topichead ul{

               list-style: none;

}

 

.topichead ul:first-child{

               /*padding-left: 0px;*/

               border-bottom: 1px solid #dbdbdb;

}

 

.li{

               font-size: 20px;

               color: #757575;

    line-height: 46px;

               margin-top: 0;

    display: block;

               text-decoration: none;

}

 

 a{

               font-size: 20px;

               /*color: #212121;*/

               color: #757575;

    line-height: 46px;

               margin-top: 0;

    cursor: pointer;

    /*display: block;*/

               text-decoration: none;

}

 

 a:hover{

               color: #ff6700;

}

exercise-html5.xsl

<?xml version="1.0" encoding="UTF-8"?><!-- This file is part of the DITA Open Toolkit project.

     See the accompanying license.txt file for applicable licenses. --><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:dita-ot="http://dita-ot.sourceforge.net/ns/201007/dita-ot" version="2.0" exclude-result-prefixes="xs dita-ot">

 

  <xsl:import href="plugin:org.dita.html5:xsl/dita2html5.xsl"/>

 

  <xsl:template match="*" mode="chapterBody">

    <body>

      <xsl:apply-templates select="." mode="addAttributesToHtmlBodyElement"/>

      <xsl:call-template name="setaname"/>  <!-- For HTML4 compatibility, if needed -->

      <xsl:value-of select="$newline"/>

      <xsl:apply-templates select="." mode="addHeaderToHtmlBodyElement"/>

 

      <!-- Include a user's XSL call here to generate a toc based on what's a child of topic -->

      <xsl:call-template name="gen-user-sidetoc"/>

 

                 <nav><div class="milogo-wrapper"><a href="index.html"><img src="images/SDL_Logo.png"/></a></div></nav>

      <xsl:apply-templates select="." mode="addContentToHtmlBodyElement"/>

      <xsl:apply-templates select="." mode="addFooterToHtmlBodyElement"/>

    </body>

    <xsl:value-of select="$newline"/>

  </xsl:template>

 

<xsl:template match="*[contains(@class, ' topic/image ')]/@height">

  <xsl:variable name="height-in-pixel">

    <xsl:call-template name="length-to-pixels">

      <xsl:with-param name="dimen" select="."/>

    </xsl:call-template>

  </xsl:variable>

  <xsl:if test="not($height-in-pixel = '100%')">

    <xsl:attribute name="height">

      <!--xsl:choose>

        <xsl:when test="../@scale and string(number(../@scale))!='NaN'">         

          <xsl:value-of select="number($height-in-pixel) * number(../@scale)"/>

        </xsl:when>

        <xsl:otherwise-->

          <xsl:value-of select="number($height-in-pixel)*2"/>

        <!--/xsl:otherwise>

      </xsl:choose-->

    </xsl:attribute>

  </xsl:if> 

</xsl:template>

 

<xsl:template match="*[contains(@class, ' topic/image ')]/@width">

  <xsl:variable name="width-in-pixel">

    <xsl:call-template name="length-to-pixels">

      <xsl:with-param name="dimen" select="."/>

    </xsl:call-template>

  </xsl:variable>

  <xsl:if test="not($width-in-pixel = '100%')">

    <xsl:attribute name="width">

      <!--xsl:choose>

        <xsl:when test="../@scale and string(number(../@scale))!='NaN'">         

          <xsl:value-of select="number($width-in-pixel) * number(../@scale)"/>

        </xsl:when>

        <xsl:otherwise-->

          <xsl:value-of select="number($width-in-pixel)*2"/>

        <!--/xsl:otherwise>

      </xsl:choose-->

    </xsl:attribute>

  </xsl:if> 

</xsl:template>

   

              

                             

  <xsl:output xmlns:dita="http://dita-ot.sourceforge.net" method="html" encoding="UTF-8" indent="no" doctype-system="about:legacy-compat" omit-xml-declaration="yes"/>

 

</xsl:stylesheet>

map2html5-cover.xsl

 <?xml version="1.0" encoding="UTF-8"?>

<!-- This file is part of the DITA Open Toolkit project.

     See the accompanying license.txt file for applicable licenses. -->

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

 

  <xsl:import href="plugin:org.dita.html5:xsl/dita2html5.xsl"/>

  <xsl:import href="plugin:org.dita.xhtml:xsl/map2html-coverImpl.xsl"/>

  <xsl:import href="plugin:com.sdl.exercise-html5:xsl/exercise-nav.xsl"/>

 

 

 

  <xsl:output xmlns:dita="http://dita-ot.sourceforge.net" method="html" encoding="UTF-8" doctype-system="about:legacy-compat" omit-xml-declaration="yes"/>

 

</xsl:stylesheet>

exercise-nav.xsl

<?xml version="1.0" encoding="UTF-8"?><!-- This file is part of the DITA Open Toolkit project.

     See the accompanying license.txt file for applicable licenses. --><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:dita-ot="http://dita-ot.sourceforge.net/ns/201007/dita-ot" version="2.0" exclude-result-prefixes="xs dita-ot">

 

 

  <xsl:import href="plugin:org.dita.xhtml:xsl/map2html-coverImpl.xsl"/>

 

  <xsl:template match="*[contains(@class, ' map/map ')]" mode="toc" priority="10">

    <xsl:param name="pathFromMaplist"/>

    <xsl:if test="descendant::*[contains(@class, ' map/topicref ')]                                [not(@toc = 'no')]                                [not(@processing-role = 'resource-only')]">

      <nav>

                 <div class="milogo-wrapper"><a href="index.html"><img src="images/SDL_Logo.png"/></a>test</div>

        <ul>

          <xsl:call-template name="commonattributes"/>

          <xsl:apply-templates select="*[contains(@class, ' map/topicref ')]" mode="toc">

            <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>

          </xsl:apply-templates>

        </ul>

      </nav>

    </xsl:if>

  </xsl:template>

 

 

  <xsl:template match="*[contains(@class, ' map/topicref ')]                         [not(@toc = 'no')]                         [not(@processing-role = 'resource-only')]" mode="toc">

    <xsl:param name="pathFromMaplist"/>

    <xsl:variable name="title">

      <xsl:apply-templates select="." mode="get-navtitle"/>

    </xsl:variable>

    <xsl:choose>

      <xsl:when test="normalize-space($title)">

        <li>

          <xsl:call-template name="commonattributes"/>

          <xsl:choose>

            <!-- If there is a reference to a DITA or HTML file, and it is not external: -->

            <xsl:when test="normalize-space(@href)">

              <a>

                <xsl:attribute name="href">

                  <xsl:choose>

                    <xsl:when test="@copy-to and not(contains(@chunk, 'to-content')) and                                      (not(@format) or @format = 'dita' or @format = 'ditamap') ">

                      <xsl:if test="not(@scope = 'external')">

                        <xsl:value-of select="$pathFromMaplist"/>

                      </xsl:if>

                      <xsl:call-template name="replace-extension">

                        <xsl:with-param name="filename" select="@copy-to"/>

                        <xsl:with-param name="extension" select="$OUTEXT"/>

                      </xsl:call-template>

                      <xsl:if test="not(contains(@copy-to, '#')) and contains(@href, '#')">

                        <xsl:value-of select="concat('#', substring-after(@href, '#'))"/>

                      </xsl:if>

                    </xsl:when>

                    <xsl:when test="not(@scope = 'external') and (not(@format) or @format = 'dita' or @format = 'ditamap')">

                      <xsl:if test="not(@scope = 'external')">

                        <xsl:value-of select="$pathFromMaplist"/>

                      </xsl:if>

                      <xsl:call-template name="replace-extension">

                        <xsl:with-param name="filename" select="@href"/>

                        <xsl:with-param name="extension" select="$OUTEXT"/>

                      </xsl:call-template>

                    </xsl:when>

                    <xsl:otherwise><!-- If non-DITA, keep the href as-is -->

                      <xsl:if test="not(@scope = 'external')">

                        <xsl:value-of select="$pathFromMaplist"/>

                      </xsl:if>

                      <xsl:value-of select="@href"/>

                    </xsl:otherwise>

                  </xsl:choose>

                </xsl:attribute>

                <xsl:if test="@scope = 'external' or not(not(@format) or @format = 'dita' or @format = 'ditamap')">

                  <xsl:attribute name="target">_blank</xsl:attribute>

                </xsl:if>

                <xsl:value-of select="$title"/>

              </a>

            </xsl:when>

            <xsl:otherwise>

                                                            <xsl:choose>

                                                             <xsl:when test="$title and $title != ''">

                                                               <h2><xsl:value-of select="$title"/></h2>

                                                             </xsl:when>

                                                             <xsl:otherwise>

                                                              <xsl:value-of select="$title"/>

                                                             </xsl:otherwise>

                                                            </xsl:choose>

            </xsl:otherwise>

          </xsl:choose>

          <!-- If there are any children that should be in the TOC, process them -->

          <xsl:if test="descendant::*[contains(@class, ' map/topicref ')]                                      [not(@toc = 'no')]                                      [not(@processing-role = 'resource-only')]">

            <ul>

              <xsl:apply-templates select="*[contains(@class, ' map/topicref ')]" mode="toc">

                <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>

              </xsl:apply-templates>

            </ul>

          </xsl:if>

        </li>

      </xsl:when>

      <xsl:otherwise><!-- if it is an empty topicref -->

        <xsl:apply-templates select="*[contains(@class, ' map/topicref ')]" mode="toc">

          <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>

        </xsl:apply-templates>

      </xsl:otherwise>

    </xsl:choose>

  </xsl:template>

 

              

                             

  <xsl:output xmlns:dita="http://dita-ot.sourceforge.net" method="html" encoding="UTF-8" indent="no" doctype-system="about:legacy-compat" omit-xml-declaration="yes"/>

 

</xsl:stylesheet>

this will customize your html output.

Let’s create new output format for publication and select exercise-html5 from dropdown
Click next select language and click create.
Now select output format and click publish
index.html would look like
And topic page would look like