ក្រោយពីមូដ្ខានគ្រឹះនៃគេហទំព័រត្រូវបានបង្កើតឡើងរួចហើយ បន្ទាប់មកទៀត យើងចាំបាច់ត្រូវបង្កើតក្បាលគេហទំព័រ ដែលនៅក្នុងនោះមានម៉ឺនុយនិងកន្លែងចុចចូលឆ្ពោះទៅកាន់ទំព័រគ្រប់គ្រងរបស់ប្រព័ន្ធ Django ដែលភាសាអង់គ្លេសហៅថា Administration Panel ហើយដែលយើងអាចបកប្រែមកជាភាសាខ្មែរមកថា ទំព័រគ្រប់គ្រង ។
ជាទូទៅ នៅក្នុងការបង្កើតគំរូទំព័រទាំងឡាយ គេនិយមបង្កើតផ្នែកផ្សេងៗនៃគំរូទំព័រជាមុនសិន រួចបានយកផ្នែកទាំងនោះមកផ្គុំគ្នាបង្កើតជាគំរូទំព័រណាមួយ ដែលយើងចង់បាន។ មួយវិញទៀត គេអាចប្រៀបប្រដូចផ្នែកផ្សេងៗនៃគំរូទំព័រទៅនឹងគ្រឿងបំលាស់របស់រថយន្ត ដែលយើងអាចយកមកផ្គុំគ្នាបង្កើតបានជារថយន្តដ៏ពេលលក្ខណៈ។ ជាក់ស្តែង យើងអាចបង្កើតគំរូទំព័រមុខមួយបាន (index.html) ដោយយកផ្នែកគំរូទំព័រផ្នែកក្បាល (header template) មកផ្គុំគ្នាជាមួយនឹងគំរូទំព័រផ្នែកដងខ្លួន (body template) និងគំរូទំព័រផ្នែកជើង (footer template) ។
យ៉ាងណាម៉ិញ សារសំខាន់នៃការបង្កើតផ្នែកផ្សេងៗនៃគំរូទំព័រ គឺដើម្បីអាចយកផ្នែកទាំងនោះទៅប្រើប្រាស់បានជាច្រើនលើកច្រើនសារ ក្នុងការបង្កើតគំរូទំព័រជាច្រើនប្រភេទខុសៗគ្នា ដែលមានផ្នែកខ្លះដូចគ្នា។ ឧទាហរណ៍ ជាទូទៅបណ្តាទំព័រជាច្រើននៅផ្នែកខាងមុខ (frontend) របស់គេហទំព័រណាមួយ តែងតែមានក្បាលទំព័រ (header) ជើងទំព័រ (footer) និង ផ្នែកខាង (sidebar) ដូចៗគ្នា ពោលគឺទំព័រទាំងនោះខុសគ្នាតែផ្នែកដងខ្លួនតែប៉ុណ្ណោះ។ អាស្រ័យហេតុនេះ ដើម្បីបង្កើតបណ្តាទំព័រទាំងនោះ យើងគ្រាន់តែយកគំរូទំព័រផ្នែកក្បាល ផ្នែកដងខ្លួន និង ផ្នែកជើង មកផ្គុំគ្នាគឺជាការស្រេច ពោលគឺយើងគ្រាន់តែធ្វើដោះដូរផ្នែកដងខ្លួនតែបន្តិចបន្តួចប៉ុណ្ណោះ។
ដូចគ្នាដែរ នៅក្នុងកម្មវិធីគេហទំព័រ blog របស់យើង ការបង្កើតទំព័រផ្សេងៗ អាចត្រូវធ្វើឡើងដោយយកផ្នែកផ្សេងនៃគំរូទំព័រមកផ្គុំគ្នា ពោលគឺយើងអាចយកគំរូទំព័រផ្នែកក្បាល ផ្នែកដងខ្លួន ផ្នែកខាង និង ផ្នែកជើង មកផ្គុំគ្នាបង្កើតជាទំព័រដែលយើងចង់បាន។ ជាក់ស្តែង ការបង្កើតគំរូទំព័រផ្នែកក្បាលសំរាប់កម្មវិធីគេហទំព័រ blog របស់យើង អាចត្រូវធ្វើឡើងដូចខាងក្រោមនេះ៖
<!-- mysite/blog/templates/partials/header.html -->
{% load static %}
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='{% static "styles/partials/header.css" %}' />
<script src="{% static 'scripts/tool.js' %}"></script>
<section class='Header'>
<div class='header-wrapper region'>
<div class='datetime'>
<div class='date'></div>
<div id='kh-clock'></div>
<script>
var date = new Date('{{ datetime|date:"Y-m-d H:i" }}')
date = getKhDate(date)
$('.date').append(date)
clock()
setDateTime()
</script>
</div>
<div class='title-wrapper'>
<a class='title' href=''>{{ siteTitle }}</a>
<a class='description'>{{ description }}</a>
</div>
<form class='search' method='post' action='search/'>
<input type='text' />
<input type='submit' value='ស្វែងរក' />
</form>
</div>
<div class='menu-wrapper'>
<nav class='menu region'>
<div class="topnav" id="myTopnav">
<a href="" class="active">ទំព័រដើម</a>
<a href="#news">ព័ត៌មាន</a>
<div class="dropdown">
<button class="dropbtn">ជំពួកព័ត៌មាន
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#contact">ទំនាក់ទំនង</a>
<a href="#about">អំពីពួកយើង</a>
<a href="admin/">ចូលក្នុង</a>
<a href="javascript:void(0);" class="icon" onclick="mobileMenu()">☰</a>
</div>
</nav>
</div>
</section>
.Header{
border-top: 5px solid var(--grey);
}
.Header .header-wrapper{
display: grid;
grid-template-columns: 21% auto 21%;
align-items: center;
text-align: center;
padding: 10px;
}
.Header .header-wrapper .title-wrapper .title{
font: 45px/1.5 Oswald, Koulen;
display: block;
}
.Header .header-wrapper .title-wrapper .description{
font: italic 22px/1.5 Nokora;
display: block;
padding-top: 5px;
}
.Header .header-wrapper .datetime{
font: 16px/1.5 Moul;
}
.Header .header-wrapper .search{
display: grid;
grid-template-columns: 75% 25%;
}
.Header .header-wrapper .search input{
width: 100%;
padding: 0 5px;
font: 14px/1.5 OdorMeanChey;
}
.Header .menu-wrapper{
background: rgb(238, 238, 238);
border-top: 3px solid var(--grey);
border-bottom: 1px solid var(--grey);
}
:root{
--menu-font: 16px/1.5 Bayon;
}
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font: var(--menu-font);
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: black;
padding: 12px 16px;
background-color: inherit;
font: var(--menu-font);
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media only screen and (max-width: 600px){
.Header .header-wrapper{
grid-template-columns: 100%;
}
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
//mysite/static/scripts/tool.js
function mobileMenu() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function toKhNum(number) {
var khNum = {'0':'០', '1':'១', '2':'២', '3':'៣', '4':'៤', '5':'៥', '6':'៦', '7':'៧',
'8':'៨', '9':'៩'};
var stringNum = number.toString();
var khString = '';
for(var i in stringNum){
var char = stringNum.charAt(i);
khString += khNum[char];
}
return khString;
}
function getKhDate (rawDate){
var KhmerDays = ['អាទិត្យ', 'ច័ន្ទ', 'អង្គារ', 'ពុធ', 'ព្រហស្បតិ៍', 'សុក្រ', 'សៅរ៍'];
var KhmerMonths = ['មករា', 'កុម្ភៈ', 'មិនា', 'មេសា', 'ឧសភា', 'មិថុនា', 'កក្កដា', 'សីហា',
'កញ្ញា', 'តុលា', 'វិច្ឆិកា', 'ធ្នូ'];
var date = new Date(rawDate);
var month = date.getMonth();
var day = date.getDay();
var daym = toKhNum(date.getDate());
var year = toKhNum(date.getFullYear());
var time = date.toLocaleTimeString();
return ('ថ្ងៃ '+ KhmerDays[day]+' ទី '+daym+' '+KhmerMonths[month]+' '+year)
}
function checkTime(i) {
if (i < 10){i = "0" + i};
return i;
}
function clock(){
var period = 'ព្រឹក';
var today = new Date();
var h = today.getHours();
if(h>12){
h = h-12;
period = 'ល្ងាច';
}
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('kh-clock').innerHTML = toKhNum(h) + " : " + toKhNum(m) + " : " +
toKhNum(s)+' '+period;
var t = setTimeout(clock, 500);
}
ហើយដើម្បីយកគំរូទំព័រផ្នែកក្បាលខាងលើនេះ មកផ្គុំឬបញ្ចូលទៅក្នុងគំរូទំព័រដើម យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖
<!-- mysite/blog/templates/base.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ siteTitle }}</title>
{% load static %}
<script src="{% static 'scripts/jQuery.js' %}"></script>
<link rel="stylesheet" href="{% static 'styles/base.css' %}">
<link rel="stylesheet" href="{% static 'fonts/setup.css' %}">
<link rel="icon" href="{% static 'images/site_logo.png' %}" >
{% block insert_into_head %}<!-- to add -->{% endblock %}
</head>
<body>
{% include 'partials/header.html' %}
</body>
</html>
នៅក្នុងកូដខាងលើនេះ នៅលើបន្ទាត់លេខ 18 គឺជាការប្រើប្រាស់ភាសាគំរូទំព័ររបស់ប្រព័ន្ធ Django ដើម្បីយកគំរូទំព័រផ្នែកក្បាលដែលជាឯកសារឈ្មោះ header.html មកបញ្ចូលទៅក្នុងគំរូទំព័រដើមដែលជាឯកសារឈ្មោះ base.html ៕