Làm cách nào để kết nối bình với html và css?

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.html0 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.html1. home.html1 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.html1, 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.html6, 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.html6, hãy thêm các dòng mã sau

Chức năng home.html8 đượ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.html9

Hai dòng có dấu ngoặc nhọn được thay thế bằng templates0 và home.html. Những bổ sung này cho phép các trang con (templates0 và home.html) liên kết với trang mẹ (home.html6). Nó cũng hạn chế sao chép mã cho menu điều hướng

Hãy tạo templates0, 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 templates6 bằng mã bên dưới

Để thực thi chương trình, hãy nhanh chóng chạy mã templates6 trong dấu nhắc lệnh và nhập templates8 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 templates9 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à templates1 cho tất cả các tệp CSS

Thư mục templates1 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 templates3 để 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 templates3 bên trong thư mục templates1. 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 templates6 và tệp home.html6 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 templates6, 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ã templates6 trong dấu nhắc lệnh và nhập templates9 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

Làm cách nào để sử dụng Flask với HTML CSS?

Làm cách nào để kết nối HTML và Flask?

Làm cách nào để liên kết HTML và CSS trong Python?