យើងអាចបែងចែកឯកសារ Astro ដែលមានឈ្មោះ .astro នៅខាងចុងជា ៣ ផ្នែកគឺ ផ្នែក JavaScript ផ្នែកភាសា Astro និងផ្នែក CSS ។ ផ្នែក JavaScript ត្រូវកំណត់ដោយសញ្ញាដកចំនួនបី នៅផ្នែកខាងលើគេបង្អស់នៃឯកសារ ផ្នែកកណ្តាលជាផ្នែកនៃភាសា Astro និងផ្នែកខាងក្រោមគេគឺជាផ្នែកនៃភាសា CSS ដែលត្រូវស្ថិតនៅក្នុង tag <style></style> ។
<!--src/pages/about.astro-->
---
const info = "about.astro"
---
<p>ស្វាគមន៍មកកាន់ទំព័រ {info}</p>
<style>
p{
color: red;
}
</style>
ផ្នែក JavaScript ត្រូវគេហៅថាជាភាសាអង់គ្លេសថា frontmatter ដែលអថេរនៅក្នុងនោះអាចត្រូវយកមកប្រើនៅក្នុងផ្នែកកណ្តាលដែលជាផ្នែកនៃភាសា Astro។ ការយកអថេរមកប្រើនៅក្នុងផ្នែកភាសា Astro ត្រូវដាក់នៅក្នុងសញ្ញា { } ។ ក្រៅពីអថេរ យើងអាចបង្កើតក្បួន ថ្នាក់ ឬក៏នាំចូលសាស្ត្រាផ្សេងៗទៀតមកប្រើនៅក្នុង frontmatter បានគ្រប់ពេលវេលា។
<!--src/pages/about.astro-->
---
function greeting(name){
const sentence = `ស្វាគមន៍មកកាន់ទំព័រ ${name}`
return sentence
}
---
<p>{greeting("about.astro")}</p>
<style>
p{
color: red;
}
</style>
