Skip to main content

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.