Halo teman-teman semuanya, pada kesempatan kali ini kita akan belajar membuat layout di dalam Astro. Layout ini merupakan induk template untuk semua view, jadi nanti semua view akan extends ke dalam layout ini.
Langkah 1 - Membuat Layout
Silahkan teman-teman buat folder baru dengan nama layouts di dalam folder src, kemudian di dalamnya buat file baru dengan nama MainLayout.astro, kemudian masukkan kode berikut ini di dalamnya.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ASTRO, REACT & LARAVEL 10</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&family=Quicksand:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
/>
<style>
body {
background-color: lightgray;
font-family: "Quicksand", sans-serif;
}
</style>
</head>
<body>
<header>
<nav
class="navbar navbar-expand-md navbar-dark fixed-top bg-dark fixed-top border-0 shadow-sm"
>
<div class="container">
<a href="/" class="text-decoration-none">
<span class="navbar-brand">ASTRO, REACT & LARAVEL</span>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="/posts">POSTS</a>
</li>
</ul>
<ul class="navbar-nav mb-2 mb-md-0">
<li class="nav-item">
<a
class="nav-link"
href="https://santrikoding.com"
target="_blank">SANTRIKODING</a
>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- your content is injected here -->
<slot />
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
Dari penambahan kode di atas, kita membuat halaman menggunakan sintaks dasar dari HTML dan kita juga menggunakan framework CSS Bootstrap agar proses pembuatan UI bisa lebih mudah dan cepat.
Di atas, terdapat kode <slot / >, kode inilah yang nanti me-render setiap view yang menggunakan layout ini.
Langkah 2 - Membuat Halaman Homepage
Setelah berhasil membuat layout, sekarang kita lanjutkan uji coba menampilkan halaman homepage di astro.
Silahkan buka file src/pages/index.astro, kemudian ubah semua kode-nya menjadi seperti berikut ini.
---
//import transitions effect
import { ViewTransitions } from "astro:transitions";
//import layout
import MainLayout from "../layouts/MainLayout.astro";
---
<MainLayout>
<ViewTransitions />
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">ASTRO, REACT & LARAVEL</h1>
<p class="col-md-8 fs-4">
Belajar CRUD dengan Astro, React dan Laravel di SantriKoding.com
</p>
</div>
</div>
</MainLayout>
Di atas, pertama-tama kita import ViewTransitions dari Astro. Ini akan menjadikan aplikasi kita bisa bekerja secara SPA atau tanpa reload halaman.
//import transitions effect
import { ViewTransitions } from "astro:transitions";
Untuk menggunakan, kita cukup memanggilnya di dalam view.
<ViewTransitions />
Langkah 3 - Uji Coba Menampilkan Homepage
Sekarang silahkan teman-teman jalankan projectnya menggunakan perintah berikut ini di dalam terminal/CMD.
npm run dev
Kemudian silahkan buka di browser dengan mengetikkan http://localhost:4321, jika berhasil maka akan menampilkan halaman seperti berikut ini.
kesimpulan
Pada artikel ini kita telah belajar bagaimana cara membuat layout di Astro dan kita juga belajar menampilkan halaman homepage.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara menampilkan data dari Rest API yang dibuat menggunakan Laravel di dalam Astro dan React.
Terima Kasih