Nun ist es mir schon wieder passiert: weil ich mir keine Notizen gemacht hatte, durfte ich von neuem herausfinden, warum mein HTML-Output mit dem Plugin TOCJS wieder die Umlaute nicht richtig darstellt.
Es gilt, die Datei \demo\tocjs\xsl\tocjs.xml zu editieren. Ändern Sie den Wert für encoding von utf-8 auf ISO-8859-1. So muß es am Ende aussehen:
<xsl:output method="text" encoding="ISO-8859-1"/>
Diese Aktualisierung des TOCJS-Plugins ist auch in die neue PDF-Publikation mit eingeflossen. In ihr sind sämtliche Kapitel mit den Ausgabeformaten HTML, CHM und ePUB mit eingebunden. Wenn Ihnen die Ditalog-Artikel eine Hilfe waren, schreiben Sie darüber in Ihrem Blog! Wenn Sie Ihnen keine Hilfe waren, schreiben Sie die Gründe ebenfalls in Ihrem Blog.
| Titel des Downloads: | Ausgabeformate HTML und CHM |
| Art der Publikation: | Kapitel |
| Beschreibung: | Sämtliche Artikel zu den Ausgabeformaten HTML, HTML mit dem Plugin TOCJS (Javascript-Navigationsframe) sowie CHM (Windowshilfe). Ohne Leerseiten. |
| Aktualisiert am: | 18.04.2011. Die EPUB-Generierung ist in der Kapitelausgabe "Dita4Publishers" zu finden. |
| Anzahl der Downloads: | 453 |
Anleitung: So generieren Sie HTML-Output mit Javascript-Navigation.
Voraussetzung: Das Plugin wurde ins DITA-OT integriert, die frameset.html und die build-Datei wurden angepaßt!
Konzept: Beispiel einer Build-Datei für das Plugin TOCJS.
Zum Verstehen der Build-Datei ist es nützlich, die DITA-Verzeichnisstruktur, wie sie im Beispiel genutzt wurde, zu kennen.
Es wurden (08/2009) noch beide DITA-OT-Versionen genutzt, da das 1.5er noch keine Stichwörter (Index) im PDF2-Output generierte. Die Quelldateien wurden in einem Extraverzeichnis ausgelagert, damit sie schneller gesichert werden können. Diese Struktur ist nicht zwingend, soll aber das Beispiel der build-Datei illustrieren.
Für den tocjs-Output wurde die bereits vorhandene XHTML-Build-Datei angepaßt. Das alte HTML-Output-Verzeichnis blieb dasselbe. Die grauen Zeilen kennzeichnen die neu hinzugekommenen TOCJS-Anpassungen. Der Übersicht wegen wurde auf die Notation ${file.separator} verzichtet.
<?xml version="1.0" encoding="iso-8859-1"?>
<project basedir="..\.." default="all" name="Administrator Dokumentation">
<property name="dita.dir" value="C:\DITA-OT1.5"/>
<import file="${dita.dir}\integrator.xml"/>
<import file="${dita.dir}\build.xml" />
<target name="all" depends="integrate" >
<ant antfile="${dita.dir}\build.xml" target="init">
<property name="args.logdir" value="C:\DITA-SRC\log" />
<property name="args.input" value="C:\DITA-SRC\ditalog.ditamap" />
<property name="output.dir" value="C:\DITA-SRC\out\html-admin" />
<property name="transtype" value="xhtml" />
<property name="args.css" value="C:\DITA-SRC\css\ditalog.css" />
<property name="args.csspath" value="css" />
<property name="args.dita.locale" value="de-de" />
<property name="args.copycss" value="yes" />
<property name="args.hdr" value="C:\DITA-SRC\includes\header.xml" />
<property name="args.ftr" value="C:\DITA-SRC\includes\footer.xml" />
<property name="args.xsl" value="${dita.dir}\xsl\dita2xhtml.xsl" />
<property name="dita.input.valfile" value="C:\DITA-SRC\filters\ditalog.ditaval" />
<property name="validate" value="true" />
</ant>
Hier wird die angepaßte frameset.html, die im Quellordner \includes liegt, in das HTML-Output-Verzeichnis kopiert:
<copy todir="C:\DITA-SRC\out\html-admin"> <fileset dir="C:\DITA-SRC\includes"> <include name="frameset.html" /> </fileset> </copy>
Hier werden sämtliche Bilddateien in das HTML-Output-Verzeichnis kopiert:
<copy todir="C:\DITA-SRC\out\html-admin\images"> <fileset dir="C:\DITA-SRC\images"> <include name="**/*.gif" /> </fileset> </copy> </target>
Es folgt die eigentliche Anpassung für das Javascript-Menü. Die Datei toctree.js wird nach der Generierung ins HTML-Output-Hauptverzeichnis abgelegt. Innerhalb des Copy-Befehls werden sämtliche Basefiles des Plugins aus dem Ordner \demo\tocjs\basesfiles in das HTML-Output-Hauptverzeichnis kopiert.
<target name="sample2tocjs" description="Generate tocjs javascript file" depends="all">
<property name="content.frame" value="contentwin"/>
<antcall target="dita2tocjs">
<param name="transtype" value="tocjs"/>
<param name="args.input" value="C:\DITA-SRC\ditalog.ditamap"/>
<param name="output.file" value="C:\DITA-SRC\out\html-admin\toctree.js"/>
</antcall>
<copy todir="C:\DITA-SRC\out\html-admin">
<fileset dir="${dita.dir}\demo\tocjs\basefiles"><include name="**/*"/></fileset>
</target>
</project>
Konzept: Die HTML-Frameset-Dateien und Javascript-Dateien im Outputverzeichnis des Plugins TOCJS.
Nach einem erfolgreichem Build befinden sich folgende Dateien im Output-Verzeichnis:
Diese Datei ist das eigentliche Hauptprodukt des Plugins. Ist diese nicht generiert worden, ist der build fehlgeschlagen. Sie verwandelt die bisher starre HTML-Navigation in eine ausklappbare Javascript-Verzeichnisbaum-Struktur. Sie wird im Output in die tocnav.html eingebunden und bildet mit dieser dann den linken Navigationsframe in Form eines Verzeichnisbaums.
Die Ordner css und img sowie die Dateien event.js, treeview.js,
yahoo.js und tocnav.html sind die sogenannten Basefiles des PlugIns. Sie werden durch die build-Datei vom Plugin-Verzeichnis \demo\tocjs\basefiles in das HTML-Outputverzeichnis kopiert.
Die Datei tocnav.html im Ordner \demo\tocjs\basefiles könnten Sie eindeutschen, so dass nicht mehr Expand all und Collapse all im Navigationsbaum steht. Eine nicht sehr elegante Übersetzung wäre Ausklappen und Einklappen. Diese Datei stellt durch die Einbindung der individualisierten toctree.js den linken Navigationsframe.
Diese Datei ist im Output die Startdatei. Doppelklickt man diese, öffnet sich der HTML-Output korrekt mit der tocnav.html als Navigationsdatei und der entsprechend festgelegten Startdatei des Contentframes rechts. Sie wird innerhalb der XML-Quelldateien abgelegt und in das HTML-Outputverzeichnis kopiert (siehe dazu den Kopierbefehl in der Build-Datei). Folgende grün unterstrichenen Anpassungen bezüglich der Frames wurden vorgenommen:
Diese Datei ist das konventionelle Ergebnis der XHTML-Output-Generierung – und ein Zwischenschritt auf dem Weg zum Javascript-Verzeichnisbaum. Sie ist die alte starre HTML-Navigationsdatei, wie sie ohne das Plugin tocjs generiert wurde.
Die Ordner topics und images sind hier im Beispiel die normalen Ergebnis-Dateien des XHTML-Outputs, wie er weiterhin im rechten Content-Frame zur Anzeige kommt.
Anleitung: Original-Anleitung von Shawn McKenzie zur Installation und Integration des Plugins.
Ein Einsatzbeispiel des Plugins wäre der XHTML-Output des Ditalogs, erreichbar unter www.tocjs.ditalog.com