គ្រប់ទំព័រទាំងអស់ចាំបាច់ត្រូវមានក្បាលទំព័រដូចៗគ្នាតែមួយ។ ប្រការនេះទាមទារអោយយើងត្រូវបង្កើតគំរូក្បាលទំព័រមួយដែលនឹងត្រូវយកទៅប្រើនៅក្នុងគ្រប់ទំព័រទាំងអស់។ ដូចគ្នានឹងគំរូទំព័រគ្រឹះដែរ យើងអាចបង្កើតគំរូក្បាលទំព័រនៅក្នុងថត src/layouts ។
<!--src/layouts/Header.astro-->
---
const { siteTitle } = Astro.props
---
<section class="bg-teal-600 text-white">
<div class="max-w-5xl mx-auto py-1 flex flex-col sm:flex-row">
<span class="mx-auto sm:mx-0">
<a class="hover:opacity-75" href="/admin">ចូលក្នុង</a> | ចុះឈ្មោះ
</span>
<span id="date" class="mx-auto sm:mx-0 sm:ml-auto pt-2 sm:pt-0">
<script>
const datetime = new Date().toLocaleDateString('it-IT')
$('#date').html(datetime)
</script>
</span>
</div>
</section>
<section class="bg-teal-700 text-white">
<header class='text-center sm:text-left max-w-5xl mx-auto grid grid-cols-1 sm:grid-cols-3 gap-4 items-center py-5'>
<div class="grid grid-cols-4 w-40 gap-2 mx-auto sm:mx-0">
<img src="/images/facebook.png" />
<img src="/images/telegram.png" />
<img src="/images/twitter.png" />
<img src="/images/youtube.png" />
</div>
<div class='font-title text-5xl text-center sm:text-left'>
<a href="/">{siteTitle}</a>
</div>
<form class='text-center sm:text-right' action="/search">
<input class="px-2 py-1" type='text' name='q' placeholder='Search...' required />
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-2 py-1">ស្វែងរក</button>
</form>
</header>
</section>
<!--src/layouts/Base.astro-->
---
const { pageTitle="ទំព័រគ្រឹះ" } = Astro.props
import Header from "./Header.astro"
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
<link rel="icon" href="/images/siteLogo.png" />
<link href="/fonts/setup.css" rel="stylesheet" />
<script is:inline src="/scripts/jquery.js"></script>
</head>
<body class="text-sm leading-normal">
<Header siteTitle="ទស្សនាវដ្តីយើង"/>
<p>ម៉ឺនុយ</p>
<slot/>
<p>ជើងទំព័រ</p>
</body>
</html>
