ជាទូទៅ នៅលើទំព័រដើម គេនិយមបង្កើតផ្ទាំងផ្សេងៗ ក្នុងគោលបំណងតុបតែងរចនាបង្ហាញនូវការផ្សាយចុងក្រោយ ការផ្សាយតាមជំពូកនិមួយៗ និងការផ្សាយវិដេអូបន្តផ្ទាល់ជាដើម។ សំរាប់គេហទំព័រ Astro របស់យើង យើងអាចបង្កើតផ្ទាំងមួយបង្ហាញការផ្សាយចុងក្រោយ (latest post) ចំនួនប្រាំ។ ការផ្សាយចុងក្រោយចំនួនពីរនឹងត្រូវបង្ហាញរូបភាពធំជាងគេ និងការផ្សាយចំនួនបីបន្ទាប់មកទៀតនឹងបង្ហាញរូបភាពមានទំហំធំល្មម។ ផ្ទាំងការផ្សាយពាណិជ្ជកម្ម នឹងត្រូវនៅខាងក្រោមផ្ទាំងការផ្សាយចុងក្រោយ។
ផ្ទាំងការផ្សាយចុងក្រោយអាចត្រូវបង្កើតឡើងនៅលើទំព័រដើមផ្ទាល់ក៏បាន នៅក្នុងសមាសភាគណាមួយក៏បាន។ ដើម្បីអោយងាយស្រួលក្នុងការសរសេរកូដ យើងត្រូវជ្រើសរើសយកការបង្កើតផ្ទាំងនេះនៅក្នុងសមាសភាគដាច់តែឯងមួយនៅក្នុងថត src/components មុននឹងត្រូវនាំចូលសមាសភាគនេះទៅក្នុងទំព័រដើម។
<!--src/components/Latest.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(0, 5)
---
<section class="Latest region">
<div class="panel">
{posts.map((post)=>(
<a href=`/post/${post.slug}`>
<img src={post.data.thumb} />
<img class="play-icon" src="/images/play.png" />
<div class="title">{post.data.title}</div>
</a>
))}
</div>
<div class="ad">
<img src="/images/ad.jpg" />
<img src="/images/ad.jpg" />
</div>
</section>
<style>
.Latest .panel{
display: grid;
grid-template-columns: repeat(6, auto);
grid-gap: 10px;
padding: 10px 0;
}
.Latest .panel a{
position: relative;
color: white;
padding-top: 56.25%;
overflow: hidden;
}
.Latest .panel img{
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
lef: 0;
}
.Latest .panel a:nth-child(1){
grid-column: 1 / span 3;
}
.Latest .panel a:nth-child(2){
grid-column: 4 / span 3;
}
.Latest .panel a:nth-child(3){
grid-column: 1 / span 2;
}
.Latest .panel a:nth-child(4){
grid-column: 3 / span 2;
}
.Latest .panel a:nth-child(5){
grid-column: 5 / span 2;
}
.Latest .panel a .play-icon{
width: auto;
min-height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15%;
}
.Latest .panel a .title{
position: absolute;
bottom: 0;
font: 22px/1.5 Oswald, Bayon;
padding: 5px 10px;
text-shadow: 2px 2px 4px #000000;
background: -webkit-linear-gradient(bottom, black,transparent);
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.Latest .panel a:nth-child(n+3) .title{
font-size: 16px;
}
.Latest .ad{
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
}
.Latest .ad img{
width: 100%;
}
@media only screen and (max-width: 600px){
.Latest .panel{
grid-template-columns: 100%;
padding: 10px;
}
.Latest .panel a:nth-child(n){
grid-column: 1 / span 1;
}
.Latest .ad{
grid-template-columns: 100%;
padding: 0 10px;
}
.Latest .panel a .title{
font-size: 16px;
}
}
</style>
<!--src/pages/index.astro-->
---
import Base from "../layouts/Base.astro"
import Latest from "../components/Latest.astro"
---
<Base pageTitle="ទំព័រដើម" pageURL="/" >
<Latest/>
</Base>
