Aangepaste CSS en JavaScript

CSS-fragmenten

Een snippet is een stukje herbruikbare code en een CSS-fragment "CSS (Cascading Style Sheets) + Snippet" is een set hulpprogramma's en interactieve voorbeelden voor CSS3. Het helpt bij het maken van de veelgebruikte lay-outsjablonen. Dit zijn vooraf geschreven codeblokken die ontwikkelaars snel in hun projecten kunnen invoegen om specifieke functionaliteiten te bereiken zonder de code helemaal opnieuw te hoeven schrijven.

Deze fragmenten helpen het ontwikkelingsproces te stroomlijnen door tijd te besparen, fouten te verminderen en consistentie in de hele codebase te garanderen.

Een voorbeeld van een CSS-fragment:

.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);
 }

Het bovenstaande CSS-fragment kan ervoor zorgen dat randen en afbeeldingen opvallen op uw pagina.

CSS aanpassen met behulp van CSS-fragmenten

Volg de onderstaande stappen om CSS aan te passen met behulp van CSS-fragmenten:

1. Navigeer naar () in de linkernavigatiebalk in de Knowledge Base-portal.

2. Navigeer in het linkernavigatiedeelvenster naar Knowledge base site > Customize site > Custom CSS & JavaScript .

3. Op het tabblad CSS kunt u op twee manieren codefragmenten toevoegen:

   een. Voer het codefragment in het tekstvak in.

   b. Klik op Codefragmenten toevoegen om de vooraf geladen fragmenten (7 vooraf geladen fragmenten) toe te voegen.

3. Als u klaar bent, klikt u op Opslaan of Ctrl + S om de aangebrachte wijzigingen op te slaan.

   Lees voor meer informatie het artikel op CSS Snippets.

JavaScript-fragmenten

Een JavaScript-fragment is een herbruikbaar stuk code geschreven in JavaScript, dat meestal wordt gebruikt om specifieke taken uit te voeren of functionaliteit aan een webpagina toe te voegen. Deze fragmenten zijn vaak klein, gericht en ontworpen om gemakkelijk in bestaande codebases te worden ingevoegd.

JavaScript aanpassen met behulp van aangepaste JavaScript-fragmenten

Volg de onderstaande stappen om JavaScript aan te passen met behulp van aangepaste JavaScript-fragmenten:

1. Navigeer naar   () in de linkernavigatiebalk in de Knowledge Base-portal.

2. Navigeer in het linkernavigatiedeelvenster naar Knowledge base site > Customize site > Custom CSS & JavaScript .

3. Klik in het linkernavigatiedeelvenster op het tabblad JavaScript en plak de gewenste code in het JavaScript-fragment.

4. Als u bijvoorbeeld de gerelateerde artikelen boven de feedbacksectie in de kennisbank wilt plaatsen, plakt u de volgende code in het JavaScript-fragment.  

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

5. Als u klaar bent, klikt u op Opslaan.

Probleemoplossing

Aangepaste code aanpassen voor het Single Page Application (SPA)-model in Document360

Met de overgang van de Document360-website naar een Single Page Application (SPA)-model, werkt aangepast JavaScript dat afhankelijk is van paginavernieuwingsgebeurtenissen mogelijk niet meer zoals verwacht. Dit komt omdat SPA's alleen de inhoud van het artikel verversen, niet de hele pagina.

Hieronder staan de gebieden waar gebruikers Custom JavaScript kunnen injecteren binnen het Document360-portaal:

1. Aangepast JavaScript

   1. Navigeer naar () in de linkernavigatiebalk in de Knowledge Base-portal.

   2. Navigeer in het linkernavigatiedeelvenster naar Knowledge base site > Customize site > Custom CSS & JavaScript .

2. Aangepaste HTML-integraties

   1. Navigeer naar () in de linkernavigatiebalk in de Knowledge Base-portal.

   2. Navigeer in het linkernavigatiedeelvenster naar Knowledge base site > Integraties > aangepaste HTML.

Aanbevolen oplossing

Om compatibiliteit met het SPA-model te garanderen, moet u uw aangepaste JavaScript bijwerken om de articleload gebeurtenis te gebruiken. Deze gebeurtenis wordt geactiveerd wanneer de inhoud van het artikel wordt vernieuwd, zodat uw scripts naadloos werken in de nieuwe architectuur.

1. Vervang alle code die afhankelijk is van gebeurtenissen voor het vernieuwen van pagina's door een abonnement op de articleload gebeurtenis.

2. Gebruik het volgende codefragment om uw aangepaste scripts aan te passen:

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

3. Test uw bijgewerkte scripts om te controleren of ze correct werken in de SPA-omgeving.

   Als het probleem zich blijft voordoen na het volgen van deze stappen, neem dan contact op met het Document360-ondersteuningsteam voor verdere hulp: Neem contact op met Document360 Support