ដូចគ្នានឹងគំរូទំព័រដទៃទៀតដែរ យើងអាចបង្កើតគំរូទំព័រការផ្សាយនៅក្នុងថត src/layouts និងនាំចូលគំរូទំព័រនេះទៅក្នុងទំព័រឌីណាមិកដែលមានប៉ារ៉ាម៉ែតជាអ្វីក៏បាន មានដូចជា [slug].astro ជាដើម។ បើយើងបង្កើតថតឈ្មោះ post មួយនៅក្នុងថត src/pages ហើយបញ្ចូលឯកសារ [slug].astro ទៅក្នុងនោះ ផ្លូវចូលទៅកាន់ឯកសារនេះគឺ /post/[slug] ដែលនៅក្នុងនោះ [slug] គឺជាប៉ារ៉ាម៉ែតសំរាប់ទទួលយកឈ្មោះរបស់ឯកសារដែលជាទិន្នន័យនិមួយៗ។ នៅពេលត្រូវយកទៅប្រើ គំរូទំព័រការផ្សាយនឹងទទួលបាននូវសំណុំទិន្នន័យមួយទាក់ទងនឹងទំព័រត្រូវបង្ហាញដល់អ្នកអាន។ យើងអាចស្រង់យកបណ្តាទិន្នន័យទាំងឡាយនៅក្នុងសំណុំទិន្នន័យនេះ មករៀបរៀងជាទំព័របង្ហាញដល់អ្នកអាន។
<!--src/layouts/Post.astro-->
---
import { getEntry } from 'astro:content'
const { post } = Astro.props
const { Content } = await post.render()
const author = await getEntry(post.data.author)
const videos = await getEntry(post.data.videos)
---
<section class="Ad region">
<img src="/images/ad.jpg" />
<img src="/images/ad.jpg" />
</section>
<section class="Post region">
<div class="main">
<h3 class="title">{post.data.title}</h3>
<div class="categories">
<span>ជំពូកៈ {post.data.categories.join(', ')}</span>
<span>{post.data.pudate.toLocaleDateString('it-IT')}</span>
</div>
<div class="author">
<span>អ្នករៀបរៀងៈ {author.data.name}</span>
</div>
<div class="content"><Content/></div>
</div>
<div class="sidebar">
ផ្សាយពាណិជ្ជកម្ម
</div>
</section>
<style is:global>
.Ad{
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 10px;
}
.Ad img{
width: 100%;
}
.Post{
margin-top: 20px;
display: grid;
grid-template-columns: 70% auto;
grid-gap: 15px;
}
.Post .main, .Post .sidebar{
background-color: rgb(231, 223, 223);
color: rgb(22, 22, 22);
padding: 15px;
}
.Post .sidebar{
text-align: center;
padding: 0;
}
.Post .main .title{
font: 18px/1.5 Oswald, Koulen;
margin-bottom: 20px;
}
.Post .main .categories span:nth-child(2){
float: right;
}
.Post .main .author{
margin-bottom: 30px;
}
@media only screen and (max-width:600px){
.Ad{
grid-template-columns: 100%;
}
.Post{
grid-template-columns: 100%;
}
}
</style>
<!--src/pages/[page].astro-->
---
import Base from "../layouts/Base.astro"
import Pagination from "../components/Pagination.astro"
import { getCollection } from 'astro:content'
export async function getStaticPaths({paginate}){
const Posts = await getCollection('posts')
Posts.sort((a, b)=>b.data.pudate-a.data.pudate)
const posts = Posts.slice()
return paginate(posts, {pageSize: 24})
}
const { page } = Astro.props
---
<Base pageTitle="ទំព័រដើម" pageURL="/" >
<Pagination page={page}/>
</Base>
