close

Membina Reka Letak dengan Laravel- Mencipta Antara Muka Fleksibel dan Boleh Diselenggara

Dalam Laravel, reka letak memainkan peranan penting dalam membina antara muka pengguna untuk aplikasi web. Reka letak mewakili struktur keseluruhan halaman web, termasuk bahagian biasa seperti header, footer  dan sidebar. Dalam artikel ini, kami akan meneroka cara membina reka letak untuk Laravel mencipta antara muka yang fleksibel dan boleh diselenggara.

Pertama, mari kita buat susun atur asas untuk tapak web kami. Mulakan dengan mencipta fail bernama app.blade.php dalam direktori. Fail ini akan berfungsi sebagai reka letak utama untuk keseluruhan tapak web. resources/views/layouts

Berikut ialah contoh kandungan untuk app.blade.php fail:

<!DOCTYPE html>  
<html>  
<head>  
    <title>@yield('title')</title>  
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>  
<body>  
    <header>  
        <h1>Header</h1>  
    </header>  
  
    <nav>  
        <ul>  
            <li><a href="/">Home</a></li>  
            <li><a href="/about">About</a></li>  
            <li><a href="/contact">Contact</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        @yield('content')  
    </main>  
  
    <footer>  
        <p>Footer</p>  
    </footer>  
  
    <script src="{{ asset('js/app.js') }}"></script>  
</body>  
</html>

Dalam reka letak ini, kami menggunakan @yield arahan untuk menentukan bahagian dinamik dalam reka letak. Sebagai contoh, @yield('title') benarkan kanak-kanak mengatasi dan menetapkan tajuk halaman. Begitu juga, membolehkan kanak-kanak memasukkan kandungan utama halaman. views @yield('content') views

Setelah susun atur dibuat, kita boleh mencipta anak yang menggunakan reka letak ini. Contohnya, untuk membuat halaman dengan reka letak yang serupa, buat fail yang dinamakan dalam direktori. Fail ini akan memanjangkan  reka letak dan menentukan kandungan khusus untuk halaman: views about about.blade.php resources/views app.blade.php about 

@extends('layouts.app')  
  
@section('title', 'About')  
  
@section('content')  
    <h2>About Page</h2>  
    <p>This is the about us page.</p>  
@endsection

Dalam contoh di atas, kami menggunakan @extends arahan untuk mewarisi app.blade.php  reka letak. Seterusnya, kami menggunakan @section arahan untuk menentukan kandungan khusus untuk title  dan content  bahagian halaman.

Akhir sekali, kita perlu menentukan laluan untuk memautkan URL ke. views

Sebagai contoh, dalam routes/web.php  fail, anda boleh menambah laluan berikut:

Route::get('/', function() {  
    return view('welcome');  
});  
  
Route::get('/about', function() {  
    return view('about');  
});

Dalam contoh ini, URL "/" dipautkan ke welcome.blade.php view, manakala /about URL dipautkan ke about.blade.php view.

Kesimpulannya, membina reka letak dalam Laravel membolehkan anda membuat antara muka yang dikongsi untuk aplikasi web anda dan mengurus bahagian biasa seperti header, footer dan sidebar. Dengan menggunakan reka letak dan anak, anda boleh membina antara muka yang fleksibel dan boleh diselenggara dalam. views Laravel