នៅលើម៉ឺនុយនៃកម្មវិធីគេហទំព័ររបស់យើង ជំពូកនិមួយៗត្រូវបានភ្ជាប់ទៅនឹងផ្លូវណាមួយនិងទំព័រលេខ 1 មុនរួចជាស្រេច ឧទាហរណ៍ជាក់ស្តែងដូចជាម៉ឺនុយ រឿងខ្មែរ ត្រូវបានភ្ជាប់ទៅនឹងផ្លូវ /Khmer/1 ម៉ឺនុយ រឿងថៃ ត្រូវបានភ្ជាប់ទៅនឹងផ្លូវ /Thai/1 ជាដើម។ ដើម្បីប្តូរពណ៌នៅលើម៉ឺនុយនិមួយៗ នៅពេលដែលម៉ឺនុយទាំងនោះត្រូវបានចុច យើងចាំបាច់ត្រូវផ្តល់ពណ៌មានដែលជាប៉ារ៉ាម៉ែត category អោយទៅទំព័រ Base.astro ដែលនឹងបញ្ជូនព័តមាននេះជាបន្តទៅទៀតអោយទៅទំព័រ Menu.astro ។ តែយើងក៏ត្រូវសរសេរកូដបន្ថែមមួយចំនួនទៀតនៅក្នុងទំព័រ Menu.astro នេះដែរ ដើម្បីដូរពណ៌របស់ម៉ឺនុយនៅពេលដែលមានការចុចលើម៉ឺនុយណាមួយ។
<!--src/pages/[category]/[page].astro-->
---
import Base from '../../layouts/Base.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 categories = [...new Set(posts.map((post) => post.data.categories).flat())]
return categories.flatMap((category) => {
const filteredPosts = posts.filter((post) => post.data.categories.includes(category))
return paginate(filteredPosts, {
params: {category},
pageSize: 24
})
})
}
const {page} = Astro.props
const {category} = Astro.params
---
<Base pageTitle="ទំព័រជំពូក" pageURL={category} >
<p>{category}</p>
</Base>
<!--src/layouts/Menu.astro-->
---
const {pageURL} = Astro.props
let home = ''
let Khmer = ''
let Thai = ''
let Chinese = ''
let Korean = ''
let Documentary = ''
if(pageURL === '/'){
home = 'active'
}else if(pageURL === 'Khmer'){
Khmer = 'active'
}else if(pageURL === 'Thai'){
Thai = 'active'
}else if(pageURL === 'Chinese'){
Chinese = 'active'
}else if(pageURL === 'Korean'){
Korean = 'active'
}else if(pageURL === 'Documentary'){
Documentary = 'active'
}
---
<section class='menu'>
<nav class="nav">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="region">
<div class="topnav" id="myTopnav">
<a href="/" class=`home ${home}`>ទំព័រដើម</a>
<a href="/Khmer/1" class=`Khmer ${Khmer}`>រឿងខ្មែរ</a>
<a href="/Thai/1" class=`Thai ${Thai}`>រឿងថៃ</a>
<a href="/Chinese/1" class=`Chinese ${Chinese}`>រឿងចិន</a>
<a href="/Korean/1" class=`Korean ${Korean}`>រឿងកូរ៉េ</a>
<a href="/Documentary/1" class=`Documentaty ${Documentary}`>ឯកសារ</a>
<a href="#contect" class="contact">ទំនាក់ទំនង</a>
<a href="#about" class="about">អំពីយើងខ្ញុំ</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</nav>
<script is:inline>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</section>
<style>
nav{
background-color: rgb(189, 59, 11);
}
.topnav {
background-color: rgb(189, 59, 11);
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 9px 16px;
text-decoration: none;
font-size: 14px;
}
.topnav a:hover {
background-color: var(--background-dark);
color: white;
}
.topnav a.active {
background-color: var(--background-dark);
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
