Kami akan membuat beberapa halaman situs (beranda, tentang, proyek, kontak). Berikut adalah daftar halaman yang akan kita gunakan dan tata letak yang akan mereka gunakan
- Rumah- Tata Letak Lebar Penuh
- Tentang- Tata Letak Bilah Samping
- Proyek- Tata Letak Sidebar
- Kontak- Tata Letak Lebar Penuh
Agar halaman kami berfungsi, kami akan menyiapkan rute sederhana untuk mendapatkan halaman beranda kami
Route::get('/', function(){
return View::make('pages.home');
});
Route::get('about', function()
{
return View::make('pages.about');
});
Route::get('projects', function()
{
return View::make('pages.projects');
});
Route::get('contact', function()
{
return View::make('pages.contact');
});
Karena kami hanya menyentuh tata letak di Blade, kami tidak perlu melakukan apa pun selain memuat tampilan. Kita tidak perlu dipusingkan dengan pengontrol atau hal-hal mewah lainnya
Sekarang setelah kami menyiapkan rute, kami akan memulai pekerjaan kami dengan halaman beranda. Buka - app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php_2. Di dalam file itu, kita akan menggabungkan file layout, file halaman, dan include. Dengan menggunakan file tata letak yang sama untuk banyak halaman, kita tidak perlu mengulang sendiri saat menulis halaman kita di situs kita
Struktur File
Mari buat file yang diperlukan untuk membuat seluruh sistem template. Berikut folder dan filenya. Silakan dan buat mereka
- app-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.phpTermasuk
Kami akan menggunakan penyertaan head, header, dan footer sehingga kami tidak perlu menulis ulang kode itu. Mari kita singkirkan itu dengan sangat cepat
kepala. Pedang. php
<meta charset="utf-8"><meta name="description" content="">
<meta name="author" content="Scotch">
<title>Super Cool Layouts</title>
<!-- load bootstrap from a cdn -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">
tajuk. Pedang. php
<div class="navbar"><div class="navbar-inner">
<a id="logo" href="/">Single Malt</a>
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</div>_
footer. Pedang. php
<div id="copyright text-right">© Copyright 2019 Sujal Patel</div>Tata Letak dan Laman Default (Beranda, Kontak)Dengan penyertaan kami siap, mari buat tata letak pertama kami
Kami akan menggunakan - app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php_3 untuk memasukkan irisan dan - app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php4 untuk memasukkan konten dari masing-masing halaman yang akan kami gunakan
<html>
<head>
@include('includes.head')
</head>
<body>
<div class="container">
<header class="row">
@include('includes.header')
</header>
<div id="main" class="row">
@yield('content') </div>
<footer class="row">
@include('includes.footer')
</footer>
</div>
</body>
</html>Halaman Beranda dan Halaman Kontak
Kami tidak akan menyelam terlalu jauh ke konten sebenarnya dari setiap halaman. Halaman beranda dan halaman kontak akan menggunakan - app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php5 yang sama. Kita tidak perlu menggunakan kembali kode di tata letak atau penyertaan sekarang
Blade memungkinkan kita menggunakan tata letak yang baru saja kita buat dengan menggunakan - app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php6. Dengan membuat - app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php_7, kami membuat bagian yang akan digunakan dalam tata letak. Di sini kita menggunakan - app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php_8 dan di tata letak kita, semua yang kita ketik di sini akan disuntikkan di - app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php4 di tata letak
@section('content')
Home Page
@stop_halaman/kontak. Pedang. php@extends('layouts.default')
@section('content')
Contact Page
@stop_Tata Letak dan Halaman Sidebar
Dengan tata letak default kami dan halaman-halaman itu, kami dapat membuat sidebar kami menyertakan, tata letak sidebar, dan halaman
Sidebar Termasuk termasuk/sidebar. Pedang. php
<!-- sidebar nav --><nav id="sidebar-nav">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Fly to the Moon</a></li>
<li><a href="#">Dig to China</a></li>
<li><a href="#">Swim Across the Sea</a></li>
</ul>
</nav>
Layout Tata Letak Sidebar/sidebar. Pedang. php
Perbedaan antara tata letak ini dan tata letak default adalah sidebar. Kami menambahkannya ke bagian utama dengan bantuan kelas Twitter Bootstrap. Sekarang kami memiliki sidebar di sebelah kiri dan konten kami di sebelah kanan. Kami dapat menyesuaikan ini namun kami ingin membuat sidebar ukuran apa pun baik di kiri atau kanan
<html>
<head>
@include('includes.head')
</head>
<body>
<div class="container">
<header class="row">
@include('includes.header')
</header>
<div id="main" class="row">
<!-- sidebar content -->
<div id="sidebar" class="col-md-4">
@include('includes.sidebar')
</div>
<!-- main content -->
<div id="content" class="col-md-8">
@yield('content')
</div>
</div>
<footer class="row">
@include('includes.footer')
</footer>
</div>
</body>
</html>Halaman Tentang dan Proyek
Seperti halaman beranda dan kontak, kami tidak akan mendalami kontennya. Hanya penggunaan tata letak dan penambahan konten yang sederhana
halaman/tentang. Pedang. php
- app-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php_0
halaman/proyek. Pedang. php
- app-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php1Kesimpulan
Sekarang kita dapat membuat fondasi sederhana untuk tampilan front-end situs kita. Layout, irisan, dan halaman semuanya bekerja sama untuk membuat sistem template yang mudah. Masih banyak lagi Laravel Blade Templating dan saya mendorong Anda untuk melihat apa lagi yang bisa kami lakukan
Terima kasih telah membaca dan beri tahu kami jika Anda memiliki pertanyaan atau komentar atau apa yang Anda ingin kami tulis di komentar