Thiết kế hoàn chỉnh Blog trong Python Django

Nội dung

Bài này sẽ giới thiệu những nội dung sau:

• Thiết kế Slider Bar
• Thiết kế Footer
• Tạo web page từ thông tin đã thiết kế

---

Thiết kế Slider Bar

Slider Bar trong website là nơi hiển thị những mục chính trong trang web, từ những mục này giúp người dùng dễ tìm kiếm thông tin muốn tìm.

Yêu cầu Slider Bar phải ‘fixed’ trên trang web, để khi trang web quá dài và người dùng kéo xuống dưới, thì Slider Bar vẫn ‘đứng yên’ ở màn hình cho người dùng vẫn có thể lựa chọn bất cứ lúc nào. Ta sẽ sử dụng Slider Bar của Bootstrap như sau:

<div class="bs-sliderbar" style="background-color: #ffffff;>
    <ul class="nav flex-column">
        <li><a href="/redirect?Id=ockOPgmf%2bYcKOZ%2bjTTUlZHvO8ZR7NgpHNjdzDYB9hhE%3d" tin cá nhân</a></li>
        <li><a href="/redirect?Id=rV4G3fH4LY9jEK6er9LuCS%2fuNxuw%2bsUsL5a9reRjWUM%3d" viết</a></li>
        <li><a href="/redirect?Id=PII9ejNqWVU0YlQIwjPwBbWrzxYivFAssvxR%2f4VLBGM%3d" hệ</a></li>
    </ul>
</div>

Bây giờ, Kteam muốn Slide Bar nằm ở bên trái, thông tin chính nằm ở bên phải, từ thẻ div row chia ngang ở bài trước. Kteam sẽ hoàn thiện như sau:

<br/>
<div class="row">
    <div class="col-sm-2">
         <div class="bs-sliderbar" style="background-color: #ffffff;">
             <ul class="nav flex-column">
                 <li><a href="/redirect?Id=ockOPgmf%2bYcKOZ%2bjTTUlZHvO8ZR7NgpHNjdzDYB9hhE%3d" tin cá nhân</a></li>
                 <li><a href="/redirect?Id=rV4G3fH4LY9jEK6er9LuCS%2fuNxuw%2bsUsL5a9reRjWUM%3d" viết</a></li>
                 <li><a href="/redirect?Id=PII9ejNqWVU0YlQIwjPwBbWrzxYivFAssvxR%2f4VLBGM%3d" hệ</a></li>
             </ul>
         </div>
     </div>
     <div class="col-sm-10">
           {% block content %}
      
           {% endblock %}
     </div>
</div>

---

Thiết kế Footer

Bây giờ Kteam sẽ để footer có những link liên kết như sau:

Ta sẽ để thẻ footer nằm trong body ở dưới cùng:

<footer>
    <div class="container-fluid">
        <a href="/redirect?Id=6U%2fmjnomkcLNhYuCvRy2AyVPdtNybWqOzxEqDEZJIlyKQL21E855mOksJV66zohA" | <a href="/redirect?Id=6U%2fmjnomkcLNhYuCvRy2A7pB2GqsMYbG5BSh%2bkby54ixeR8n%2fJqm7bzH%2bNfTYHLN" | <a href="/redirect?Id=6U%2fmjnomkcLNhYuCvRy2Aw4nvdeGx3O9EZkOGYSSxloDxvDNvLW0usazWZd5AIMx"
    </div>
</footer>

Bây giờ ta phải xử lý làm sao để footer nằm ở dưới cùng. Đầu tiên, ta phải cho thẻ html, body phải hiện thị 100% bề dọc, cho dù thông tin có ít hay không. Ở thẻ header, ta thêm style css như sau:

<style>
    html, body {
        height: 100%;
        background-color: #f6f6f6;
    }
</style>

Sau đó, ta cho thẻ div đầu tiên trong body có class container-fluid chiếm bề dọc ít nhất 95%, để 5% còn lại cho footer. Như vậy footer sẽ luôn nằm dưới đáy trang web

Như vây: ta đã hoàn thành việc thiết kế blog

---

Tạo web page từ design đã thiết kế

Bây giờ ta thử tận dụng design mà ta vừa thiết kế được làm một web page. Ở trang chủ (url ‘/’) mình sẽ hiển thị thông tin cá nhân, còn ở url ‘/contact’ thì sẽ hiển thị thông tin liên hệ

Ở file home.html, mình sẽ sửa lại như sau:

{% extends "pages/base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<p>Tên: Lê Bảo Châu</p>
<p>Năm: 1997</p>
<p>Trường: Đại học sư phạm kỹ thuật Tp.HCM</p>   
{% endblock %}

Ngoài ra, mình sẽ thêm 1 file contact.html như sau:

{% extends "pages/base.html" %}

{% block title %}Contact{% endblock %}

{% block content %}
<p>Liên hệ email:</p>
<p>[email protected]</p>
{% endblock %}

Ở file views.py, Ta sẽ viết thêm hàm để thực thi khi truy cập url ‘/contact’:

def contact(request):
   return render(request, 'pages/contact.html')

Ở file urls.py trong app home, tạo đường dẫn path contract:

urlpatterns = [
   path('', views.index),
   path('contact/', views.contact),
]

Bây giờ, ta runserver và thử vào mục Thông tin cá nhân hoặc Liên hệ để xem kết quả:

---