DEV Community

Cover image for 🎨 Laravel & Blade: crea viste eleganti e riutilizzabili | 🎨 Laravel & Blade: Create Elegant and Reusable Views
Roberto Celano
Roberto Celano

Posted on

🎨 Laravel & Blade: crea viste eleganti e riutilizzabili | 🎨 Laravel & Blade: Create Elegant and Reusable Views

#webdev #laravel #beginners #php

Introduzione | Introduction

Italiano: Questo articolo è disponibile sia in italiano che in inglese. Scrolla verso il basso per la versione in inglese.

English: This article is available in both Italian and English. Scroll down for the English version.

🇮🇹 Versione Italiana

Perché Blade?

Laravel include Blade, un motore di template leggero e potente che semplifica la scrittura delle viste.

Rispetto all’HTML puro, Blade ti permette di:

  • Riutilizzare codice con layout e componenti.
  • Evitare duplicazioni grazie a @extends, @section, @yield.
  • Mantenere il codice più ordinato e leggibile.

Creare un layout base

Un esempio di layout.blade.php:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>@yield('title', 'Il mio sito Laravel')</title>
</head>
<body>
    <x-navbar />

    <main>
        @yield('content')
    </main>

    <x-footer />
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Estendere un layout

Per creare una pagina che estende il layout:

<!-- resources/views/home.blade.php -->
@extends('layouts.app')

@section('title', 'Homepage')

@section('content')
    <h1>Benvenuto nel mio sito!</h1>
    <p>Questa è la homepage creata con Blade.</p>
@endsection
Enter fullscreen mode Exit fullscreen mode

Sezioni dinamiche

Con @section puoi definire aree diverse della pagina, ad esempio meta tag SEO o script specifici.

@section ('meta_description', 'Benvenuto nel sito di esempio con Blade')
Enter fullscreen mode Exit fullscreen mode

Componenti Blade

Un componente ti permette di creare blocchi riutilizzabili.
Esempio: x-navbar.

<!-- resources/views/components/navbar.blade.php -->
<nav>
    <a href="{{ route('home') }}">Home</a>
    <a href="{{ route('about') }}">Chi Siamo</a>
    <a href="{{ route('contact') }}">Contatti</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

E lo richiami semplicemente con:

<x-navbar />
Enter fullscreen mode Exit fullscreen mode

Include vs Componenti

@include→ utile per piccoli frammenti statici.

Componenti → ideali per elementi dinamici e riutilizzabili (es. navbar, card, footer).

Best Practices

✅ Mantieni i layout semplici.
✅ Dai nomi chiari ai file (layouts/app.blade.php, components/navbar.blade.php).
✅ Sfrutta le variabili nei componenti (<x-alert type="success" />).
✅ Evita duplicazioni: DRY (Don’t Repeat Yourself).

📌 Conclusione

Blade è uno strumento fondamentale per organizzare le viste in un progetto Laravel.
Con layout, sezioni e componenti puoi creare interfacce modulari, eleganti e facili da mantenere.

🇬🇧 English Version

Why Blade?

Laravel includes Blade, a lightweight and powerful template engine that simplifies building views.
Compared to plain HTML, Blade allows you to:

  • Reuse code with layouts and components.

  • Avoid duplication with @extends, @section, @yield.

  • Keep your code clean and readable.

Creating a base layout

Example layout.blade.php:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title', 'My Laravel Site')</title>
</head>
<body>
    <x-navbar />

    <main>
        @yield('content')
    </main>

    <x-footer />
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Extending a layout

To create a page extending the layout:


<!-- resources/views/home.blade.php -->
@extends('layouts.app')

@section('title', 'Homepage')

@section('content')
    <h1>Welcome to my site!</h1>
    <p>This is the homepage created with Blade.</p>
@endsection
Enter fullscreen mode Exit fullscreen mode

Dynamic sections

With @section you can define different page areas, like SEO meta tags or page-specific scripts.


@section('meta_description', 'Welcome to this Blade example site')
Enter fullscreen mode Exit fullscreen mode

Blade Components

A component allows you to create reusable blocks.
Example: x-navbar.

<!-- resources/views/components/navbar.blade.php -->
<nav>
    <a href="{{ route('home') }}">Home</a>
    <a href="{{ route('about') }}">About</a>
    <a href="{{ route('contact') }}">Contact</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

And you can call it simply with:

<x-navbar />
Enter fullscreen mode Exit fullscreen mode

Include vs Components

@include → useful for small static snippets.

Components → best for reusable and dynamic elements (e.g. navbar, cards, footer).

Best Practices

✅ Keep layouts simple.
✅ Use clear file names (layouts/app.blade.php, components/navbar.blade.php).
✅ Use variables in components (<x-alert type="success" />).
✅ Avoid duplication: DRY (Don’t Repeat Yourself).

📌 Conclusion

Blade is an essential tool for organizing views in a Laravel project. With layouts, sections, and components, you can build modular, elegant, and easy-to-maintain interfaces.

Traduzione

Questo articolo è stato tradotto con l'ausilio di strumenti di traduzione professionali.
This article was translated with the help of professional translation tools.

Top comments (0)