Hopp til innholdet

Aurora 1.0 is out!

What's new →
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.

~ Terminal
$ 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:

app/Blocks/CardBlock.php PHP
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

MetodeHva 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():

PHP
use Aurora\Blocks\Contracts\Container;

class BandBlock extends Block implements Container
{
    public static function slots(array $data): array { return ['content']; }
    // …
}
Blade
<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å.

KategoriBlokker
OppsettSeksjonsbånd, Responsivt rutenett, Knappegruppe
InnholdOverskrift, Avsnitt, Formatert tekst, Knapp, Kort, Fremhevet boks, Trekkspill / FAQ, Faner, Steg / tidslinje
MarkedsføringHero, Funksjon, Statistikk, Prisplan, Kundeomtale, Teammedlem, Logosky, Handlingsoppfordring
MedierBilde, Galleri
DynamiskSkjema, Sideliste
UtviklerKodeeksempel

Sidebyggeren legger til Seksjon (kolonner), Liste, Sitat, Avstand, Skillelinje, Video, Innbygging, Kortkode og Kode.