នៅពេលដែលយើងតំលើងកញ្ចប់ Astro យើងទទួលបាននូវទំព័រ index.astro មួយនៅក្នុងថត src/pages ។ ទំព័រនេះមានកូដជាមូលដ្ឋានគ្រឹះនៃទំរង់នៃទំព័រ HTML ទាំងអស់ដែលអាចដំណើរការបាននៅក្នុង browser ។ ហើយគ្រប់ទំព័រ astro ទាំងអស់ចាំបាច់ត្រូវមានមូលដ្ឋានគ្រឹះនេះ។ ដើម្បីជៀសវាងការសរសេរកូដដដែលៗនៅក្នុងការបង្កើតទំព័រនិមួយៗ យើងអាចចំលងកូដនៅក្នុងទំព័រ index.astro នេះទុកធ្វើជាគំរូដល់ការបង្កើតទំព័រដទៃទៀត ដោយគ្រាន់តែនាំចូលនូវគំរូទំព័រនេះយកមកប្រើនៅក្នុងទំព័រទាំងនោះគឺជាការស្រេច។ ជាទូទៅ គេនិយមបង្កើតគំរូទំព័រនិងរក្សាវាទុកនៅក្នុងថត src/layouts ។
<!--src/layouts/Base.astro-->
---
const { pageTitle="ទំព័រគ្រឹះ" } = Astro.props
---
<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">
<p>ក្បាលទំព័រ</p>
<p>ម៉ឺនុយ</p>
<slot/>
<p>ជើងទំព័រ</p>
</body>
</html>
<!--src/pages/index.astro-->
---
import Base from "../layouts/Base.astro"
---
<Base pageTitle="ទំព័រដើម">
<p>ទំព័រដើម</p>
</Base>
ដោយគំរូទំព័រ Base.astro នឹងត្រូវយកទៅប្រើនៅក្នុងគ្រប់ទំព័រ astro ទាំងអស់ គំរូទំព័រនេះត្រូវហៅថា គំរូទំព័រគ្រឹះ ព្រោះវាជាគ្រឹះនៃគ្រប់ទំព័រ astro ទាំងអស់។
មួយវិញទៀត នៅក្នុងគំរូទំព័រគ្រឹះ Base.astro ខាងលើនេះ មានការសរសេរបន្ថែមកូដមួយចំនួន គឺការដាក់តំណរភ្ជាប់យក ពុម្ពអក្សរ រូបភាព logo និងឯកសារ jquery.js មកប្រើប្រាស់នៅក្នុងកម្មវិធីគេហទំព័រទាំងមូលតាមរយៈគំរូទំព័រគ្រឹះ Base.astro នេះ។ ហើយដើម្បីអាចអោយរូបភាព logo ផ្ទាល់ខ្លួនរបស់យើងអាចលេចឡើងបាន យើងចាំបាច់ត្រូវលុបតំណរភ្ជាប់ទៅកាន់រូបភាពមានស្រាប់នៅក្នុងកញ្ចប់ Astro ។
ក្នុងករណីដែលយើងប្រើប្រាស់កញ្ចប់ Tailwind បើយើងមិនជ្រើសរើសយកពុម្ពអក្សរផ្សេងៗសំរាប់ទំព័រណាមួយនោះទេ កញ្ចប់ Tailwind នឹងប្រើប្រាស់ពុម្ពអក្សរមានស្រាប់ប្រភេទ sans សំរាប់ទំព័រនោះ។ ក៏ប៉ុន្តែយើងក៏អាចបញ្ចូលពុម្ពអក្សររបស់យើងផ្ទាល់ចូលទៅក្នុងកំរងពុម្ពអក្សរមានស្រាប់ប្រភេទ sans នោះបានដែរ ដោយធ្វើការកែប្រែឯកសារ tailwind.config.cjs ដូចខាងក្រោមនេះ៖
/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme")
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
fontFamily: {
sans: ["Vidaloka", "OdorMeanChey", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
}
ការធ្វើដូចខាងលើនេះ នឹងធ្វើអោយពុម្ពអក្សររបស់យើងនឹងត្រូវយកមកប្រើជាស្វ័យប្រវត្តិ នៅពេលដែលកញ្ចប់ Tailwind ជ្រើសរើសយកកំរងពុម្ពអក្សរមានស្រាប់ប្រភេទ sans មកប្រើប្រាស់៕
