Khmer Web | សមាសភាគ Astro

ឯកសារ Astro មួយអាចត្រូវយកទៅប្រើប្រាស់នៅក្នុងឯកសារ Astro ដទៃទៀតបាន។ ក្នុងករណីនេះ ឯកសារ Astro ដែលត្រូវយកទៅប្រើនៅក្នុងឯកសារផ្សេងទៀត ត្រូវហៅថា សមាសភាគ (component) ។ ការយកសមាសភាគណាមួយទៅប្រើ ត្រូវធ្វើឡើងតាមរយៈការនាំចូលនៅក្នុង frontmatter និងប្រើសមាសភាគនេះនៅក្នុងផ្នែកនៃភាសា Astro ។ មួយវិញទៀត សមាសភាគត្រូវស្ថិតនៅក្រៅថត src/pages មានដូចជាថត src/components ជាដើម ដើម្បីជៀសវាងការបង្កើតផ្លូវទៅកាន់សមាសភាគនោះ។

<!--src/components/Base.astro-->
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro</title>
	</head>
	<body>
		<p>ស្វាគមន៍ពីសមាសភាគ Base.astro</p>
	</body>
</html>

<!--src/pages/index.astro-->
---
import Base from "../components/Base.astro"
---

<Base />

យើងអាចផ្តល់ទិន្នន័យផ្សេងៗអោយទៅសមាសភាគណាមួយបាន ហើយទិន្នន័យនោះនឹងក្លាយទៅជា props សំរាប់សមាសភាគនោះ។ នៅក្នុងសមាសភាគ ការយកទិន្នន័យទាំងនោះមកប្រើការ ត្រូវធ្វើឡើងតាមរយៈអថេរសកល Astro.props នៅក្នុងផ្នែក frontmatter ។

<!--src/components/Base.astro-->
---
const {pageTitle} = Astro.props
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
		<p>ស្វាគមន៍ពីសមាសភាគ Base.astro</p>
	</body>
</html>

<!--src/pages/index.astro-->
---
import Base from "../components/Base.astro"
---

<Base pageTitle="ទំព័រដើម" />

នៅក្នុងសមាសភាគ ទិន្នន័យ props អាចមានតំលៃមានស្រាប់ណាមួយ ហើយក្នុងករណីដែលសមាសភាគមិនបានទទួលនូវទិន្នន័យ props ណាមួយទេ សមាសភាគនឹងយកទិន្នន័យមានស្រាប់នោះមកប្រើ។

<!--src/components/Base.astro-->
---
const {pageTitle="ទំព័រគ្រឺះ"} = Astro.props
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
		<p>ស្វាគមន៍ពីសមាសភាគ Base.astro</p>
	</body>
</html>

<!--src/pages/index.astro-->
---
import Base from "../components/Base.astro"
---

<Base />

នៅក្នុងសមាសភាគ យើងអាចបង្កើត ប្រហោង (slot) ទុកសំរាប់បញ្ចូលបណ្តាធាតុនៃភាសា Astro ទាំងឡាយដែលត្រូវបានផ្តល់អោយទៅសមាសភាគ។

<!--src/components/Base.astro-->
---
const {pageTitle="ទំព័រគ្រឺះ"} = Astro.props
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
		<slot />
	</body>
</html>

<!--src/pages/index.astro-->
---
import Base from "../components/Base.astro"
---

<Base pageTitle="ទំព័រដើម">
	<p>ស្វាគមន៍ពីទំព័រ index.astro</p>
</Base>

សមាសភាគមួយអាចមានប្រហោងជាច្រើន ហើយប្រហោងនិមួយៗអាចមានឈ្មោះខុសៗគ្នា។ ឈ្មោះរបស់ប្រហោងនិមួយៗត្រូវកំណត់ដោយលក្ខណៈ name ។ ជាលទ្ធផល យើងអាចផ្តល់ធាតុនៃភាសា Astro ទៅប្រហោងណាមួយក៏បាន ដោយកំណត់ឈ្មោះរបស់ប្រហោងនោះនៅក្នុងធាតុនៃភាសា Astro ដែលត្រូវផ្តល់អោយទៅសមាសភាគ។

<!--src/components/Base.astro-->
---
const {pageTitle="ទំព័រគ្រឺះ"} = Astro.props
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
		<slot name="top-slot" />
		<slot name="bottom-slot" />
	</body>
</html>

<!--src/pages/index.astro-->
---
import Base from "../components/Base.astro"
---

<Base pageTitle="ទំព័រដើម">
	<p slot="bottom-slot">សំរាប់ប្រហោងក្រោម</p>
	<p slot="top-slot">សំរាប់ប្រហោងលើ</p>
</Base>

សមាសភាគអាចមានធាតុនៃភាសា Astro មានស្រាប់សំរាប់ប្រហោងទាំងឡាយ ហើយក្នុងករណីដែលប្រហោងមិនបានទទួលធាតុនៃភាសា Astro ទេ ធាតុមានស្រាប់នោះនឹងត្រូវយកមកបំពេញប្រហោងនោះ។

<!--src/components/Base.astro-->
---
const {pageTitle="ទំព័រគ្រឺះ"} = Astro.props
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
		<slot name="top-slot">
			<p>ធាតុ HTML មានស្រាប់</p>
		</slot>
		<slot name="bottom-slot" />
	</body>
</html>

<!--src/pages/index.astro-->
---
import Base from "../components/Base.astro"
---

<Base pageTitle="ទំព័រដើម">
	<p slot="bottom-slot">សំរាប់ប្រហោងក្រោម</p>
</Base>

សមាសភាគអាចបង្កើតប្រហោងមួយសំរាប់បញ្ជូនធាតុនៃភាសា Astro ទៅកាន់ប្រហោងនៅក្នុងសមាសភាគផ្សេងទៀត ដោយដាក់ឈ្មោះប្រហោងដែលត្រូវបញ្ជូនទៅនៅក្នុងប្រហោងរបស់វា។

<!--src/components/Base.astro-->
---
const {pageTitle="ទំព័រគ្រឺះ"} = Astro.props
---

<html lang="en">
    <head>
	    <meta charset="utf-8" />
	    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
	    <meta name="viewport" content="width=device-width" />
	    <meta name="generator" content={Astro.generator} />
	    <title>{pageTitle}</title>
    </head>
    <body>
	    <slot name="top-slot">
		    <p>ធាតុ HTML មានស្រាប់</p>
	    </slot>
	    <slot name="bottom-slot" />
    </body>
</html>

<!--src/components/Home.astro-->
---
import Base from "./Base.astro"
const {title} = Astro.props
---

<Base pagTitle={title}>
    <slot name="home" slot="bottom-slot" />
</Base>

<!--src/pages/index.astro-->
---
import Home from "../components/Home.astro"
---

<Home title="ទំព័រដើម">
    <p slot="home">សំរាប់ប្រហោង Home</p>
</Home>