នៅពេលដែលគេហទំព័ររបស់យើងមានកាផ្សាយកាន់តែច្រើនឡើង យើងមិនអាចបង្ហាញការផ្សាយទាំងអស់នៅលើទំព័រដើមបានឡើយ យើងចាំចាច់ត្រូវបែងចែកការផ្សាយទាំងនោះជាច្រើនទំព័រ ហើយការផ្សាយនៅក្នុងទំព័រនិមួយៗ ត្រូវមានចំនួនកំណត់។ ទាក់ទងនឹងបញ្ហានេះ កញ្ចប់ Astro.js បានជួយសំរួលដល់ការបង្កើតទំព័រទាំងឡាយ ដោយបានផ្តល់នូវក្បួនពិសេសម៉្យាងមានឈ្មោះថា paginate( ) ក្នុងការបែងចែកការផ្សាយជាទំព័រ និងលក្ខណៈពិសេសមួយចំនួនទៀតជួយសំរួលដល់ការបង្កើតទំព័រ។ ក្បួន paginate( ) នឹងត្រូវផ្តល់អោយទៅក្បួន getStaticPaths( ) ជាស្វ័យប្រវត្តិ ដែលនៅក្នុងនោះ ក្បួន paginate( ) នឹងត្រូវយកទៅប្រើ និងត្រូវទទួលបាននូវដំណឹងដែលជាការផ្សាយសរុបទាំងអស់ និងដំណឹងដែលជាចំនួនកំណត់នៃការផ្សាយសំរាប់ទំព័រនិមួយៗ។
<!--src/components/Pagination.astro-->
---
const { page } = Astro.props
---
<section class="Home region">
<div class="container">
{page.data.map((post)=>(
<div class="wrapper">
<a href=`/post/${post.slug}`>
<img src={post.data.thumb} />
<img class="play-icon" src="/images/play.png" />
</a>
<div class="date">{post.data.pudate}</div>
<a class="title" href=`/post/${post.slug}`>
<div >{post.data.title}</div>
</a>
</div>
))}
</div>
<div class="pagination">
<span>ទំព័រ </span>
<select data-page={page.currentPage}>
{[...Array(page.lastPage).keys()].map((pageNumber)=>(
<option>{pageNumber+1}</option>
))
}
</select>
<span> នៃ {page.lastPage}</span>
</div>
</section>
<script>
const currentPage = $('.pagination select').attr('data-page')
$('.pagination select').val(currentPage)
$( ".pagination select" ).on( "change", function(event) {
document.location = `/${event.target.value}`
})
</script>
<style>
.Home .container{
display: grid;
grid-template-columns: repeat(4, calc(100% / 4 - 11.25px));
grid-gap: 30px 15px;
padding: 30px 0;
}
.Home .container .wrapper a{
position: relative;
padding-top: 56.25%;
overflow: hidden;
width: 100%;
display: block;
}
.Home .container .wrapper a img{
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 0;
}
.Home .container .wrapper a .play-icon{
width: auto;
min-height: auto;
width: 15%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.Home .container .wrapper .title{
padding-top: 0;
}
.Home .container .wrapper .title div{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.Home .pagination{
display: block;
text-align: center;
}
@media only screen and (max-width:600px){
.Home .container{
grid-template-columns: 100%;
padding: 30px 10px;
}
}
</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)
return paginate(posts, {pageSize: 24})
}
const { page } = Astro.props
---
<Base pageTitle="ទំព័រដើម" pageURL="/" >
<Pagination page={page}/>
</Base>
ជាដំបូង យើងចាំបាច់ត្រូវបង្កើតផ្លូវឌីណាមិកមួយដែលត្រូវតែមានប៉ារ៉ាម៉ែតជាពាក្យថា page នៅក្នុងនោះ ឧទាហរណ៍ដូចជា [page].astro ជាដើម។ ឯកសារ [page].astro នេះអាចត្រូវរក្សាទុកនៅក្នុងថត src/pages ដែលនឹងត្រូវយកទៅប្រើសំរាប់ផ្លូវ “/1”, “/2", “/3” ជាដើម។ លេខសំរាប់ផ្លូវនេះ គឺជាលេខរបស់ទំព័រនិមួយៗ ដែលនឹងត្រូវផ្តល់អោយទៅប៉ារ៉ាម៉ែត page ជាស្វ័យប្រវត្តិ។ លើសពីនេះទៀត ប៉ារ៉ាម៉ែត page នឹងទទួលបាននូវទិន្នន័យមួយចំនួនបន្ថែមទៀតពីកម្មវិធី Astro មានជាអាទិ៍ដូចជាទិន្នន័យដែលជាការផ្សាយទាំងអស់សំរាប់ទំព័រនិមួយៗ ទិន្នន័យស្តីពីទំព័របន្ទាប់ ទំព័រមុន និង ទំព័រកំពុងត្រូវបើក។ សរុបមក យើងអាចស្រង់យកទិន្នន័យសំរាប់ទំព័រនិមួយៗយកមកប្រើតាមរយៈប៉ារ៉ាម៉ែត page នេះ៕
