Erfahren Sie, wie Sie mit Client-seitigen Bibliotheken oder Clientlibs CSS and JavaScript für eine Adobe Experience Manager (AEM) Sites-Implementierung bereitstellen und verwalten können. In diesem Tutorial wird auch erläutert, wie das Modul ui.frontend, ein entkoppeltes webpack-Projekt, in den End-to-End-Build-Prozess integriert werden kann.
Vergegenwärtigen Sie sich die erforderlichen Tools und Anweisungen zum Einrichten einer lokalen Entwicklungsumgebung.
Außerdem wird das Tutorial zu Komponentengrundlagen empfohlen, um sich mit den Grundlagen von Client-seitigen Bibliotheken und AEM vertraut zu machen.
Wenn Sie das vorherige Kapitel erfolgreich abgeschlossen haben, können Sie das Projekt wiederverwenden und die Schritte zum Ausprobieren des Ausgangsprojekts überspringen.
Checken Sie den Basis-Code aus, auf dem das Tutorial aufbaut:
Checken Sie die Verzweigung tutorial/client-side-libraries-start
aus GitHub aus.
$ cd aem-guides-wknd
$ git checkout tutorial/client-side-libraries-start
Stellen Sie die Code-Basis mithilfe Ihrer Maven-Kenntnisse in einer lokalen AEM-Instanz bereit:
$ mvn clean install -PautoInstallSinglePackage
Wenn Sie AEM 6.5 oder 6.4 verwenden, fügen Sie das classic
-Profil an beliebige Maven-Befehle an.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Sie können den fertigen Code jederzeit auf GitHub anzeigen oder den Code lokal auschecken, indem Sie zur Verzweigung tutorial/client-side-libraries-solution
wechseln.
ui.frontend
und ein webpack-Entwicklungs-Server zur dedizierten Frontend-Entwicklung verwendet werden.In diesem Kapitel fügen Sie einige allgemeine Stile zur WKND-Website und zur Artikelseiten-Vorlage hinzu, um die Implementierung den Benutzeroberflächen-Mockups anzugleichen. Sie verwenden einen erweiterten Frontend-Workflow, um ein webpack-Projekt in eine AEM-Client-Bibliothek zu integrieren.
Artikelseite mit angewendeten allgemeinen Stilen
Client-seitige Bibliotheken bieten eine Möglichkeit zum Organisieren und Verwalten von CSS- und JavaScript-Dateien, die für eine AEM Sites-Implementierung erforderlich sind. Die allgemeinen Ziele für Client-seitige Bibliotheken (Clientlibs) sind:
Weitere Informationen zur Verwendung Client-seitiger Bibliotheken finden Sie hier.
Client-seitige Bibliotheken sind mit einigen Einschränkungen verbunden. Insbesondere werden gängige Frontend-Sprachen wie Sass, LESS und TypeScript nur in begrenztem Umfang unterstützt. Im Tutorial zeigen wir Ihnen, wie hier das Modul ui.frontend helfen kann.
Stellen Sie die anfängliche Code-Basis in einer lokalen AEM-Instanz bereit und navigieren Sie zu http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html. Diese Seite ist ungestylt. Implementieren wir nun Client-seitige Bibliotheken für die WKND-Marke, um CSS und JavaScript zur Seite hinzuzufügen.
Als Nächstes untersuchen wir die vom AEM-Projektarchetyp generierte Clientlibs-Organisation.
Allgemeines Diagramm zur Organisation Client-seitiger Bibliothen und Seiteneinbindung
Die folgende Client-seitige Bibliotheksorganisation wird vom AEM-Projektarchetyp generiert, ist jedoch nur ein Ausgangspunkt. Die Art und Weise, wie in einem Projekt CSS und JavaScript letztendlich verwaltet und in einer Sites-Implementierung bereitgestellt werden, kann je nach Ressourcen, Fachkenntnissen und Anforderungen erheblich variieren.
Wenn Sie VSCode oder eine andere IDE verwenden, öffnen Sie das Modul ui.apps.
Erweitern Sie den Pfad /apps/wknd/clientlibs
, um die vom Archetyp generierten Clientlibs anzuzeigen.
Im folgenden Abschnitt werden diese Clientlibs ausführlicher erläutert.
In der folgenden Tabelle sind die Client-Bibliotheken zusammengefasst. Weitere Informationen zum Einschließen von Client-Bibliotheken finden Sie hier.
Name | Beschreibung | Anmerkungen |
---|---|---|
clientlib-base |
CSS- und JavaScript-Basis, die für die Funktionalität der WKND-Website erforderlich ist. | Bettet Client-Bibliotheken der Kernkomponente ein. |
clientlib-grid |
Generiert das erforderliche CSS, damit der Layout-Modus funktioniert. | Mobile-/Tablet-Haltepunkte können hier konfiguriert werden. |
clientlib-site |
Enthält ein Website-spezifisches Design für die WKND-Website. | Generiert vom Modul ui.frontend . |
clientlib-dependencies |
Bettet etwaige Drittanbieter-Abhängigkeiten ein. | Generiert vom Modul ui.frontend . |
Beachten Sie, dass clientlib-site
und clientlib-dependencies
von der Quell-Code-Verwaltung ignoriert werden. Dies ist beabsichtigt, da diese zum Zeitpunkt der Erstellung durch das Modul ui.frontend
generiert werden.
Aktualisieren Sie als Nächstes die im Modul ui.frontend definierten Basisstile. Die Dateien im Modul ui.frontend
generieren die clientlib-site
- und clientlib-dependecies
-Bibliotheken, die das Website-Design und alle Drittanbieter-Abhängigkeiten enthalten.
Client-seitige Bibliotheken unterstützen keine höheren Sprachen wie Sass oder TypeScript. Es gibt mehrere Open-Source-Tools wie NPM und webpack, die die Frontend-Entwicklung beschleunigen und optimieren. Das Ziel des Moduls ui.frontend besteht darin, diese Tools verwenden zu können, um die meisten Frontend-Quelldateien zu verwalten.
Öffnen Sie das Modul ui.frontend und navigieren Sie zu src/main/webpack/site
.
Öffnen Sie die Datei main.scss
Die Datei main.scss
ist der Einstiegspunkt zu den Sass-Dateien im Modul ui.frontend
. Sie enthält die Datei _variables.scss
mit einer Reihe von Markenvariablen, die in den verschiedenen Sass-Dateien des Projekts verwendet werden sollen. Die Datei _base.scss
ist ebenfalls enthalten und definiert einige grundlegende Stile für HTML-Elemente. Ein regulärer Ausdruck enthält die Stile für einzelne Komponentenstile unter src/main/webpack/components
. Ein weiterer regulärer Ausdruck enthält die Dateien unter src/main/webpack/site/styles
.
Überprüfen Sie die Datei main.ts
. Sie umfasst main.scss
sowie einen regulären Ausdruck, um alle .js
- oder .ts
-Dateien im Projekt zu erfassen. Dieser Einstiegspunkt wird von den webpack-Konfigurationsdateien als Einstiegspunkt für das gesamte Modul ui.frontend
verwendet.
Überprüfen Sie die Dateien unter src/main/webpack/site/styles
:
Diese Dateistile betreffen globale Elemente in der Vorlage, z. B. Header, Footer und Hauptinhalts-Container. Die CSS-Regeln in diesen Dateien zielen auf verschiedene HTML-Elemente (header
, main
und footer
) ab. Diese HTML-Elemente wurden durch Richtlinien im vorherigen Kapitel Seiten und Vorlagen definiert.
Erweitern Sie den Ordner components
unter src/main/webpack
und überprüfen Sie die Dateien.
Jede Datei wird einer Kernkomponente wie der Akkordeon-Komponente zugeordnet. Jede Kernkomponente wird mit Block Element Modifier(BEM)-Notation erstellt, um das Targeting bestimmter CSS-Klassen mit Stilregeln zu erleichtern. Die Dateien unter /components
wurden vom AEM-Projektarchetyp mit den verschiedenen BEM-Regeln für die einzelnen Komponenten ignoriert.
Laden Sie die WKND-Basisstile wknd-base-styles-src-v3.zip herunter und entzippen Sie die Datei.
Um während des Tutorials Zeit zu sparen, werden mehrere Sass-Dateien, die die WKND-Marke basierend auf Kernkomponenten und der Struktur der Artikelseiten-Vorlage implementieren, bereitgestellt.
Überschreiben Sie den Inhalt von ui.frontend/src
mit Dateien aus dem vorherigen Schritt. Der Inhalt der ZIP-Datei sollte die folgenden Ordner überschreiben:
/src/main/webpack
/components
/resources
/site
/static
Überprüfen Sie die geänderten Dateien, um Details zur WKND-Stilimplementierung anzuzeigen.
Ein wichtiges Integrationselement, das im Modul ui.frontend integriert ist, aem-clientlib-generator, wandelt die kompilierten CSS- und JS-Artefakte aus einem webpack/npm-Projekt in AEM Client-seitige Bibliotheken um.
Der AEM-Projektarchetyp richtet diese Integration automatisch ein. Erfahren Sie als Nächstes, wie dies funktioniert.
Öffnen Sie ein Befehlszeilen-Terminal und installieren Sie das Modul ui.frontend mit dem Befehl npm install
:
$ cd ~/code/aem-guides-wknd/ui.frontend
$ npm install
npm install
muss nur einmal ausgeführt werden, z. B. nach einem neuen Klon oder Projekterstellung.
Starten Sie den webpack-Dev-Server im Modus watch, indem Sie den folgenden Befehl ausführen:
$ npm run watch
Dadurch werden die Quelldateien aus dem Modul ui.frontend
kompiliert und die Änderungen mit AEM unter http://localhost:4502 synchronisiert.
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies
http://admin:admin@localhost:4502 > OK
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
http://admin:admin@localhost:4502 > OK
Der Befehl npm run watch
füllt schließlich clientlib-site und clientlib-dependencies im Modul ui.apps auf, das dann automatisch mit AEM synchronisiert wird.
Es gibt auch ein Profil npm run prod
, das JS und CSS minimiert. Dies ist die Standardkompilierung, sobald der webpack-Build über Maven ausgelöst wird. Weitere Informationen zum ui.frontend-Modul finden Sie hier.
Überprüfen Sie die Datei site.css
unter ui.frontend/dist/clientlib-site/site.css
. Dies ist die kompilierte CSS-Datei, die auf den Sass-Quelldateien basiert.
Überprüfen Sie die Datei ui.frontend/clientlib.config.js
. Dies ist die Konfigurationsdatei für das npm-Plug-in aem-clientlib-generator, das den Inhalt von /dist
in eine Client-Bibliothek umwandelt und in das Modul ui.apps
verschiebt.
Überprüfen Sie die Datei site.css
im Modul ui.apps unter ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css
. Hierbei sollte es sich um eine identische Kopie der Datei site.css
aus dem Modul ui.frontend handeln. Da sie sich nun im Modul ui.apps befindet, kann sie für AEM bereitgestellt werden.
Da clientlib-site zum Zeitpunkt der Erstellung mit npm oder Maven kompiliert wird, kann sie seitens der Quell-Code-Verwaltung im Modul ui.apps problemlos ignoriert werden. Überprüfen Sie die Datei .gitignore
unter ui.apps.
Öffnen Sie den Artikel „LA Skatepark“ in AEM unter http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.
Sie sollten nun die aktualisierten Stile für den Artikel sehen. Möglicherweise müssen Sie einen Hard Refresh (harte Aktualisierung) durchführen, um etwaige vom Browser zwischengespeicherte CSS-Dateien zu löschen.
Das ist den Mockups doch schon viel ähnlicher!
Die Schritte, die oben zum Erstellen und Bereitstellen des ui.frontend-Codes für AEM ausgeführt wurden, werden automatisch ausgeführt, wenn ein Maven-Build vom Stamm des Projekts mvn clean install -PautoInstallSinglePackage
ausgelöst wird.
Nehmen Sie als Nächstes eine kleine Änderung am Modul ui.frontend
vor, damit npm run watch
die Stile automatisch für die lokale AEM-Instanz bereitstellt.
Öffnen Sie vom Modul ui.frontend
aus die Datei ui.frontend/src/main/webpack/site/_variables.scss
.
Aktualisieren Sie die Farbvariable $brand-primary
:
//== variables.css
//== Brand Colors
$brand-primary: $pink;
Speichern Sie die Änderungen.
Kehren Sie zum Browser zurück und aktualisieren Sie die AEM-Seite, um die Aktualisierungen anzuzeigen:
Setzen Sie die Änderung an der Farbe $brand-primary
zurück und stoppen Sie den webpack-Build mit dem Befehl CTRL+C
.
Das Modul ui.frontend ist unter Umständen nicht für alle Projekte erforderlich. Das Modul ui.frontend sorgt für zusätzliche Komplexität. Wenn es nicht notwendig/wünschenswert ist, einige dieser erweiterten Frontend-Tools (Sass, webpack, npm …) zu verwenden, ist es möglicherweise gar nicht erforderlich.
Als Nächstes sehen wir uns an, wie die Clientlibs auf der AEM-Seite referenziert werden. Eine gängige Best Practice bei der Web-Entwicklung ist die Einbindung von CSS in den HTML-Header <head>
und von JavaScript direkt vor dem schließenden </body>
-Tag.
Navigieren Sie zur Artikelseiten-Vorlage unter http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
Klicken Sie auf das Symbol Seiteninformationen und wählen Sie im Menü die Option Seitenrichtlinie aus, um das Dialogfeld Seitenrichtlinie anzuzeigen.
Seiteninformationen > Seitenrichtlinie
Beachten Sie, dass die Kategorien für wknd.dependencies
und wknd.site
hier aufgeführt sind. Standardmäßig werden Clientlibs, die über die Seitenrichtlinie konfiguriert werden, aufgeteilt, um CSS in den Seitenkopf und JavaScript am Textende einzuschließen. Sie können das Clientlib-JavaScript, das im Seitenkopf geladen wird, explizit auflisten. Dies ist der Fall für wknd.dependencies
.
Es ist auch möglich, wknd.site
oder wknd.dependencies
mit dem Skript customheaderlibs.html
oder customfooterlibs.html
direkt von der Seitenkomponente aus zu referenzieren. Die Verwendung der Vorlage bietet Ihnen Flexibilität, da Sie auswählen können, welche Client-Bibliotheken pro Vorlage verwendet werden, wenn Sie beispielsweise über eine umfangreiche JavaScript-Bibliothek verfügen, die nur für eine ausgewählte Vorlage verwendet wird.
Navigieren Sie zur Seite LA Skateparks über die Artikelseiten-Vorlage: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.
Klicken Sie auf das Symbol Seiteninformationen und wählen Sie im Menü die Option Als veröffentlicht anzeigen aus, um die Artikelseite außerhalb des AEM-Editors zu öffnen.
Zeigen Sie die Seitenquelle von http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled an. Sie sollten die folgenden Clientlib-Verweise in <head>
sehen:
<head>
...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-78fb9cea4c3a2cc17edce2c2b32631e2-lc.min.css" type="text/css">
...
</head>
Beachten Sie, dass die Clientlibs den /etc.clientlibs
-Proxy-Endpunkt verwenden. Sie sollten auch sehen, dass die folgende Clientlib unten auf der Seite Folgendes enthält:
...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-7157cf8cb32ed66d50e4e49cdc50780a-lc.min.js"></script>
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-53e6f96eb92561a1bdcc1cb196e9d9ca-lc.min.js"></script>
...
</body>
Für AEM 6.5/6.4 werden die Client-seitigen Bibliotheken nicht automatisch minimiert. Weitere Informationen finden Sie in der HTML Library Manager-Dokumentation zum Aktivieren der Minimierung (empfohlen).
Auf der Veröffentlichungsseite ist es wichtig, dass die Client-Bibliotheken nicht von /apps bereitgestellt werden, da dieser Pfad aus Sicherheitsgründen mithilfe des Dispatcher-Filterabschnitts beschränkt werden sollte. Die allowProxy-Eigenschaft der Client-Bibliothek stellt sicher, dass CSS und JS von /etc.clientlibs bereitgestellt werden.
Erfahren Sie, wie Sie einzelne Stile implementieren und Kernkomponenten mithilfe des Stilsystems von Experience Manager wiederverwenden. Unter Entwickeln mit dem Stilsystem finden Sie Informationen zur Verwendung des Stilsystems, um Kernkomponenten mit markenspezifischem CSS und erweiterten Richtlinienkonfigurationen des Vorlagen-Editors zu erweitern.
Sehen Sie sich den fertigen Code auf GitHub an oder überprüfen Sie den Code und stellen Sie ihn lokal auf der Git-Verzweigung tutorial/client-side-libraries-solution
bereit.
tutorial/client-side-libraries-solution
aus.In den vorherigen Übungen wurden mehrere Sass-Dateien im Modul ui.frontend aktualisiert, wobei diese Änderungen durch einen Build-Prozess schließlich in AEM widergespiegelt werden. Als Nächstes sehen wir uns eine Methode an, die über einen webpack-Dev-Server die schnelle Entwicklung von Frontend-Stilen in statischem HTML-Code ermöglicht.
Diese Methode ist praktisch, wenn der Großteil der Stile und des Frontend-Codes von einem einzelnen Frontend-Entwickler bzw. einer einzelnen Frontend-Entwicklerin ausgeführt wird, der bzw. die unter Umständen nicht problemlos auf eine AEM-Umgebung zugreifen kann. Mit dieser Methode kann der Frontend-Entwickler bzw. die Frontend-Entwicklerin auch direkte Änderungen am HTML-Code vornehmen, der dann an einen AEM-Entwickler bzw. eine AEM-Entwicklerin übergeben und als Komponenten implementiert werden kann.
Kopieren Sie die Seitenquelle der LA Skatepark-Artikelseite unter http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled.
Öffnen Sie Ihre IDE erneut. Fügen Sie das kopierte Markup aus AEM unter src/main/webpack/static
in index.html
im Modul ui.frontend ein.
Bearbeiten Sie das kopierte Markup und entfernen Sie alle Verweise auf clientlib-site und clientlib-dependencies:
<!-- remove -->
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.css" type="text/css">
...
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-site.js"></script>
Entfernen Sie diese Verweise, da der webpack-Entwicklungs-Server diese Artefakte automatisch generiert.
Starten Sie den webpack-Dev-Server von einem neuen Terminal aus, indem Sie den folgenden Befehl im Modul ui.frontend ausführen:
$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm start
> aem-maven-archetype@1.0.0 start code/aem-guides-wknd/ui.frontend
> webpack-dev-server --open --config ./webpack.dev.js
Dadurch sollte ein neues Browser-Fenster unter http://localhost:8080/ mit statischem Markup geöffnet werden.
Bearbeiten Sie die Datei src/main/webpack/site/_variables.scss
. Ersetzen Sie die Regel $text-color
durch Folgendes:
- $text-color: $black;
+ $text-color: $pink;
Speichern Sie die Änderungen.
Die Änderungen sollten automatisch im Browser auf http://localhost:8080 zu sehen sein.
Überprüfen Sie die Datei /aem-guides-wknd.ui.frontend/webpack.dev.js
. Diese enthält die webpack-Konfiguration, die zum Starten des webpack-Dev-Servers verwendet wird. Die Pfade /content
und /etc.clientlibs
werden dabei von einer lokal ausgeführten AEM-Instanz weitergeleitet. So werden die Bilder und andere (nicht vom ui.frontend-Code verwaltete) Client-Bibliotheken bereitgestellt.
Die Bild-src des statischen Markups verweist auf eine Live-Bildkomponente in einer lokalen AEM-Instanz. Bilder erscheinen fehlerhaft, wenn sich der Pfad zum Bild ändert, wenn AEM nicht gestartet wird oder der Browser sich nicht bei der lokalen AEM-Instanz angemeldet hat. Bei Übergabe an eine externe Ressource ist es auch möglich, die Bilder durch statische Referenzen zu ersetzen.
Sie können den Webpack-Server stoppen, indem Sie CTRL+C
in die Befehlszeile eingeben.
aemfed ist ein Open-Source-Befehlszeilen-Tool, mit dem die Frontend-Entwicklung beschleunigt werden kann. Es wird unterstützt durch aemsync, BrowserSync und Sling Log Tracer.
aemfed
ist so konzipiert, dass es Dateiänderungen im ui.apps-Modul erfasst und diese direkt mit einer laufenden AEM-Instanz automatisch synchronisiert. Basierend auf den Änderungen wird ein lokaler Browser automatisch aktualisiert, wodurch die Frontend-Entwicklung beschleunigt wird. Es wurde auch für die Verwendung mit Sling Log Tracker entwickelt, um Server-seitige Fehler automatisch direkt im Terminal anzuzeigen.
Wenn Sie im ui.apps-Modul häufig Aufgaben ausführen müssen, wie etwa HTL-Skripts ändern und benutzerdefinierte Komponenten erstellen, kann aemfed ein sehr nützliches Tool sein. Die vollständige Dokumentation finden Sie hier.
Bei Verwendung verschiedener Methoden, um mit Kategorien und Einbettungen mehrere Client-Bibliotheken einzuschließen, kann die Fehlerbehebung mühsam sein. AEM stellt mehrere Tools als Hilfe zur Verfügung. Eines der wichtigsten Tools ist Rebuild Client Libraries, das AEM zwingt, alle LESS-Dateien neu zu kompilieren und das CSS zu generieren.
Dump Libs – Listet die in der AEM-Instanz registrierten Client-Bibliotheken auf. <host>/libs/granite/ui/content/dumplibs.html
Testausgabe – ermöglicht es einem Benutzenden, die erwartete HTML-Ausgabe von clientlib-Einfügungen basierend auf der Kategorie anzuzeigen. <host>/libs/granite/ui/content/dumplibs.test.html
Gültigkeitsprüfung von Bibliotheksabhängigkeiten – markiert alle Abhängigkeiten oder eingebetteten Kategorien, die nicht gefunden werden können. <host>/libs/granite/ui/content/dumplibs.validate.html
Client-Bibliotheken neu erstellen – ermöglicht es einem Benutzenden, AEM zu zwingen, die Client-Bibliotheken neu zu erstellen oder den Cache von Client-Bibliotheken zu invalidieren. Dieses Tool ist bei der Entwicklung mit LESS nützlich, da dies AEM zwingen kann, das generierte CSS neu zu kompilieren. Im Allgemeinen ist es effektiver, Caches zu invalidieren und dann eine Seitenaktualisierung vorzunehmen, anstatt die Bibliotheken neu zu erstellen. <host>/libs/granite/ui/content/dumplibs.rebuild.html