Dokumentasjonsmeny
Bygge et nettsted
Lage blokker
En PHP-klasse og en Blade-visning: hva en blokk er, og hvordan du lager en.
En blokk er én PHP-klasse og én Blade-visning. Den samme visningen brukes på nettstedet, på editorens lerret og i forhåndsvisninger.
$ php artisan aurora:make-block "Pricing table" --category=marketing --icon=phosphor-currency-circle-dollar
$ php artisan aurora:make-block "Two columns" --container # a block that holds other blocks
Dette lager app/Blocks/PricingTableBlock.php og resources/views/components/blocks/pricing-table.blade.php. Blokker i app/Blocks registreres automatisk. Klassen sier hva blokken er:
namespace App\Blocks;
use Aurora\Blocks\Block;
use Aurora\Blocks\Editable;
use Aurora\Blocks\Fields;
use Aurora\Filament\Forms\Components\AssetPicker;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
class CardBlock extends Block
{
public static function type(): string { return 'card'; } // stored in the page JSON
public static function label(): string { return __('Card'); }
public static function description(): string { return __('Image, title, text and a link in a box.'); }
public static function icon(): ?string { return 'phosphor-identification-card'; }
public static function category(): string { return 'content'; } // palette group
// The inspector's fields: any Filament form components.
public static function schema(): array
{
return [
AssetPicker::make('image')->label(__('Image')), // a media library image
TextInput::make('title')->label(__('Title')),
Textarea::make('body')->label(__('Text'))->rows(3),
...Fields::link(), // page, file or URL
];
}
// What a new block starts with.
public static function defaults(): array
{
return ['title' => 'Card title', 'body' => 'Why this matters.'];
}
// Fields editors type into right on the canvas.
public static function editables(): array
{
return [
'title' => Editable::text()->placeholder(__('Title')),
'body' => Editable::text()->multiline(),
];
}
// Told to AI assistants: when to use it, and how.
public static function aiHints(): ?string
{
return 'Normally placed inside a "grid". The card becomes clickable when it has a link.';
}
}
Mer en blokk kan fortelle
| Metode | Hva den gjør |
|---|---|
itemEditables() | Redigering direkte i punkter i repeatere, som spørsmål i FAQ |
sameInEveryLanguage() | Felt som ikke oversettes (lenker, tall, innstillinger) |
preview() | Et bilde av blokken til paletten (eller last opp et under Innstillinger › Blokker) |
isVisible() | Skjul en blokk for noen, for eksempel kodeblokker |
Containerblokker
Blokker som holder andre blokker, implementerer Aurora\Blocks\Contracts\Container, oppgir sporene sine og tegner hvert av dem med block_slot():
use Aurora\Blocks\Contracts\Container;
class BandBlock extends Block implements Container
{
public static function slots(array $data): array { return ['content']; }
// …
}
<section class="band">{{ block_slot('content') }}</section>
Rekkefølge og registrering for hånd
Blokker fra andre mapper, eller i en fast rekkefølge i paletten, registreres fra en service provider: Blocks::register([HeroBlock::class, CardBlock::class]). En type som registreres på nytt, erstatter den forrige, så et nettsted kan overstyre en blokk fra et bibliotek.
Det du får gratis
- validert når KI-verktøy skriver den;
- beskrevet for KI-assistenter av
list_block_types, bygget fra skjemaet; - oversatt blokk for blokk, og indeksert for søk;
- levert strukturert av REST- og GraphQL-API-ene: bilder, sidelenker og skjemaer kommer ut som det de peker på.
Dette nettstedets blokker
Dette nettstedet er bygget av 24 egne blokker, i app/Blocks. De er gode eksempler å lese eller bygge videre på.
| Kategori | Blokker |
|---|---|
| Oppsett | Seksjonsbånd, Responsivt rutenett, Knappegruppe |
| Innhold | Overskrift, Avsnitt, Formatert tekst, Knapp, Kort, Fremhevet boks, Trekkspill / FAQ, Faner, Steg / tidslinje |
| Markedsføring | Hero, Funksjon, Statistikk, Prisplan, Kundeomtale, Teammedlem, Logosky, Handlingsoppfordring |
| Medier | Bilde, Galleri |
| Dynamisk | Skjema, Sideliste |
| Utvikler | Kodeeksempel |
Sidebyggeren legger til Seksjon (kolonner), Liste, Sitat, Avstand, Skillelinje, Video, Innbygging, Kortkode og Kode.