Hoppa till huvudinnehåll

Anpassning med teman och interaktiva element

Docusaurus erbjuder en hög grad av flexibilitet när det gäller anpassning. Från teman och styling till interaktiva element som animationer och diagram – här är några exempel på vad du kan göra.

Teman och styling​

Docusaurus levereras med färdiga teman som är lätta att använda och anpassa. Här är några sätt du kan skapa en unik visuell identitet för din sajt:

Klassiska teman​

  • Docusaurus erbjuder ett standardtema som kan användas direkt "out of the box".
  • Anpassa enkelt färger, logotyp och typsnitt genom att modifiera CSS eller lägga till customCss i docusaurus.config.js.

Anpassade teman​

  • Skapa helt egna teman genom att använda @docusaurus/theme-classic som grund.
  • Använd React-komponenter för att bygga unika layouter och sidmallar.

Interaktiva element​

Interaktiva komponenter gör din dokumentation mer engagerande och användarvänlig. Här är några möjligheter:

Animationer​

Lägg till animerade element för att guida användarna eller förbättra upplevelsen.

Följande kod i CSS lägger på en "bounce and squeeze"-effekt på en bild:

.jumping-dino {
  animation: bounce-squeeze 3s ease-in-out infinite;
  transform-origin: bottom; 
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@keyframes bounce-squeeze {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) scaleY(1); /* Ursprunglig position och proportion */
  }
  40% {
    transform: translateY(-80px) scaleY(1.2); /* Högsta punkten med stretch */
  }
  60% {
    transform: translateY(0) scaleY(0.8); /* Nedslag vid marknivå med squeeze */
  }
}
Hoppande Docusaurus

Diagram med Mermaid​

Docusaurus stöder Mermaid, vilket gör det möjligt att skapa interaktiva diagram direkt i Markdown/MDX.

Kodblock med kopieringsknapp​

Visa kodexempel med en kopieringsknapp för att hjälpa användare snabbt återanvända kod.

Exempel:

console.log('Hello, Docusaurus!');

✨ Klicka på "Nästa" för att avsluta rundturen! ✨