Khmer Web | ឯកសារស្តាទិក

ការរៀបរៀងកម្មវិធីគេហទំព័រទាមទារនូវការប្រើប្រាស់ឯកសារស្តាទិក (static file) ជាច្រើនប្រភេទ មានដូចជា ពុម្ពអក្សរ រូបភាព ឯកសារភាសា JavaScript និងភាសា CSS ជាដើម។ តែដោយយើងបានតំលើងកញ្ចប់ Tailwind រូចទៅហើយ ដូចនេះយើងមិនចាំបាច់ប្រើប្រាស់ឯកសារ CSS នោះទេ កញ្ចប់ Tailwind នឹងបង្កើតឯកសារ CSS ដោយខ្លួនវាផ្ទាល់ យើងគ្រាន់តែសរសេរឈ្មោះថ្នាក់មានស្រាប់របស់កញ្ចប់ Tailwind គឺជាការស្រេច Tailwind នឹងបង្កើតឯកសារ CSS ចាំបាច់សំរាប់ថ្នាក់ទាំងនោះ។

ជាទូទៅ គេនិយមរក្សាទុកឯកសារស្តាទិកនៅក្នុងថត public ដោយបង្កើតថតរងជាច្រើនទៀតនៅក្នុងនោះសំរាប់ឯកសារមានប្រភេទខុសៗគ្នា។ សំរាប់កម្មវិធីគេហទំព័ររបស់យើង យើងអាចបង្កើតថតរងចំនួនបី fonts, images, scripts សំរាប់ឯកសារ ពុម្ពអក្សរ រូបភាព និង JavaScript ។

សំរាប់ពុម្ពអក្សរ យើងអាចទាញយកពីគេហទំព័ររបស់ក្រុមហ៊ុន Google ដោយចូលទៅតាមអាស័យដ្ឋាន https://fonts.google.com/?subset=khmer និងរក្សាវាទុកនៅក្នុងថតរង public/fonts ។ សំរាប់រូបភាព យើងអាចបង្កើតនិងឬយកពីប្រភពស្របច្បាប់ណាក៏បានដែរ ដោយរក្សារូបទាំងនោះទុកនៅក្នុងថត public/images ។ ចំពោះឯកសារ JavaScript យើងនឹងបង្កើតវាជាបណ្តើរៗ និងរក្សាវាទុកនៅក្នុងថតរង public/scripts ។ ក៏ប៉ុន្តែ បើសិនជាយើងចង់ប្រើប្រាស់កញ្ចប់ jQuery ជាជំនួយក្នុងការសរសេរកូដជាភាសា JavaScript យើងអាចចំលងកូដពីគេហទំព័រ jQuery ជាផ្លូវការ យកមកបង្កើតជាឯកសារ jquery.js មួយរក្សាទុកនៅក្នុងថតរង public/scripts ។

ចំពោះពុម្ពអក្សរ ក្រោយពីទាញយកមកពីគេហទំព័ររបស់ក្រុមហ៊ុន Google រួចហើយ យើងត្រូវបង្កើតឯកសារ CSS មួយប្រភេទដោយរាយឈ្មោះពុម្ពអក្សរទាំងនោះនៅក្នុងឯកសារនោះ ក្នុងគោលបំណងដើម្បីអាចយកពុម្ពអក្សរទាំងនោះទៅប្រើប្រាស់នៅក្នុងកម្មវិធីគេហទំព័ររបស់យើង។

/* public/fonts/setup.css */

@font-face {
  font-family: Moul;
  src: url(Moul.ttf);
}
@font-face {
  font-family: Koulen;
  src: url(Koulen.ttf);
}
@font-face {
  font-family: Bayon;
  src: url(Bayon.ttf);
}
@font-face {
  font-family: OdorMeanChey;
  src: url(OdorMeanChey.ttf);
}
@font-face {
  font-family: Nokora;
  src: url(Nokora.ttf);
}
@font-face {
  font-family: Rooster;
  src: url(Rooster.ttf);
}
@font-face {
  font-family: Limonf3;
  src: url(Limonf3.ttf);
}
@font-face {
  font-family: HandWriting;
  src: url(HandWriting.ttf);
}
@font-face {
  font-family: Oswald;
  src: url(Oswald.ttf);
}
@font-face {
  font-family: Anton;
  src: url(Anton.ttf);
}
@font-face {
  font-family: Vidaloka;
  src: url(Vidaloka.ttf);
}
@font-face {
  font-family: Courgette;
  src: url(Courgette.ttf);
}
@font-face {
  font-family: Lobster;
  src: url(Lobster.ttf);
}
@font-face {
  font-family: BlackOpsOne;
  src: url(BlackOpsOne.ttf);
}
@font-face {
  font-family: StardosStencil;
  src: url(StardosStencil.ttf);
}