# mysite/multimedia/views.py

from django.shortcuts import render

def index(request):
    posts = Post.objects.all()
    print(posts)
    context = {
        'site_title':'​ពហុព័ត៌មាន',
        'page_title': 'ទំព័រ​ដើម',
    }

    return render(request, 'base.html', context)

 

<!--mysite/multimedia/templates/base.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>{{ site_title }} | {{ page_title}}</title>
    {% load static %}
    <link href="{% static 'images/site_logo.png' %}" rel="icon" />
    <link href="{% static 'fonts/setup.css' %}" rel="stylesheet" />
    <link href="{% static 'styles/base.css' %}" rel="stylesheet" />
    <script src="{% static 'scripts/jquery.js' %}"></script>
  </head>
  <body>
    {% include 'header.html' %}
  </body>
</html>

 

<!--mysite/multimedia/templates/header.html-->

{% load static %}
<link href="{% static 'styles/header.css' %}" rel="stylesheet" />

<section class="Header">
    <div class="inner region">
        <div class="title"><a href="/">{{ site_title }}</a></div>
        <form action="search" method="post">
            <select name="search" id="search">
                <option>ទាំងអស់</option>
                <option>ជំពូក</option>
            </select>
            <input type="text" name="q" required  placeholder="Search" />
            <input type="submit" value="ស្វែង​រក" />
        </form>
        <div class="login">
            <a href="/admin">ចូល​ក្នុង</a> | <span>ចុះឈ្មោះ</span>
        </div>
        
    </div>
</section>

<section class="Menu">
    <div class="inner region">
        <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/menu.css' %}" />
        <div class="topnav" id="myTopnav">
            <a href="#home" class="active">ទំព័រ​ដើម</a>
            <a href="#news">ព័ត៌មាន</a>
            <a href="#contact">ទំនាក់ទំនង</a>
            <a href="#about">អំពីពួកយើង</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </div>
</section>

<script>
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
        x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }
</script>

 

/* mysite/multimedia/static/styles/header.css */

.Header{
    background: var(--background-dark);
    color: white;
    border-top: 5px solid var(--background-light);
}

.Header a{
    color: white;
}

.Header .inner{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
    padding: 15px 5px;
}

.Header .inner .title{
    font: 35px/1.5 Oswald, Limonf3;
}

.Header .inner form{
    display: grid;
    grid-template-columns: 20% auto 20%;
}

.Header .inner form input,
.Header .inner form select{
    font: var(--body-font);
    padding: 2px 5px;
}

.Header .inner .login{
    text-align: right;
}

@media only screen and (max-width: 600px){
    .Header .inner{
        grid-template-columns: 100%;
        text-align: center;

    }

    .Header .inner form{
        padding: 5px 0;
    }
}