Khmer Web Library

យើងអាចបែងចែកទំព័រគ្រប់គ្រង់របស់យើងជា ៣ ផ្នែកបានគឺក្បាលទំព័រ ខ្លួនទំព័រ និងជើងទំព័រ ដោយធ្វើដូចខាងក្រោមនេះ៖

<!--users.ejs-->
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/users-style.css">
    <link href="https://fonts.googleapis.com/css?family=Odor+Mean+Chey|Moul" rel="stylesheet">
  </head>
  <body>
    <%- include('users-header.ejs') %>
    <%- include('users-main.ejs') %>
    <%- include('users-footer.ejs') %>
  </body>
</html>

/* users-style.css */
body{
  padding:0;
  margin:0;
  font:14px "Lucida Grande", Helvetica, Arial, sans-serif,"Odor Mean Chey";
  background:#e6e6e6;
}

<!--users-header.ejs-->
<header id="header" class="header">
  ក្បាលទំព័រ
</header>

<!--users-main.ejs-->
<main id="main" class="main">
  ខ្លួនទំព័រ
</main>

<!--users-footer.ejs-->
<footer id="footer" class="footer">
  ជើងទំព័រ
</footer>

នៅលើបន្តាត់លេខ 6 នៃឯកសារ users.ejs ដែលមាននៅក្នងថត views ការសរសេរថា <link rel="stylesheet" href="/stylesheets/users-style.css"> គឺជាការយកឯកសារ users-style.css នៅក្នុងថត stylesheets នៃថត public មកប្រើប្រាស់ក្នុងការរចនាទំព័រគ្រប់គ្រងរបស់យើង។ អាស្រ័យហេតុនេះ យើងចាំបាច់ត្រូវបង្កើតឯកសារឈ្មោះ users-style.css ទុកនៅក្នុងថត public/stylesheets ហើយនៅក្នុងឯកសារនោះ យើងអាចសរសេរកូដមួយចំនួនដូចមាននៅខាងលើ។

នៅលើបន្ទាត់លេខ 7 នៃឯកសារ users.ejs ការសរសេរថា <link href="https://fonts.googleapis.com/css?family=Odor+Mean+Chey|Moul" rel="stylesheet"> គឺជាការយកពុម្ពអក្សរខ្មែរចំនួន ២ ពីប្រព័ន្ធ Google Fonts មកប្រើនៅក្នុងទំព័រគ្រប់គ្រងរបស់យើង។

ចាប់ពីបន្ទាត់លេខ 10 រហូតដល់បន្ទាត់លេខ 12 នៃឯកសារ users.ejs គឺជាការយកផ្នែកនៃផ្ទៃទំព័រផ្សេងៗដែលមាននៅក្នុងថត views មកបញ្ចូលផ្គុំគ្នា បង្កើតទៅជាទំព័រគ្រប់គ្រងយ៉ាងពេញលេញមួយ។ ដូចនេះ យើងចាំបាច់ត្រូវបង្កើតឯកសារនៃផ្នែកទាំងនោះទុកនៅក្នុងថត views ដែលនៅក្នុងឯកសារទាំងនោះ ត្រូវមានការសរសេរកូដដូចនៅក្នុងរូបខាងលើនេះ។

ក្រោយពីបង្កើតឯកសារចាំបាច់ទាំងឡាយបានរួចរាល់អស់ហើយ យើងអាចធ្វើការរចនាក្បាលទំព័រគ្រប់គ្រងរបស់យើងបាន ដោយសរសេរកូដនៅក្នុងឯកសារ users-style.css ដូចខាងក្រោមនេះ៖

<!--users-header.ejs-->
<header id="stie-header" class="site-header">
  <div class="inner region">
    <div class="logo">
      <img src="https://3.bp.blogspot.com/-P2DOhVx8mTw/Xko-i2asuHI/AAAAAAABlWc/O0vC3539nj8wOrgfjxCPoF9TEWb47rMxgCLcBGAsYHQ/s1600/download.png">
    </div>
    <div class="title">
      ទំព័រគ្រប់គ្រង
    </div>
    <div class="log-out">
      <a href="/users/logout">
        <img src="https://1.bp.blogspot.com/-WN-EOQjevUM/XkpBvSv6iUI/AAAAAAABlWs/jCl08qMyAKcCS76acPomoluLh-xkUII9QCLcBGAsYHQ/s1600/logout.png">
      </a>
    </div>
  </div>
</header>

/* រចនាក្បាលទំព័រ */
.site-header{
  background:#00b3b3;
  color:white;
  font:22px/1.5 Moul;
  padding:10px 0 5px;
}
.site-header .inner{
  display:grid;
  grid-template-columns:35px auto 40px;
  align-items:center;
}
.site-header .inner .title{
  margin-left:10px;
  position:relative;
  top:-5px;
}
.site-header .inner .logo img{
  width:100%;
}
.site-header .inner .log-out img{
  width:100%;
}
@media only screen and (max-width: 768px){
  .region{
    width:100%;
  }
  .site-header{
    padding-left:10px;
    padding-right:10px;
  }
}

បន្ទាប់មកទៀត យើងអាចរចនាខ្លួនទំព័រគ្រប់គ្រងរបស់យើង ដោយធ្វើដូចខាងក្រោមនេះ៖

<!--users-main.ejs-->
<div id="main" class="main region">
  <div class="sidebar">
    <div class="title">
      មាតិកា
    </div>
  </div>
  <div class="content">
    <div class="title">
      បណ្តុំទិន្នន័យ
    </div>
  </div>
</div>

/* រចនាខ្លួនទំព័រ */
.main{
  display:grid;
  grid-template-columns:20% auto;
  min-height:450px;
  margin-top:30px;
}
.main .sidebar{
  border-right:1px solid #bfbfbf;
  padding-right:15px;
  margin-right:15px;
}
.main .sidebar .title{
  font:18px/1.5 Koulen;
}
.main .content .title{
  font:18px/1.5 Bokor;
}
@media only screen and (max-width: 768px){
  .main{
    grid-template-columns:100%;
    padding-left:10px;
    padding-right:10px;
    box-sizing:border-box;
  }
  .main .sidebar{
    border-right:none;
  }
}

ចំណែកឯជើងទំព័រវីញ យើងអាចធ្វើការរចនាដូចខាងក្រោមនេះ៖

<!--users-footer.ejs-->
<footer id="site-footer" class="site-footer">
  <div class="credit region">
    កម្មវិធីគេហទំព័រ «កំណត់ត្រាយើង» ត្រូវបានបង្កើតឡើងដោយក្រុមការងារ DEVOpenBlogger
  </div>
</footer>

/* រចនាជើងទំព័រ */
.site-footer{
  margin-top:30px;
  background:#d9d9d9;
}
.site-footer .credit{
  font:italic 14px/1.5 Nokora;
  text-align:center;
  padding:15px 0;
}
@media only screen and (max-width: 768px){
  .site-footer{
    padding-left:10px;
    padding-right:10px;
  }
}