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

យើងបានដឹងរួចមកហើយថា គ្រប់ឯកសារស្តាទិកទាំងឡាយមានដូចជា ពុម្ពអក្សរ រូបភាព CSS និង JavaScript អាចត្រូវយកមកប្រើបាន បើសិនជាឯកសារទាំងនោះត្រូវទុកនៅក្នុងថត public ឬថតណាមួយនៅក្នុងថត src ។ ដើម្បីអោយមានការងាយស្រួល យើងអាចរក្សារឯកសារស្តាទិកទុកនៅក្នុងថត public ដោយបង្កើតថត fonts, images, styles, និង scripts សំរាប់រក្សារទុកឯកសារទាំងនោះទៅតាមប្រភេទរបស់វា។

ចំពោះពុម្ពអក្សរ យើងអាចទាញយកពីគេហទំព័រ Google Fonts មកទុកនៅក្នុងថត fonts នៅក្នុងថត public និងត្រូវបង្កើតឯកសារ CSS មួយនៅក្នុងថត fonts ដើម្បីអាចយកពុម្ពអក្សរទាំងនោះទៅប្រើប្រាស់បាន។

/* 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);
}

ចំពោះរូបភាព យើងអាចយកពីប្រភពណាក៏បានដែរ យកមកទុកទៅក្នុងថត images នៅក្នុងថត public ។ សំរាប់ឯកសារ CSS យើងនឹងបង្កើតជាបណ្តើរៗទុកនៅក្នុងថត styles ។ ដូចគ្នាដែរ ចំពោះឯកសារ JavaScript យើងនឹងបង្កើតវាជាបណ្តើរៗនិងរក្សារវាទុកនៅក្នុងថត scripts ។ បើសិនជាយើងចង់ប្រើប្រាស់ jQuery យើងអាចចំលងយកពីគេហទំព័រ jQuery មកបង្កើតជាឯកសារ jquery.js ទុកនៅក្នុងថត scripts ។ សំរាប់ទំព័រដើមនៃកម្មវិធីគេហទំព័ររបស់យើង យើងអាចបង្កើតឯកសារ CSS មួយដូចខាងក្រោមនេះ៖

/* public/styles/base.css */

:root{
    --background: #ff7474;
    --background-dark: #541616;
    --background-light: #fce5e5;
    --body-font: 14px/1.5 Vidaloka, OdorMeanChey;
    --link: #c64242;
    --color: rgb(107, 107, 107);
}
  
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: var(--link);
}

a:hover{
    opacity: .7;
}

.region{
    max-width: 1100px;
    margin: 0 auto;
}
  
html{
    color: var(--color);
    font: var(--body-font);
    background: var(--background-light);
}

ការយកឯកសារនៅក្នុងថត public ទៅប្រើសំរាប់ទំព័រដើម ត្រូវធ្វើឡើងដោយបញ្ចូលតំណរភ្ជាប់ទៅកាន់ឯកសារទាំងនោះដូចខាងក្រោមនេះ៖

<!--src/pages/index.astro-->
---

---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
        <link href="/images/siteLogo.png" rel="icon" />
        <link href="/fonts/setup.css" rel="stylesheet" />
        <link href="/styles/base.css" rel="stylesheet" />
        <script is:inline src="/scripts/jquery.js"></script>
    </head>
    <body>
        <p>ស្វាគមន៍មកកាន់ទំព័រដើម!</p>
    </body>
</html>

ដើម្បីអាចប្រើប្រាស់រូបភាពតំណាងអោយកម្មវិធីគេហទំព័ររបស់យើងនៅលើ browser (icon) យើងចាំបាច់ត្រូវជំនួសតំណរភ្ជាប់ទៅកាន់រូបភាព favicon.svg ដោយតំណរភ្ជាប់ទៅកាន់រូបភាពរបស់យើងផ្ទាល់៕