Die Dateien auf die sich Änderungen beziehen sind in der Regel als Task-Liste visualisiert und beginnen mit dem Themenamen. In dieser Anleitung wurde dafür boilerplate/ gewählt und muss an das entsprechende Theme angepasst werden.
21.11
Themekonfiguration via viewer Backend
Es ist nun möglich grundsätzliche Einstellungen (Logo, Vollbildlogo, Favicon, Titel/Anzeigename) sowie Social Media Links und Footer Links über das Administratorenbackend des Viewers zu konfigurieren.
Logo & Name via Backend konfigurierbar machen
Um Logo und Namen des viewers über das viewer Backend einstellen und dynamisch zu laden können, ist folgender Block in der layout.xhtml zu ergänzen. Die Angaben nach dem Pfad bestimmten die Ausgabegröße des Bildes (Breite, Höhe).
<!-- METHOD TO DYNAMICALLY LOAD THE LOGO AND LABEL/NAME --><ahref="#{request.contextPath}/"> <img src="#{adminThemesBean.getLogo("/images/template/customer-header-logo.png", 80, 53)}" alt="#{adminThemesBean.getThemeLabel(configurationBean.name)} Logo" />
<spanclass="page-header__span">#{adminThemesBean.getThemeLabel(configurationBean.name)}</span></a>
Social Media Profile
Es ist nun möglich, Verlinkungen zu Social Media Profilen im viewer Backend einzutragen. Dafür können folgende Methoden verwendet werden.
Die Links Kontakt, Datenschutz und Impressum können ebenso über das Backend konfiguriert werden. Dafür sind folgende Methoden vorgesehen.
<!-- METHODS TO INSERT FOOTER LINKS VIA VIEWER BACKEND --><!-- CHECK IF CONTACT HAS ENTRY --><c:iftest="#{not empty adminThemesBean.currentTheme.getFooterLink('contact').linkUrl}"> <ahref="#{adminThemesBean.getFooterUrl('contact', 'default_contact_link')}">#{msg.contact}</a></c:if><!-- IF CONTACT IS EMPTY USE MODAL ON PAGE --><c:iftest="#{empty adminThemesBean.currentTheme.getFooterLink('contact').linkUrl}"> <buttonclass="btn btn--icon"data-toggle="modal"data-target="#feedbackModal">#{msg.contact}</button></c:if><a href="#{adminThemesBean.getFooterUrl('privacy', request.contextPath.concat("/privacy"))}">#{msg.privacy}</a>
<a href="#{adminThemesBean.getFooterUrl('legal', request.contextPath.concat("/imprint"))}">#{msg.imprint}</a> <span>powered by</span>
Seitentitel und Favicon
Um das Favicon und Seitentitel zu laden, sind folgende Elemente in allen template*.html Dateien zu ersetzen.
<!-- OLD TITLE LINE --><title><h:outputText value="#{activeDocumentBean.titleBarLabel} - " rendered="#{activeDocumentBean.titleBarLabel != null}" />#{configurationBean.name}</title>
<!-- NEW TITLE LINE --><title><h:outputText value="#{activeDocumentBean.titleBarLabel} - " rendered="#{activeDocumentBean.titleBarLabel != null}" />#{adminThemesBean.getThemeLabel(configurationBean.name)}</title>
<!-- OLD FAVICON LINE --><link rel="shortcut icon" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/images/template/favicon.ico" />
<!-- NEW FAVICON LINE --><linkrel="shortcut icon"href="#{adminThemesBean.getIcon("images/template/favicon.ico", 32, 32)}" />
Quick CSS
Es wurde ein Quick CSS Feld im Backend eingefügt. Um die dort eingetragenen CSS Eigenschaften in die Templates zu integrieren, ist folgender Block nach allen anderen CSS Dateien einzubauen.
<!-- THIS HAS TO BE ADDED AS LAST CSS ENTRY (AFTER OTHER CSS FILES) --><!-- QUICK CSS IN VIEWER BACKEND - ADDS <style> NODE --><h:outputTextescape="false"value="#{adminThemesBean.styleSheet}"/>
Breadcrumbs
Die Breadcrumbs wurden als Komponente integriert und es ist möglich, den vorangestellten Starttext mittels Attribut an- bzw. auszuschalten sowie den Startpunkt als Icon darzustellen. Dafür ist in allen betroffenen Dateien (zum Beispiel der layout.xhtml oder Custom CMS Seiten) nach folgendem Eintrag zu suchen und dieser zu ersetzen:
<!-- OLD BREADCRUMBS --><ui:insertname="breadcrumbs" /><!-- NEW BREADCRUMBS --><!-- BREADCRUMBS --><viewerComponent:breadcrumbsshowIcon="false"showStartText="true" />
Sweetalert2
Sweetalerts2 wird nun auch für das Frontend benutzt und ist in die template*.html Dateien einzubinden.
<!-- ADD THIS CSS LIBRARY --><link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/sweetalert/sweetalert2.min.css?${navigationHelper.buildVersion}" />
<!-- ADD THIS JS LIBRARY --><script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/sweetalert/sweetalert2.min.js?${navigationHelper.buildVersion}"></script>
Piwik
Eine Methode für das Piwik-Tracking wurde umbenannt und muss in folgenden Template Dateien verändert oder ergänzt werden:
<!-- OLD --><!-- PIWIK --><ui:fragmentrendered="#{configurationBean.piwikTracking}"> <viewerComponent:piwikTracking piwikBaseURL="#{configurationBean.piwikBaseURL}" piwikSiteID="#{configurationBean.piwikSiteID}" />
</ui:fragment><!-- NEW --><!-- PIWIK --><ui:fragmentrendered="#{configurationBean.piwikTrackingEnabled}"> <viewerComponent:piwikTracking piwikBaseURL="#{configurationBean.piwikBaseURL}" piwikSiteID="#{configurationBean.piwikSiteID}" />
</ui:fragment>
21.10
Fokusring
Nutzer, die mit dem Keyboard navigieren, können nun fokussierte Elemente deutlicher sehen: Sie werden nun von einem Fokusring umrandet. Ausgelöst wird das Verhalten sobald die Tab-Taste gedrückt wird. Das Styling hierzu wird in dem Mixin .mx-focus-visible definiert und kann entsprechend überschrieben werden.
Änderungen Archivansicht
Die Ansicht, die nur den alleinstehenden Archivbaum anzeigt, wurde zurückgebaut. Im Zuge der wachsenden Funktionalität wird nur noch die vollwertige Archivansicht abgebildet. Die Datei eadTree.less wird zu archivesTree.less umbenannt.
XML Namespaces in Templates hinzufügen
Folgende xml Namespaces müssen in das <html> Element aller template*.html Dateien eingefügt werden:
Der Goobi viewer nutzt eine Vielzahl von externen Javascript und CSS Bibliotheken. Bis auf wenige Ausnamen können nun alle Abhängigkeiten mit npm geprüft und aktualisiert werden. Daraus ergibt sich, dass die Pfade zur jquery.min.js, jquery.ui.touch.punch.min.js und zu der font-awesome.min.css in allen Templates angepasst werden müssen:
Folgende libs sind ersatzlos entfallen. Uns ist nicht bekannt, dass diese in Themes genutzt werden:
overhang
oplTheme
socialshareprivacy.css
rxjs.all.min.js
rxjs.lite.min.js
Änderungen 3D Darstellung
Entfernung des x3dom Javascripts. Uns ist ein Einsatz dieser lib zur Darstellung von X3D Daten in Themes nicht bekannt.
21.09
Anpassung Metadatenansicht
Die Metadatenansicht der Werke wurde neu strukturiert und optisch verbessert. Die Ansicht sollte auf ihre Optik überprüft werden und es sollten hinzugekommene CSS Klassen ergänzt werden. Insbesondere ist auch der Punkt "Bibliografischen Daten" innerhalb der Vollbildansicht zu prüfen. Zu beachten ist, dass Metadaten auf unterschiedlichen Leveln liegen können und entsprechend eingerückt dargestellt werden.
Neuerungen Nutzerprofil
Die Einstellungen für Nutzer am eigenen Profil wurden grundlegend überarbeitet. Die Seite /user/ ist daher auf ihre Optik zu überprüfen. Die Klassen in der user.less sind entsprechend anzupassen.
Javascript + CSS im templateFullscreen
In der templateFullscreen.html sind folgende Javascript Dateien einzubinden.
Die Facettierung der Suche ist umbenannt worden und das Widget Custom Drilldown entfällt: :
Außerdem sollte noch folgender Klassenname geändert werden:
/*** ALT ***/.search-list__drilldown-heading/*** NEU ***/.search-list__facets-heading
Auch müssen eventuell vorhandene Referenzen zum Widget in Theme-Templates angepasst werden:
<!-- ALT -->
<widgetComponent:widget_searchDrilldown />
<!-- NEU -->
<widgetComponent:widget_searchFacets />
Angepasste IDs im Kontakt-Modal
Die IDs der Feedbackform, die im Kontakt-Modal verwendet wird, sind geändert worden. Hintergrund ist, doppelte IDs in auf Seiten mit einer weiteren eingebetteten Kontaktform zu vermeiden. Das Styling der Form sollte daher überprüft werden:
21.07
Anpassung Feedback-/Kontaktformular
Das neue Kontaktformular wird nun in einem gesonderten Modal geöffnet. Links die mit href="#feedback" deklariert sind, öffnen automatisch bei Klick das neue Modal. Dafür muss zunächst unter den userTerms folgender Eintrag hinzugefügt werden:
<!-- ADD THIS BELOW OTHER MODALS -->
<viewerComponent:modalFeedbackForm id="feedbackModal" />
Zudem sollte geprüft werden, ob in der mobilen Ansicht andere Elemente das Formular überlappen.
Im Footer sollte der Link zum Kontaktformular angepasst werden und der Button auf sein Styling überprüft werden
<!-- ALT -->
<a href="#{request.contextPath}/feedback/">#{msg.feedbackLeaveFeedback}</a>
<!-- NEU -->
<button data-toggle="modal" data-target="#feedbackModal">#{msg.contact}</button>
Entfernung vom uglify task (grunt/npm)
Die Verkleinerung von Javascript Dateien per uglify ist obsolet und verursacht Probleme bei neueren Befehlen. Es ist daher Gruntfile.js entsprechend anzupassen. Der task uglify wird dabei durch concat ersetzt:
/*** ALT ***/uglify: { my_target: { files: {'<%=src.jsDistFolder %>custom.min.js': ['<%=src.jsDevFolder %>custom.js'] } }},/*** NEU ***/concat : { options : { separator :';', }, dist : { src : [ '<%=src.jsDevFolder %>custom.js' ], dest :'<%=src.jsDistFolder %>custom.min.js', },},/*** ALT ***/tasks: [ 'uglify','sync' ],/*** NEU ***/tasks: [ 'concat','sync' ],/*** ALT ***/grunt.loadNpmTasks('grunt-contrib-uglify');/*** NEU ***/grunt.loadNpmTasks('grunt-contrib-concat');
Anpassungen in package.json
/* DELETE THIS LINE */"grunt-contrib-uglify": "^3.3.0",/* ADD DEV DEPENDENCY IF MISSING */"grunt-contrib-concat": "^1.0.1",
Einbindung Overlay
Es wurde ein Ladebildschirm ergänzt, der bei der Weiterleitung auf andere Seiten erscheint.
<ui:include src="/resources/includes/overlay.xhtml" />
<!-- ADD THIS LINE -->
<ui:include src="/resources/includes/loadingOverlay.xhtml" />
Neues Modal Zitierlinks
Die Zitierlinks sind nun in einem gesonderten Modal zu finden. Dieses ist auf sein Styling und vor allem auf korrekte Darstellung auf der z-Ebene zu prüfen. Bei einigen Themes kann es vorkommen, dass das Modal von Elementen überlappt wird. Dies ist insbesondere in der Mobilansicht zu prüfen (Sidebar-Buttons).
21.06
Veränderte Einbindung jQuery
Das vorher über Primfaces eingebundene jQuery muss in allen template*.html Dateien manuell an erster Stelle der Javascript libraries eingebunden werden, da Primfaces in dem Goobi viewer nicht mehr verwendet wird.
<!-- ALT -->
<h:outputScript library="primefaces" name="/jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="/jquery/jquery-plugins.js" target="head" />
<!-- NEU -->
<!-- ADD THIS ABOVE ALL OTHER JS LIBS -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jquery.min.js?${navigationHelper.buildVersion}"></script>
Benachrichtigungen im Backend
In der Datei templateAdmin.html sind für die Einbindung von sweetalert2 zusätzliche CSS und Javascript Dateien zu ergänzen.
<!-- CSS: Add this line -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/sweetalert/sweetalert2.min.css?${navigationHelper.buildVersion}" />
<!-- JS: Add this line -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/sweetalert/sweetalert2.min.js?${navigationHelper.buildVersion}"></script>
Update CMS-Templates für die Methode currentPage
Bei allen CMS-Template xhtml Dateien muss folgender String ersetzt werden:
<!-- ALT -->
#{navigationHelper.setCurrentPage(cmsBean.currentPage.title, false, true, true)}
<!-- ODER ALT -->
#{navigationHelper.setCurrentPage(cmsBean.currentPage.menuTitle, false, true, true)}
<!-- NEU-->
#{navigationHelper.setCurrentPage(cmsBean.currentPage)}
Änderung der Methode currentPage
Die Methode zur Kennzeichnung der aktuellen Seite wurde angepasst. Es werden nun nicht mehr veränderliche Texteinträge zur Identifikation der CMS Seiten herangezogen, sondern festbleibende IDs. Ist eine CMS Seite als Statischen Seite zugeordnet, wird dieser stattdessen ein fester String zugeordnet (zum Beispiel "index" für die Startseite - Meldung in der Browserkonsole beachten). Themes sollten daher nach folgendem Eintrag durchsucht werden:
Aufbau und Funktionalität des Widgets wurden verändert und erweitert. Zudem sollte der Vollbildmodus (Karte) für die Facettierung über das Widget auf sein Styling geprüft werden.
Änderungen an der pom.xml
Damit keine unnötigen Dateien mit in die kompilierte viewer.war Datei übernommen werden, muss der Ordner docker excluded werden:
<!-- ALT -->
<excludes>MANIFEST.MF,**/pom.*,install/</excludes>
<!-- NEU -->
<excludes>MANIFEST.MF,**/pom.*,install/,docker/</excludes>
Anpassung der theme-url-mappings.xml
Wenn ein Werk ohne Angabe der Seitenzahl aufgerufen wird, dann soll immer das erste Bild geladen werden. Dafür sind Anpassungen in der theme-url-mappings.xml zu prüfen.
Sofern in dieser Datei ein Mapping für eines der folgenden ids existiert, dann ist die unten stehende Zeile zu ergänzen:
<url-mapping id="image1">
<url-mapping id="object1">
<url-mapping id="fulltext1">
<url-mapping id="fullscreen1">
Zu ergänzende Zeile:
<!-- NEW LINE -->
<action onPostback="false">#{activeDocumentBean.setImageToShow('1')}</action>
<!-- FULL EXAMPLE -->
<url-mapping id="image1">
<pattern value="/image/#{pi:activeDocumentBean.persistentIdentifier}/" />
<view-id value="/viewObject.xhtml" />
<!-- LINE ADDED HERE -->
<action onPostback="false">#{activeDocumentBean.setImageToShow('1')}</action>
<action onPostback="false">#{activeDocumentBean.open}</action>
</url-mapping>
Änderung an der Navigation
Die Navigation kann nun mehrfach eingebunden werden. Deswegen wird ihre ID in der Core-Komponente nun dynamisch vergeben:
<!-- ALT -->
<nav id="navigation" class="navigation" aria-label="#{msg.aria_label__nav_main}">
<!-- NEU -->
<nav id="#{cc.clientId}" class="navigation" aria-label="#{msg.aria_label__nav_main}">
Entsprechend sollte das Styling der Navigation überprüft werden. Außerdem muss eventuell theme-spezifisches Javascript angepasst werden, wenn die ID als Selektor benutzt wird:
Anpassung Sprachumschalter
Die Standardparameter der changeLocal Komponente wurden abgeändert. Im Standard wird nun keine Flagge mehr angezeigt (neuer Default: showFlags="false"), weswegen Themes auf die korrekte Funktionalität des Sprachumschalters zu prüfen sind. Um beispielsweise einen Sprachtoggle nur mit Flaggen und ohne Text anzuzeigen, ist folgender Code einzufügen:
In templateCrowdsourcing.html sowie templateArchives.html ist das themespezifische CSS zu entfernen. Sollen an diesen Templates individuelle Anpassungen stattfinden, ist es ratsam eine zusätzliche CSS Datei einzubinden und einen entsprechenden Vermerk in der README.md einzufügen.
<!-- delete this line -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/css/dist/#{navigationHelper.theme}.min.css?${navigationHelper.buildVersion}" />
Styling Loginnavigation
Änderungen an der Loginnavigation (Dropdown für eingeloggte Nutzer) erfordern die Überprüfung des Stylings dieses Elements im Theme. Die Änderungen betreffen vor allem folgende Datei:
Karten in Kampagnen
Für die erweiterte Kartenfunktionalität sind folgende Dateien in templateCrowdsourcing.html zu ergänzen.
Der Methodenname #{searchBean.facets.currentCollection} wurde umbenannt und ist durch #{searchBean.facets.currentHierarchicalFacetString} zu ersetzen. Für die Prüfung im Theme am besten nach currentCollection Suchen.
README.md
Die README.md Datei wird zukünftig umstrukturiert und ist auf die oberste Ebene des Projektes zu verschieben. In der Datei sind allgemeine Informationen und Besonderheiten zu Seiten/Werkstypen, Einstellungen sowie themespezifischen Eigenschaften zu finden.
Die oberste Ebene der Themeprojekte ist in Eclipse nicht im Standard sichtbar!
Suche auf Karte
In der Datei template.html sind zusätzliche CSS und Javascript Dateien zu ergänzen.
Das neue Widget für die Koordinatensuche muss dem Theme entsprechend angepasst werden. Folgende Dateien sind zu bearbeiten:
21.04
Admin-Topbar im Frontend
Um für Administratoren im Frontend die aus dem Backend bekannte blaue Topbar anzuzeigen kann in die Layout Datei die folgende Komponente eingebunden werden:
Sofern das Theme beim Scrollen Sticky-Inhalte enthält, ist das Verhalten entsprechend zu prüfen.
Um die Topbar besser in das bestehende Design einzufügen, kann es notwendig sein bedingte CSS Klassen hinzuzufügen. Im folgenden Beispiel wird die CSS Klasse -adminActive nur für eingeloggte Administratoren ergänzt:
Im Zuge der Implementierung einer IIIF Presentation API 3.0.0 Unterstützung ist es notwendig in dem Javascript Objekt miradorConfigdie API Version festzulegen. Dafür muss die folgende Zeile hinzugefügt werden:
Die Slider für Zeiträume unterstützen nun mit dem Attribut dir="rtl" die rechts-nach-links Leserichtung. Es sollte das Styling des Widgets Chronology sowie der Timematrix Seite geprüft werden. In dem Haupttemplate sind die folgenden Ergänzungen vorzunehmen:
Weiter muss der folgende Block in der custom.js ergänzt werden:
/* initSliders may be used to add new cms slider styles (swiper configuration objects) to the list of availabe slider styles, or alter existing ones. See the commented out examples below for each use case This method MUST be called before document.ready for them to show up in the styles dropdown in the cms backend*/functioninitSliders() {// EXAMPLE SLIDER// var sliderExampleConfig = {// maxSlides: 8,// timeout: 10000,// imageWidth: 1100,// imageHeight: 500,// swiperConfig: {// slidesPerView: 3,// spaceBetween: 30,// loop: true,// speed: 400,// pagination: {// el: '.slider-example__dots',// clickable: true// },// breakpoints: {// 300: { // slidesPerView: 1.2,// },// 600: { // slidesPerView: 2.3,// },// 900: {// slidesPerView: 3.5, // } // }// }// }// viewerJS.slider.set('example-slider', sliderExampleConfig);}initSliders();
Der Slider sollte über die Vorschau-Funktionalität im Backend geprüft werden.
Es wurde ein neues CMS Template für Slider ergänzt. Die zugehörige LESS Datei lautet:
Aufgrund von Überschneidungen mit der API Swagger Seite muss die Einbindung der themespezifische CSS Datei im templateBlank.htmlgelöscht werden.
boilerplate/templateBlank.html
<!-- delete this line -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/css/dist/#{navigationHelper.theme}.min.css?${navigationHelper.buildVersion}
In der templateMirador.html muss die themespezifische CSS Datei und die Einbindung der Goobi viewer Core JavaScript Datei entfernt werden:
Optimalerweise einen Kommentar hinterlassen, dass die Dateien aufgrund von Überlappungen mit dem Styling der eigenständigen Seiten (Swagger API, Mirador) entfernt wurden.
Sprach-Toggle
Der Sprach-Toggle basiert auf einer neuen Logik und stellt jetzt die ersten beiden in der faces-config.xml als supported-locale konfigurierten Sprachen zur Verfügung. Falls ein Sprachtoggle im Theme genutzt wird, ist zu prüfen ob dieser korrekt eingestellt ist und funktioniert. Beispielhaft für Sprach-Toggle mit de und fr:
Das Widget User Interactions wurde erweitert und umgestaltet. Das Widget ist daher auf sein Styling zu prüfen und die LESS Datei entsprechend zu ergänzen/anzupassen.
Die Datei Gruntfile.js sollte auf die korrekte Einbindung von riot geprüft werden. Dafür am besten die Datei mithilfe des aktuellen boilerplate Themes abgleichen:
riot task konfigurieren
riot im watch task ergänzen
riot task laden
21.02
Update auf Mirador 3
Die importieren Javascript Ressourcen müssen im Template angepasst werden. Dabei sind sämtliche Einträge vom Typ <script type="text/javascript".../> im <head/> des Dokumentes durch die folgenden Zeilen zu ersetzen:
In der selben Datei müssen alle <link type="text/css".../>Elemente entfernt werden, da dass Goobi viewer CSS für diese Seite nicht benötigt wird und das Styling des Mirador stört.
Anpassungen zur Leserichtung (right-to-left)
Der Goobi viewer ist nun in der Lage sein Layout für von rechts nach links ausgerichtete Sprachen anzupassen. Aktuell werden Hebräisch und Arabisch unterstützt. Das Layout wird gewechselt, sobald eine der beiden Sprachen über die Sprachauswahl gesetzt wird. Stark angepasste und individuelle Themes sowie CMS Templates unterstützen diese Funktion meist nicht vollständig ohne manuelle Korrekturen.
Es muss in allen template*.html Dateien im <html> Tag das Attribut dir="" in folgender Form gesetzt werden:
Einige Widgets wurden erweitert und dessen Styling ist bei einem Update zu prüfen. Das Widget Usage wurde um eine kopierbare Zitierempfehlung und ein Popover für den Download von Bilddateien ergänzt. Das Widget Download hat einen einleitenden Infotext bekommen und im Widget User Interactions sind Funktionen zum Leeren des Caches hinzugekommen. Die Anpassungen betreffen die folgenden Dateien:
21.01
Refaktorisierung Bookmarks, Imagecontrols und Widget Suchtreffernavigation
Es wurden Refaktorisierungsarbeiten an den Bookmarksdropdowns im eingeloggten sowie ausgeloggten Zustand durchgeführt. Das Styling der Menüs ist daher auf etwaige Änderungen zu überprüfen:
Es wurden geringfügige Änderungen am Styling des Widgets für die Suchtreffernavigation durchgeführt:
Mirador-Config erweitern
In templateMirador.html muss der folgende Abschnitt ersetzt werden:
Alt:
var miradorConfig = { root:"#{request.contextPath}", userLoggedIn: #{userBean.loggedIn}, };
Neu:
var miradorConfig = { root:"#{request.contextPath}", restEndpoint:"#{configurationBean.restApiUrl}", userLoggedIn: #{userBean.loggedIn}, };
CMS-Templates anpassen
Alle xhtml-Dateien für Theme-CMS-Templates müssen angepasst werden, also alle Dateien in
boilerplate/cms/templates/views/
In diesen Dateien müssen alle <ui:include> Elemente mit src="#{[...].getContent([...])}" ersetzt werden durch ein <h:outputText> Element mit escape="false" und einem value dessen Wert dem src-Attribut des zu ersetzenden <ui:include> entspricht. z.B.:
