នៅលើទំព័រដើម បន្ទាប់ពីផ្ទាំងការផ្សាយ យើងអាចបង្កើតផ្ទាំងមួយទៀត សំរាប់តំរៀបការផ្សាយចុងក្រោយមួយចំនួនទៀត សល់ពីការផ្សាយនៅក្នុងផ្ទាំងការផ្សាយ។ យើងអាចដាក់ឈ្មោះផ្ទាំងមួយនេះថាជាផ្ទាំងទំព័រដើម។ ដូចគ្នាដែរ យើងបង្កើតផ្ទាំងទំព័រដើមនៅក្នុងថត src/components ដោយធ្វើដូចខាងក្រោមនេះ៖
<!--src/components/Home.astro-->
---
import { getCollection, getEntry } from 'astro:content'
const Posts = await getCollection('posts')
Posts.sort((a, b)=>b.data.pudate-a.data.pudate)
const posts = Posts.slice(5, 25)
---
<section class="Home region">
<div class="container">
{posts.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>
<a class="navigation" href="/2">
<img src="/images/load-more.png" />
</a>
</section>
<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 .navigation{
display: block;
text-align: center;
}
@media only screen and (max-width:600px){
.Home .container{
grid-template-columns: 100%;
padding: 30px 10px;
}
}
</style>
<!--src/pages/index.astro-->
---
import Base from "../layouts/Base.astro"
import Latest from "../components/Latest.astro"
import Home from "../components/Home.astro"
---
<Base pageTitle="ទំព័រដើម" pageURL="/" >
<Latest/>
<Home/>
</Base>
