ភាពខុសគ្នារវាងគំរូទំព័រស្តាទិកនិងទំព័រស្តាទិក គឺស្ថិតនៅត្រង់ថា គំរូទំព័រស្តាទិកជាពុម្ពគំរូសំរាប់បង្កើតទំព័រស្តាទិក។ នៅក្នុងគំរូទំព័រស្តាទិក មានកន្លែងជាច្រើនសំរាប់ទទួលយកទិន្នន័យដើម្បីបង្កើតជាសំណុំទិន្នន័យមួយតំណាងអោយទំព័រស្តាទិកមួយ យកទៅរក្សាទុកនៅក្នុងមូលដ្ឋានទិន្នន័យ MongoDB ។
ដោយសារយើងបានបង្កើតគំរូនៃផ្នែកជាច្រើនសំរាប់គំរូទំព័រការផ្សាយ ហើយគំរូទំព័រស្តាទិកនឹងយកផ្នែកទាំងនោះមកប្រើប្រាស់ជាមូលដ្ឋានគ្រឹះ ដូចនេះការបង្កើតគំរូទំព័រស្តាទិកគ្មានអ្វីជាបញ្ហាឡើយ។ អ្វីដែលថ្មីសំរាប់គំរូទំព័រស្តាទិក គឺផ្នែកដែលប្រើប្រាស់ ckeditor ក្នុងការសរសេរអត្ថបទ។
<!--src/pages/admin/page/index.astro-->
---
import Base from "../../../layouts/admin/Base.astro"
import Page from "../../../layouts/admin/Page.astro"
const { userAuth, prisma, setting } = Astro.locals
if(!userAuth?.userId){ return Astro.redirect('/login') }
import page from "../../../data/page.js"
const total = await page.count({prisma})
const numberPage = Math.ceil(total/setting.adminItems)
const currentPage = Astro.url.searchParams.get('page') || ''
const pagination = {total, numberPage, currentPage}
if(currentPage){
var items = await page.paginate({prisma, currentPage}, setting.adminItems)
}else{
var items = await page.getItems({prisma}, setting.adminItems)
}
const pages = items.map((page)=>{page.date = new Date(page.date).toLocaleDateString('it-IT')
return page })
---
<Base pageTitle="ទំព័រស្តាទិក" pagination={pagination} items={pages} type="page">
<Page/>
</Base>
យើងអាចដាក់ឈ្មោះផ្នែកសរសេរអត្ថបទនេះថា Page.astro ស្ថិតនៅក្នុងថត src/layouts/admin ។ ទំព័រដើមនៃគំរូទំព័រស្តាទិកដែលជាឯកសារ index.astro នៅក្នុងថត src/pages/admin/page ផ្សំឡើងដោយផ្នែក Base.astro និងផ្នែក Page.astro នៅក្នុងថត src/layouts/admin ។ ផ្នែកគំរូទំព័រ Page.astro ត្រូវបានដាក់បញ្ចូលទៅក្នុងផ្នែកគំរូទំព័រ Base.astro ។
<!--src/layouts/admin/Page.astro-->
---
const { item=0 } = Astro.props
---
<script is:inline src="/scripts/ckeditor/ckeditor.js"></script>
<section class="Page w-full">
{item ?
<form id="form" action={"/api/admin/page/update/"+item.id} method="post">
<input class="border w-full px-2 py-1 border-slate-300"
type="text" name="title" value={item.title} required placeholder="ចំណងជើង"
/>
<textarea class="" name="content" id="editor">{item.content}</textarea>
<div class="grid md:grid-cols-[auto_auto_15%] grid-cols-1">
<input class="border px-2 py-1 border-slate-300"
type="text" value={item.thumb} name="thumb" required placeholder="រូបតំណាង"
/>
<input class="border px-2 py-1 border-slate-300" value={item.date}
type="datetime-local" step="1" name="datetime" required
/>
<input class="border border-slate-300 px-2 py-1 hover:opacity-75 bg-slate-200 hover:cursor-pointer"
type="submit" value="ចុះផ្សាយ"
/>
</div>
</form>:
<form id="form" action="/api/admin/page/create" method="post">
<input class="border w-full px-2 py-1 border-slate-300"
type="text" name="title" required placeholder="ចំណងជើង"
/>
<textarea class="" name="content" id="editor"></textarea>
<div class="grid md:grid-cols-[auto_auto_15%] grid-cols-1">
<input class="border px-2 py-1 border-slate-300"
type="text" name="thumb" required placeholder="រូបតំណាង"
/>
<input class="border px-2 py-1 border-slate-300"
type="datetime-local" step="1" name="datetime" required
/>
<input class="border border-slate-300 px-2 py-1 hover:opacity-75
bg-slate-200 hover:cursor-pointer" type="submit" value="ចុះផ្សាយ"
/>
</div>
</form>
}
<script>
$('.Page input').on('change', () => {
window.onbeforeunload = save_data_check
})
ckeditor.model.document.on( 'change', () => {
window.onbeforeunload = save_data_check
} )
$('.Page #form').on('submit', () => {
window.onbeforeunload = null
})
function save_data_check(){
return "Your changes may not be saved."
}
</script>
</section>
<script is:inline src="/scripts/ckeditor/config.js"></script>
<style is:global>
.ck-editor__editable {
min-height: 270px;
}
</style>
Netlify: https://khmerweb-dynamic-blog.netlify.app/admin/page
