Lerretet viser din CSS

Slik viser den visuelle editoren blokker i nettstedets eget stilark.

Den visuelle editoren viser blokkene dine med nettstedets eget stilark, så de ser ut på lerretet nøyaktig som på nettstedet. Det er ingenting å sette opp: Aurora finner resources/css/app.css via Vite (den bygde filen, eller utviklingsserveren mens npm run dev kjører) og avgrenser det til lerretet med CSS @scope, så det ikke kan påvirke adminpanelet rundt. Det stilarket ditt sier om selve siden (:root, html, body), sier det om lerretet.

Style siden i CSS, ikke med klasser på <body>

Lerretet har ikke nettstedets <body>, så legg sidens skrift, farger og bakgrunn i stilarket:

resources/css/app.css CSS

@layer base {
    body {
        @apply bg-white font-body text-zinc-600;
    }
}

Fonter

Fonter i stilarket (@font-face, @import) blir med. Fonter som lenkes fra <head> i oppsettet ditt, blir ikke med, så last dem inn i stilarket også, ellers viser lerretet dem med en reservefont.

resources/css/app.css CSS

@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700');
@import 'tailwindcss';

En annen inngang

Sett AURORA_WEBSITE_CSS (aurora.website_css) til en annen Vite-inngang, eller la den stå tom for å vise blokker uten nettstedets stiler.

Admintemaet er bare utseendet på publiseringssystemet

Blokkene på lerretet bruker alltid nettstedets eget stilark, uansett hvilket admin-tema som er valgt. Ingenting fra nettstedet ditt bygges inn i adminpanelet.

Forrige

Blokkvisninger og hjelpere

Vis tekst, lenker, bilder og spor med hjelpere eller Blade-direktiver.

Les

Neste

Oppsett og nettstedet

Visningene som tegner hele sider, og alt Aurora leverer.

Les