Client & Views
Layouts
Menggunakan Layout System di BlizzardTS. 🎨
Layouts
BlizzardTS v0.1.3+ introduces a powerful Layout System that allows you to create master templates and reuse them across your pages. This is essential for maintaining a consistent look and feel (headers, footers, navigation) without duplicating code.
Basic Usage
1. Create a Layout File
Create a .blizzard file that will serve as your layout (e.g., layout.blizzard). Use the <slot /> tag to indicate where the page content should be injected.
<!-- public/layout.blizzard -->
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<!-- Page content will be injected here -->
<slot />
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>2. Use the Layout in a Page
In your page file (e.g., index.blizzard), use the <layout src="..." /> tag at the top (or anywhere, but top is recommended) to specify which layout to use.
<!-- public/index.blizzard -->
<layout src="./layout.blizzard" />
<h2>Welcome to the Home Page</h2>
<p>This content will appear inside the slot.</p>How it Works
- The Blizzard engine detects the
<layout src="..." />tag. - It loads the specified layout file.
- It replaces the
<slot />tag in the layout with the content of your page. - It merges frontmatter variables (Page variables override Layout variables).
Nested Layouts
You can even nest layouts! A layout can use another layout.
<!-- public/dashboard-layout.blizzard -->
<layout src="./main-layout.blizzard" />
<div class="dashboard-wrapper">
<sidebar>...</sidebar>
<div class="content">
<slot />
</div>
</div>