1. Kế thừa Template.
Kế thừa template (template inheritance) là một khái niệm trong phát triển web, thường được sử dụng trong các framework web như Flask, Django, hoặc Jinja2. Nó cho phép bạn tạo ra một mẫu (template) cơ bản (thường là một trang cơ sở) và sau đó tái sử dụng nó trong các trang khác.
- Trong kế thừa template, bạn xác định một template cha (base template) chứa cấu trúc và phần nền chung cho trang web của bạn. Template cha thường bao gồm khung (layout) của trang, ví dụ như tiêu đề, menu điều hướng, chân trang, và các phần tử gốc.
- Sau đó, bạn tạo ra các template con (child templates) cho từng trang cụ thể của ứng dụng. Các template con này kế thừa từ template cha và chỉ cần định nghĩa nội dung riêng cho trang cụ thể đó.
- Template con có thể ghi đè hoặc mở rộng nội dung của template cha, điều này giúp bạn duy trì tính nhất quán trong toàn bộ trang web và giảm lặp lại code.
Ví dụ hãy tạo một project theo cây thư mục dưới.
../myapp/
├── render_html.py
└── templates
├── base.html
└── home.html
1 directory, 3 filesTạo file render_html.py với nội dung.
from flask import Flask, redirect, url_for, render_template
import requests
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('home.html')
if __name__=="__main__":
app.run(debug=True, host='0.0.0.0', port=5000)Tạo file base.html có nội dung.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<h1>My website</h1>
{% block content %} {% endblock %}
</body>
</html>Tạo file home.html có nội dung.
{% extends "base.html" %}
{% block title %} Home Page {% endblock %}
{% block content %}
<h2>This is Home Pages</h2>
{% endblock %}Chạy myapp.
$ python render_html.py
* Serving Flask app 'render_html'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on all addresses (0.0.0.0)
* Running on http://127.0.0.1:5000
* Running on http://192.168.13.200:5000
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
* Debugger PIN: 143-370-425Bạn có kết quả.
2. Sử dụng Bootstrap.
Bootstrap là một framework front-end phổ biến và mã nguồn mở được sử dụng để thiết kế và phát triển giao diện người dùng web một cách nhanh chóng và dễ dàng. Bootstrap cung cấp một bộ các CSS và JavaScript đã được thiết kế sẵn, cho phép bạn tạo ra các trang web có giao diện đẹp và đáp ứng trên nhiều thiết bị và kích thước màn hình.
Một số tính năng của Bootstrap bao gồm:
- Grid System: Bootstrap cung cấp một hệ thống lưới linh hoạt cho việc xây dựng trang web, giúp bạn dễ dàng xác định cấu trúc bố trí và tỷ lệ các phần tử trên trang.
- CSS Components: Bootstrap cung cấp các thành phần giao diện như nút, biểu đồ, bảng, biểu mẫu, và nhiều thành phần khác đã được thiết kế sẵn để bạn có thể sử dụng.
- Responsive Design: Bootstrap hỗ trợ thiết kế đáp ứng, tức là trang web sẽ tự động điều chỉnh để phù hợp với kích thước màn hình của người dùng, từ máy tính để bàn đến điện thoại di động.
- Một loạt giao diện: Bootstrap đi kèm với nhiều chủ đề và kiểu giao diện khác nhau để bạn có thể tùy chỉnh theo nhu cầu của bạn.
Để sử dụng Bootstrap trong trang web của bạn, bạn cần thêm các file CSS và JavaScript của Bootstrap vào trang HTML của bạn. Sau đó, bạn có thể sử dụng các lớp CSS và lớp CSS Bootstrap đã được định nghĩa để định dạng và bố trí các phần tử trên trang của bạn một cách dễ dàng.
Bạn có thể vào https://getbootstrap.com/docs/4.3/getting-started/introduction/để lấy CSS và code Javascript.
Như vậy sau khi thêm xong file base.html mình sẽ có dạng sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %} {% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h1>My website</h1>
{% block content %} {% endblock %}
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>Bạn có thể vào https://getbootstrap.com/docs/4.3/components/navbar/ để lấy giao diện thanh Navbar.
Hãy copy đoạn code Navbar dưới và chèn vào giữa cặp thẻ <body> ...</body>.
Sau khi thêm xong mình file base.html mình sẽ có dạng.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %} {% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h1>My website</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block content %} {% endblock %}
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>Chạy myapp và mình có kết quả.
Nếu là giao diện mobile.
