Gần đây chúng tôi đã viết phần giới thiệu để phát triển trang web đầu tiên của bạn bằng Flask. Trong phần đầu tiên của loạt bài này, chúng tôi đã cung cấp các hướng dẫn để tạo chương trình Flask đầu tiên của bạn. "Chào thế giới. ” và nhận thông tin đầu vào từ bên ngoài vào trang web của bạn
Trong tương lai, phần thứ hai của loạt bài này sẽ hướng dẫn chúng ta cách sử dụng các mẫu HTML để cải thiện giao diện trang web của bạn
Nó bao gồm
- Sử dụng các mẫu HTML
- Thêm CSS vào trang web Flask đơn giản của chúng tôi
Sử dụng các mẫu HTML
Các mẫu trang web là một trang web được tạo sẵn, bao gồm các trang HTML cũng có thể bao gồm hình ảnh tích hợp, nội dung văn bản và các tệp hỗ trợ cho JavaScript và kiểu phông chữ. Mẫu trang web và mẫu web đều có nghĩa giống nhau
Đối với các mẫu HTML, chúng được tạo bằng HTML [hoặc XHTML] và thường bao gồm mã CSS và JavaScript. Để tạo các trang web HTML khi đang di chuyển, Flask hỗ trợ tạo khuôn mẫu HTML bằng Jinja2
Jinja2 cho phép bạn thêm các vòng lặp và biến bên trong các trang HTML của mình một cách rõ ràng. Nó sử dụng cú pháp mới nhưng nó khá dễ sử dụng khi bạn hiểu nó
Đối với loạt bài này, hãy tạo một mẫu HTML mới trong Flask
Đầu tiên, chúng ta cần tạo một tệp HTML mới, hãy gọi nó là home.html
Một điểm quan trọng cần lưu ý là khung Flask tìm kiếm các tệp HTML trong một thư mục đặc biệt có tên là templates
. Bạn phải tạo thư mục templates
và lưu tất cả các tệp HTML bên trong đó
Dưới đây là mã để giúp bạn bắt đầu
Bước tiếp theo là thực hiện các thay đổi đối với mainPage.py
mà chúng tôi đã tạo trong phần 1 để cho phép chúng tôi xem home.html
đã tạo ở trên. Một cái gì đó giống như nhúng tệp HTML trong mã Python
Đáng chú ý, hai thay đổi mới đã được thực hiện
Dòng 1
Nhập một phương thức có tên là render_template[]
từ khung Flask
Phương pháp render_template[]
tìm kiếm mẫu được đánh dấu [tệp HTML] trong thư mục mẫu. Sau khi tìm thấy mẫu như đã chỉ định, nó sẽ hiển thị mẫu. Bạn có thể tìm hiểu thêm về render_templates[]
dòng 6
Các thay đổi được thực hiện để trả về, hiện trả về render_template[“home.html”]
. Thay đổi này để trả lại sẽ cho phép xem tệp HTML được liên kết
Để thực hiện chương trình, hãy nhanh chóng chạy mã trong dấu nhắc lệnh
python mainPage.py
Và nhập home.html
0 vào trình duyệt cục bộ của bạn để xem các thay đổi
Thêm nhiều trang HTML
Đi xa hơn, chúng ta có thể thêm nhiều trang HTML hơn vào trang web Flask đơn giản của mình
Hãy tạo một trang Giới thiệu về chúng tôi, bắt đầu bằng việc tạo home.html
1. home.html
1 cũng phải được tạo bên trong thư mục templates
Bây giờ chúng ta có thể thêm các dòng mã sau vào tệp
Sau khi tạo home.html
1, hãy cập nhật cho mainPage.py
, như hình bên dưới
Bây giờ bạn đã tạo hai trang HTML, chúng ta có thể liên kết tất cả chúng lại với nhau
Liên kết tất cả các trang thông qua Menu điều hướng
Cũng giống như một trang web thông thường, có các liên kết kết nối các trang khác giúp điều hướng dễ dàng. Để kết nối tất cả các trang, chúng ta có thể tạo menu điều hướng để kết nối chúng. Việc sử dụng Flask giúp quá trình tạo menu điều hướng dễ dàng hơn
Trước tiên, hãy tạo một mẫu có tên là home.html
6, mẫu này sẽ đóng vai trò là mẫu chính. Hai mẫu khác [mẫu con] được tạo sẽ kế thừa mã của chúng từ mẫu này
Sau khi tạo home.html
6, hãy thêm các dòng mã sau
Chức năng home.html
8 được giới thiệu. Nó chấp nhận tên hàm làm đối số. Bạn có thể tìm hiểu thêm về home.html
9
Hai dòng có dấu ngoặc nhọn được thay thế bằng templates
0 và home.html
. Những bổ sung này cho phép các trang con [templates
0 và home.html
] liên kết với trang mẹ [home.html
6]. Nó cũng hạn chế sao chép mã cho menu điều hướng
Hãy tạo templates
0, như sau
Tiếp theo là tạo tập lệnh Python để kết hợp cả hai trang. Trong trường hợp này, chúng tôi tạo templates
6 bằng mã bên dưới
Để thực thi chương trình, hãy nhanh chóng chạy mã templates
6 trong dấu nhắc lệnh và nhập templates
8 vào trình duyệt cục bộ của bạn để xem các thay đổi
Nhấp vào liên kết giới thiệu sẽ đưa bạn đến trang giới thiệu hoặc bạn có thể điều hướng qua bằng cách sử dụng templates
9 trong trình duyệt cục bộ của mình để xem các thay đổi
Thêm CSS vào trang web của chúng tôi
Để thêm một số kiểu vào trang web của chúng tôi, hãy thử thêm một số CSS vào trang web của chúng tôi. Ngoài ra, một điểm quan trọng cần lưu ý là, tương tự như việc tạo thư mục templates
cho tất cả các mẫu HTML, chúng ta cũng cần một thư mục khác có tên là templates
1 cho tất cả các tệp CSS
Thư mục templates
1 nhằm mục đích lưu trữ hầu hết các tệp CSS, JavaScript và hình ảnh, cùng với các tài liệu cần thiết khác
Lý do này khiến việc tạo thư mục templates
3 để lưu trữ tất cả các biểu định kiểu CSS trở nên quan trọng. Vì vậy, bạn phải tạo thư mục templates
3 bên trong thư mục templates
1. Sau khi tạo thư mục, thư mục dự án của bạn sẽ tương tự như những gì chúng tôi có bên dưới
Tiếp theo với việc liên kết tệp HTML của chúng tôi với CSS, chúng tôi thêm một số mã khác vào thư mục CSS bằng cách sử dụng tệp templates
6 và tệp home.html
6 hiện có vì nó liên kết tất cả các trang khác với nhau
Đối với tệp templates
6, vui lòng thêm đoạn mã sau và lưu vào thư mục CSS
Các mã mới được thêm vào trang mẹ cũng sẽ hợp lệ cho tất cả các trang con. Bây giờ, hãy cập nhật trang gốc với những dòng mã mới này
Để thực thi chương trình, hãy nhanh chóng chạy mã templates
6 trong dấu nhắc lệnh và nhập templates
9 vào trình duyệt cục bộ của bạn để xem các thay đổi
Phần kết luận
Việc sử dụng các mẫu HTML và CSS cho mục đích thiết kế và điều hướng trong trang web Flask đơn giản của chúng tôi là một bước đơn giản
Với các máy chủ hiển thị HTML, chuyển các biến chính xác và trả lại HTML cần thiết cho trình duyệt, bạn chắc chắn đang đi đúng hướng để xây dựng một trang web
Khi thực hành nhiều hơn, bạn có thể khám phá các định dạng và kiểu nhập liệu khác có sẵn trong mẫu Jinja. Còn bây giờ, hãy để nó đơn giản và tập trung vào nhiệm vụ tiếp theo trong phần 3. Chúng tôi sẽ đề cập đến các biểu mẫu và theo dõi phiên