ជាទូទៅ ដើម្បី​បង្ហាញ​អត្ថបទ​និង​ឬ​ពហុព័ត៌មាន​មាន​នៅ​ក្នុង​​ការផ្សាយ​ទាំងឡាយ​ ដល់​អ្នក​ចូលអាន​គេហទំព័រ យើង​ចាំបាច់​ត្រូវ​បង្កើត​គំរូទំព័រ​នៃ​ការផ្សាយ​ទោល​មួយ​សិន ដែល​ភាសា​អង់គ្លេស​ហៅ​ថា single post template ។ ហើយ​បង្កើត​គំរូទំព័រ​នៃ​ការផ្សាយ​ទោល​​ដ៏​សាមញ្ញ​មួយ អាច​ត្រូវ​ធ្វើ​ឡើង​ដូច​ខាង​ក្រោម​នេះ៖

 

#mysite/blog/views.py
from django.shortcuts import render


def index(request):
    from .controllers import _index
    kdict = _index.call()
    return render(request, 'index.html', context=kdict)


def post(request, slug):
    from .controllers import _post
    kdict = _post.call(slug)
    return render(request, 'post.html', context=kdict)
    

def bookCover(request):
    from .controllers import _bookCover
    kdict = _bookCover.call()
    return render(request, 'bookcover.html', context=kdict)

 

from .. import config
from copy import deepcopy
from datetime import datetime
from pytz import timezone
from .. models import Post

def call(slug):
    kdict = deepcopy(config.kdict)
    kdict['datetime'] = datetime.now(timezone('Asia/Phnom_Penh'))
    queryset = Post.objects.filter(slug=slug)
    kdict['post'] = queryset

    return kdict

 

{% extends 'base.html' %}

{% load static %}
{% block insert_into_head %}
<link rel="stylesheet" href="{% static 'styles/index.css' %}">
{% endblock %}

{% block main %}
<div class='main region'>
    {% block content %}
    <div class='content'>

        {% for v in post %}
        <div class='article'>
        <div class='post-title'>
            <a href='post/{{ post.slug }}'>{{ v.title }}</a>
        </div>
        <div class='author'>
            by {{ v.author }}
        </div>
        <div class='date'>
            {{ v.created_on }}
        </div>
        <div class='post-body'>
            {{ v.content }}
        </div>
        </div>
        {% endfor %}

    </div>
    {% endblock %}

    {% block sidebar %}
    <div class='sidebar'>
        ផ្សាយ​ពាណិជ្ជកម្ម
    </div>
    {% endblock %}
</div>
    
{% endblock %}

 

.main{
    margin-top: 30px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 73% auto;
    grid-gap: 20px;
}

.main .sidebar{
    padding: 20px;
    background: #ddd;
}

.main .content .article{
    background: #ddd;
    margin-bottom: 20px;
    padding: 20px;
}

.main .content .article:last-child{
    margin-bottom: 0;
}

.main .content .post-title{
    font: 20px/1.5 Oswald;
    margin-bottom: 20px;
}

.main .content .date{
    margin-bottom: 20px;
}

@media only screen and (max-width: 600px){
    .main{
        grid-template-columns: 100%;
    }
}