Adding Custom HTML Content in WebHelp Responsive Output
You can add custom HTML content in the WebHelp Responsive output by inserting it in a well-formed XML file that will be referenced in the transformation scenario. This content may include references to additional JavaScript, CSS, and other types of resources, or such resources can be inserted inline within the HTML content that is inserted in the XML file.
To include custom HTML content in the WebHelp Responsive output files, follow these steps:
- Insert the HTML content in a well-formed XML file. There are several things to
consider in regards to this XML file:
- Well-Formedness - If the file is not a Well-formed XML document (or fragments are not well-formed), the
transformation will fail.
A common use case is if you want to include several
scriptorlinkelements. In this case, the XML fragment has multiple root elements and to make it well-formed, you can wrap it in anhtmlelement. This element tag will be filtered out and only its children will be copied to the output documents. Similarly, you can wrap your content inhead,body,html/head, orhtml/bodyelements. - Referencing Resources in the XML File - You can include references to
local resources (such as JavaScript or CSS files) by using the predefined
${oxygen-webhelp-output-dir}macro to specify their paths relative to the output directory:<html> <script type="text/javascript" src="${oxygen-webhelp-output-dir}/js/test.js"/> <link rel="stylesheet" type="text/css" href="${oxygen-webhelp-output-dir}/css/test.css" /> </html>If you want that the path of your resource to be relative to the templates directory, you can use the
To copy the referenced resources to the output directory, follow the procedure in: Copying Additional Resources to WebHelp Output Directory.${oxygen-webhelp-template-dir}macro. - Inline JavaScript or CSS Content - If you want to include inline
JavaScript or CSS content in the XML file, it is important to place this content inside
an
XML comment, as in the following
examples:
JavaScript:
<script type="text/javascript"> <!-- /* Include JavaScript code here. */ function myFunction() { return true; } --> </script>CSS:
<style> <!-- /* Include CSS style rules here. */ *{ color:red } --> </style>
- Well-Formedness - If the file is not a Well-formed XML document (or fragments are not well-formed), the
transformation will fail.
- Edit the WebHelp Responsive transformation scenario.
- Go to the Parameters tab.
- Edit the value of the webhelp.fragment.head parameter and set it to the
absolute path of the XML file created in step 1. Your additional content will be included
at the end of the
headelement of your output document.Note
If you want to insert the content in another location within the output document, you can reference the XML file in any of the other parameters listed in Insert Custom XHTML Fragments in Predefined Placeholders. - Click OK to save the changes to the transformation scenario.