Build your first layout
You still have some links and components repeatedly rendered on every page. It’s time to refactor again to create a shared page layout!
Create your first layout component
Create a new file at the location src/layouts/base.html
. (You will need to create a new layouts folder first.)
Copy the entire contents of src/pages/page.html
into your new file, base.html
.
src/layout/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My CMS</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<main>
<h1>Welcome to your CMS</h1>
</main>
{{children}}
</body>
</html>
Use your layout on a page
Replace the code at src/pages/apis/page.html
with the following:
src/pages/apis/page.html
{{#daikoku-template-wrapper "/layouts/base.html"}}
<h1 class="text-5xl font-bold">My apis</h1>
<div class="flex gap-5 m-5">
{{#daikoku-apis}}
<div class="card bg-base-100 w-96 shadow-xl">
<figure>
<img
src="https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg"
alt="Shoes" />
</figure>
<div class="card-body">
<h2 class="card-title">
{{api.name}}
<div class="badge badge-secondary">{{api.version}}</div>
</h2>
<p>{{api.description}}</p>
</div>
</div>
{{/daikoku-apis}}
</div>
{{/daikoku-template-wrapper}}
Check the browser preview again to notice what did (or, spoiler alert: did not!) change.