Benutzerdefiniertes CSS und JavaScript

Pläne, die die Verwendung von benutzerdefiniertem CSS und JS auf der Wissensdatenbank-Site unterstützen

CSS-Ausschnitte

Ein Snippet ist ein Stück wiederverwendbarer Code, und ein CSS-Snippet "CSS (Cascading Style Sheets) + Snippet" ist eine Reihe von Dienstprogrammen und interaktiven Beispielen für CSS3. Es hilft bei der Erstellung der häufig verwendeten Layoutvorlagen. Dabei handelt es sich um vorgefertigte Codeblöcke, die Entwickler schnell in ihre Projekte einfügen können, um bestimmte Funktionalitäten zu erreichen, ohne den Code von Grund auf neu zu schreiben.

Diese Snippets tragen dazu bei, den Entwicklungsprozess zu rationalisieren, indem sie Zeit sparen, Fehler reduzieren und die Konsistenz in der gesamten Codebasis sicherstellen.

Ein Beispiel für ein CSS-Snippet:

.shadow {
 box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 }

Das obige CSS-Snippet kann Rahmen und Bilder auf Ihrer Seite hervorheben.

Anpassen von CSS mithilfe von CSS-Snippets

Um CSS mithilfe von CSS-Snippets anzupassen, führen Sie die folgenden Schritte aus:

1. Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .

2. Auf der Registerkarte "CSS " können Sie Codeausschnitte auf zwei Arten hinzufügen:

   ein. Geben Sie den Code-Schnipsel in das Textfeld ein.

   b. Klicken Sie auf Code-Snippets hinzufügen , um die vorab geladenen Snippets (7 vorab geladene Snippets) hinzuzufügen.

3. Wenn Sie fertig sind, klicken Sie auf Speichern oder Strg + S, um die vorgenommenen Änderungen zu speichern.

   Weitere Informationen finden Sie im Artikel auf CSS Snippets.

JavaScript-Schnipsel

Ein JavaScript-Snippet ist ein wiederverwendbarer Code, der in JavaScript geschrieben ist und in der Regel zum Ausführen bestimmter Aufgaben oder zum Hinzufügen von Funktionen zu einer Webseite verwendet wird. Diese Snippets sind oft klein, fokussiert und so konzipiert, dass sie leicht in vorhandene Codebasen eingefügt werden können.

Anpassen von JavaScript mit benutzerdefinierten JavaScript-Snippets

Um JavaScript mit benutzerdefinierten JavaScript-Snippets anzupassen, führen Sie die folgenden Schritte aus:

1. Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .

2. Klicken Sie im linken Navigationsbereich auf die Registerkarte JavaScript und fügen Sie den gewünschten Code in das JavaScript-Snippet ein.

   Wenn Sie z. B. die zugehörigen Artikel über den Feedbackbereich auf der Wissensdatenbank-Website verschieben möchten, fügen Sie den folgenden Code in den JavaScript-Codeausschnitt ein.  

panel.onload = function () {
$(".content_block_text" ).append("<div class=\"sperator\"><hr></div>");
$('.related-articles-container').appendTo('.content_block_text') 
}

4. Wenn Sie fertig sind, klicken Sie auf Speichern.

Fehlerbehebung

Anpassen von benutzerdefiniertem Code für das SPA-Modell (Single Page Application) in Document360

Mit der Umstellung der Document360-Website auf ein SPA-Modell (Single Page Application) funktioniert benutzerdefiniertes JavaScript, das von Seitenaktualisierungsereignissen abhängig ist, möglicherweise nicht mehr wie erwartet. Dies liegt daran, dass SPAs nur den Artikelinhalt aktualisieren, nicht die gesamte Seite.

Im Folgenden finden Sie die Bereiche, in denen Benutzer benutzerdefiniertes JavaScript in das Document360-Portal einfügen können:

1. Benutzerdefiniertes JavaScript

   Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .

2. Benutzerdefinierte HTML-Integrationen
   Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Integrationen > benutzerdefiniertes HTML.

Empfohlene Lösung

Um die Kompatibilität mit dem SPA-Modell sicherzustellen, aktualisieren Sie Ihr benutzerdefiniertes JavaScript-System, um das articleload Ereignis zu verwenden. Dieses Ereignis wird ausgelöst, wenn der Artikelinhalt aktualisiert wird, um sicherzustellen, dass Ihre Skripts nahtlos in der neuen Architektur funktionieren.

1. Ersetzen Sie allen Code, der auf Seitenaktualisierungsereignissen basiert, durch ein Abonnement für das articleload Ereignis.

2. Verwenden Sie den folgenden Codeausschnitt, um Ihre benutzerdefinierten Skripts anzupassen:

   panel.addEventListener('articleload', function() {
     // Your custom JavaScript code here
   });

3. Testen Sie Ihre aktualisierten Skripts, um sicherzustellen, dass sie in der SPA-Umgebung ordnungsgemäß funktionieren.

   Wenn das Problem nach dem Ausführen dieser Schritte weiterhin besteht, wenden Sie sich an das Document360-Support-Team, um weitere Unterstützung zu erhalten: Wenden Sie sich an den Document360-Support