Mọi trang web Django phải có biểu mẫu đẹp mắt, đặc biệt khi sử dụng biểu mẫu để tương tác và nhận thông tin đầu vào từ người dùng trang web của bạn.
Có hai cách tiếp cận mà bạn có thể thực hiện để tạo kiểu cho các trang và biểu mẫu trang web Django của mình
- Sử dụng CSS và JavaScript hoặc
- Khung CSS và gói kết xuất biểu mẫu, chẳng hạn như Django Crispy Forms
Tôi có nên sử dụng Bootstrap hoặc CSS trong trang web Django của mình không?
Bạn nên sử dụng khung CSS chẳng hạn như Bootstrap để tạo kiểu trang web Django. Lợi thế đến từ việc phát triển ứng dụng web của bạn nhanh hơn. Hơn nữa, bạn không phải viết quá nhiều CSS.
Tuy nhiên, điều đó không có nghĩa là bạn không nên sử dụng CSS trong trang web Django của mình
Sử dụng CSS khi cần thiết
CSS và Bootstrap là sự kết hợp tuyệt vời để tạo kiểu trang web Django của bạn
Quay lại hướng dẫn
Tạo kiểu cho các thành phần trang web như biểu mẫu có thể là một thách thức vì bạn phải viết các kiểu và quy tắc CSS để làm cho chúng phản hồi nhanh
Việc viết các quy tắc và kiểu dáng CSS và JS của khách hàng có thể mất rất nhiều thời gian
Lựa chọn tốt nhất là sử dụng phương pháp khuyến khích phát triển nhanh, sử dụng khung CSS chẳng hạn như Bootstrap và gói được thiết kế để định dạng biểu mẫu của bạn, chẳng hạn như Django Crispy Forms
Bạn sẽ tiết kiệm được rất nhiều thời gian mà lẽ ra bạn phải sử dụng để viết các quy tắc CSS cho các biểu mẫu của mình
Tiết kiệm nhiều thời gian hơn
Dành nhiều thời gian hơn để phát triển mục tiêu chính của ứng dụng Django giúp giải quyết trường hợp kinh doanh nhanh hơn và đạt được một trang web đầy đủ chức năng
Vì vậy, hãy bắt đầu bằng cách hiểu Django Crispy Forms làm gì
Hình thức giòn Django là gì?
Django Crispy Forms là một gói Python được sử dụng để tạo kiểu cho các biểu mẫu Django trông hấp dẫn và lôi cuốn hơn các biểu mẫu mặc định
Django Crispy Forms dựa trên khung CSS được sử dụng trong dự án Django của bạn để cung cấp hành vi hiển thị cho các biểu mẫu của bạn
Các khung CSS này được Django Crispy Forms hỗ trợ là Bootstrap, Foundation, Tailwind, Bulma và uni-form
Trong hướng dẫn cách thực hiện này, tôi sẽ tập trung vào việc sử dụng các biểu mẫu giòn Django với Bootstrap 4
Tôi sẽ chỉ cho bạn một cách chi tiết làm thế nào để
Cài đặt Django Crispy Forms,
Định cấu hình dự án Django của bạn để sử dụng Bootstrap 4 cho các biểu mẫu giòn và
Sử dụng các thẻ biểu mẫu giòn trong các mẫu Django của bạn
Vì vậy, chúng ta sẽ tích hợp dự án Django của mình với Bootstrap 4, cài đặt Django Crispy Forms và bắt đầu sử dụng các thẻ biểu mẫu giòn
Cách tích hợp Bootstrap 4 với Django
Tích hợp Bootstrap 4 với dự án Django của bạn thật dễ dàng vì tất cả những gì bạn phải làm là thêm các liên kết Bootstrap CDN vào mẫu chính của bạn.
Sử dụng mẫu chính mà tất cả các mẫu Django của bạn kế thừa từ đó là một phương pháp được khuyến nghị, đặc biệt khi bạn muốn đạt được kiểu dáng hoặc định dạng chung
Một ví dụ về kiểu dáng phổ quát là khi bạn muốn có một thanh điều hướng thống nhất hoặc sự kết hợp màu sắc trên mọi trang trên trang web Django của mình
Vì vậy, hãy cài đặt Python, tạo một dự án Django mới và thêm tệp mẫu chính mà chúng ta sẽ đặt tên là
python -m venv ~/.virtualenvs/projectEnv
0Cài đặt Python3
Chạy các lệnh sau để cài đặt Python phiên bản 3 trên hệ thống của bạn
sudo apt update && sudo apt upgrade
sudo apt install python3 python3-pip
Sau khi quá trình hoàn tất, hãy tạo một môi trường ảo mới mà bạn sẽ sử dụng cho dự án Django của mình
Tôi muốn giữ tất cả các môi trường ảo của mình trong một thư mục bên trong thư mục chính
Sao chép lệnh bên dưới và chạy nó trên Terminal của bạn
mkdir ~/.virtualenvs
Lệnh tạo một thư mục mới bên trong thư mục chính của bạn. Đặt cho nó bất kỳ tên nào bạn muốn
Tôi sẽ sử dụng virtualenvs làm tên thư mục
Tôi sử dụng một dấu chấm trước tên thư mục để ẩn thư mục
Do đó, thư mục sẽ không hiển thị từ trình quản lý tệp tiêu chuẩn
Trong thư mục môi trường, tạo một môi trường mới cho dự án Django của bạn
python -m venv ~/.virtualenvs/projectEnv
Sau khi tạo môi trường mới, tạo thư mục mới trên thư mục Desktop hoặc bất cứ đâu
Bạn sẽ sử dụng thư mục để lưu trữ các tệp dự án Django của mình
Điều hướng vào thư mục bằng Terminal, kích hoạt môi trường và cài đặt Django
cd ~/Desktop/django_project_folder
source ~/.virtualenvs/projectEnv/bin/activate
pip install django
Tạo một dự án Django mới
Để tạo một dự án mới, sử dụng lệnh sau
________số 8_______Sau khi tạo một dự án Django mới, hãy tạo một thư mục mẫu bên trong thư mục gốc của dự án - thư mục có quản lý. tập tin py
mkdir templates
Trong thư mục mẫu, tạo một tệp mới và đặt tên là
python -m venv ~/.virtualenvs/projectEnv
0Mẫu cơ sở sẽ chứa các tệp Bootstrap 4 và các cài đặt định dạng và kiểu dáng khác cho toàn bộ dự án
Mở tệp
python -m venv ~/.virtualenvs/projectEnv
0 bằng IDE hoặc trình chỉnh sửa mã yêu thích của bạnTôi đang sử dụng Visual Studio Code
Dán đoạn mã sau có chứa mã soạn sẵn HTML
Portfolio project
Sử dụng cùng một mã soạn sẵn, tải CSS Bootstrap của bạn bằng thẻ liên kết và JS ở dưới cùng.
Đây là cách thực hiện
sudo apt install python3 python3-pip
0Tạo các khối Django mà bạn sẽ sử dụng trên trang web của mình
Tôi thích khối tiêu đề hơn để thay đổi cách mỗi trang web xuất hiện trên thanh địa chỉ và khối nội dung nơi tất cả mã HTML cho mỗi trang web sẽ được
sudo apt install python3 python3-pip
1Sau khi thêm các khối, chúng tôi cần hướng dẫn Django bao gồm thư mục mẫu mới để chúng tôi có thể sử dụng mẫu
python -m venv ~/.virtualenvs/projectEnv
0 trên trang web của mìnhMở tệp cài đặt của dự án bên trong thư mục cấu hình dự án - chúng tôi đặt tên cho nó là danh mục đầu tư.
Trong tệp cài đặt, tìm khối mã giống như thế này
sudo apt install python3 python3-pip
2Thay thế toàn bộ khối mã bằng khối sau
sudo apt install python3 python3-pip
3Dòng,
python -m venv ~/.virtualenvs/projectEnv
4 hướng dẫn Django sử dụng thư mục mẫu mà chúng tôi đã tạoDo đó, chúng tôi có thể sử dụng mã
python -m venv ~/.virtualenvs/projectEnv
0 và Bootstrap trên trang web Django của mình để hiển thị và tạo kiểu cho các trangBất kỳ trang HTML nào có dòng
python -m venv ~/.virtualenvs/projectEnv
6 ở trên cùng sẽ sử dụng Bootstrap và bất kỳ quy tắc tạo kiểu nào khác làm chủ đề cơ sởHơn nữa, chúng ta có thể sử dụng các lớp Bootstrap CSS bên trong khối nội dung
Cách sử dụng Bootstrap 4 trong các mẫu Django của bạn
Bất cứ khi nào bạn muốn sử dụng Bootstrap trên các mẫu Django mới, bạn chỉ cần mở rộng các mẫu từ
python -m venv ~/.virtualenvs/projectEnv
0. Mỗi khi bạn tạo các mẫu HTML mới, hãy bắt đầu với các dòng mã sau
sudo apt install python3 python3-pip
4Bạn có thể sử dụng các lớp Bootstrap trên mã HTML Django của mình và nó sẽ hoạt động với các mẫu Django của bạn
Cách tạo biểu mẫu đẹp với Django Crispy Forms
Bây giờ chúng tôi đã định cấu hình dự án Django của mình để sử dụng Django, chúng tôi cần cài đặt Django Crispy Forms
Đây là cách cài đặt Django Crispy Forms trong dự án Django của bạn
Mở Terminal, kích hoạt môi trường ảo và gõ
sudo apt install python3 python3-pip
5Nhấn Enter
Sau khi cài đặt hoàn tất, hãy mở cài đặt. py và thêm ứng dụng crisp_forms vào INSTALLED_APPS của bạn
sudo apt install python3 python3-pip
6Vì chúng tôi đang sử dụng Bootstrap 4 làm gói mẫu cho dự án Django của mình, hãy cuộn xuống cuối cài đặt của bạn. py và thêm dòng sau
sudo apt install python3 python3-pip
7Django hiện được thiết lập để sử dụng Django Crispy Forms và Bootstrap 4 làm chủ đề chính cho các biểu mẫu Django của bạn
Để trình diễn, hãy tạo một ứng dụng Django đơn giản cho phép người dùng gửi thông tin bằng biểu mẫu liên hệ cho ứng dụng Django của chúng ta
Tạo một ứng dụng liên hệ mới bằng cách mở Terminal và gõ như sau
sudo apt install python3 python3-pip
8Thêm ứng dụng liên hệ vào các ứng dụng đã cài đặt của bạn
sudo apt install python3 python3-pip
9Tạo các biểu mẫu cho ứng dụng liên hệ.
Mở các mô hình. py bên trong thư mục liên hệ và thêm các dòng mã sau
mkdir ~/.virtualenvs
0Ở đây, chúng tôi đang sử dụng các trường tên, email và thông báo làm thuộc tính của bảng Liên hệ.
Django giúp dễ dàng tạo bảng, thuộc tính và mối quan hệ bằng mô hình. lớp người mẫu.
Mô hình sẽ cho phép chúng tôi sử dụng cơ sở dữ liệu để tạo thông tin liên hệ liên tục
Mở Terminal và chạy như sau
mkdir ~/.virtualenvs
1Tìm thêm thông tin về cách các mô hình Django hoạt động trong bài viết này
Thay vì tạo biểu mẫu mới, chúng ta có thể sử dụng biểu mẫu mô hình để hiển thị các thuộc tính mà chúng ta đã xác định trong cơ sở dữ liệu trong biểu mẫu liên hệ của mình
Biểu mẫu mô hình cung cấp giao diện mà bạn có thể sử dụng để tạo biểu mẫu HTML từ mô hình cơ sở dữ liệu hiện có với một vài dòng mã
Hãy xác định một biểu mẫu mô hình cho mô hình Liên hệ của chúng tôi
Trong thư mục liên hệ, tạo một tệp mới và đặt tên cho nó là biểu mẫu. py
mkdir ~/.virtualenvs
2mở biểu mẫu. py và thêm các dòng mã sau
mkdir ~/.virtualenvs
3Phiên bản ContactForm sẽ tạo một biểu mẫu HTML mà chúng tôi sẽ sử dụng để thu thập dữ liệu và lưu nó vào bảng liên hệ của chúng tôi trong cơ sở dữ liệu
Lớp con ModelForm xác định các trường biểu mẫu cụ thể và các tiện ích biểu mẫu HTML tương ứng được sử dụng trên biểu mẫu
Lớp Python Meta xác định kết nối với mô hình nào sẽ kết nối và các trường mà chúng ta muốn trên biểu mẫu của mình
Trong trường hợp này, chúng tôi sử dụng tất cả các trường trong bảng cơ sở dữ liệu
Bây giờ, biểu mẫu đã hoàn tất và chúng tôi cần hiển thị mã biểu mẫu HTML cho mẫu của mình
Thiết lập chế độ xem của ứng dụng liên hệ để hiển thị HTML biểu mẫu đã tạo
Mở tệp
python -m venv ~/.virtualenvs/projectEnv
8 bên trong thư mục liên hệ và thêm các dòng saumkdir ~/.virtualenvs
4Tại đây, chúng tôi đang nhập HTML biểu mẫu đã tạo, thêm nó vào từ điển ngữ cảnh và xác định mẫu mà chế độ xem sẽ sử dụng để hiển thị dữ liệu động ở mặt trước của ứng dụng web của chúng tôi
Tạo một thư mục mới bên trong ứng dụng liên hệ và đặt tên là mẫu
Trong thư mục mẫu, tạo một tệp mới và đặt tên là liên hệ. html
mkdir ~/.virtualenvs
5mở liên hệ. html và thêm đoạn mã sau
mkdir ~/.virtualenvs
6Mở các url chính. py nằm trong thư mục dự án. Thêm dòng sau vào đầu
mkdir ~/.virtualenvs
7Sau đó, bên dưới điểm cuối quản trị viên, hãy thêm dòng mã sau
mkdir ~/.virtualenvs
8Đoạn mã trên nhập chế độ xem biểu mẫu liên hệ mà chúng tôi sẽ hiển thị khi một người truy cập trang /liên hệ trên trang web của chúng tôi
Nếu chúng tôi mở /liên hệ URL, 127. 0. 0. 1. 8000/liên hệ/, bạn có thể thấy thuộc tính tên, email và thông báo được hiển thị trên mẫu HTML của chúng tôi
Tuy nhiên, hình thức của chúng tôi trông không đẹp
Hãy thử tạo kiểu cho nó bằng Django Crispy Forms – làm cho nó giòn
Cách sử dụng các thẻ và bộ lọc biểu mẫu giòn ở dạng Django
Để sử dụng thẻ biểu mẫu giòn, bạn phải thêm {% load crisp_forms_tags %} ở đầu mỗi mẫu Django mà bạn muốn hiển thị biểu mẫu của mình. Để sử dụng bộ lọc giòn, hãy thêm. giòn sau tên biểu mẫu hoặc bộ định dạng của bạn
Dưới đây là cách sử dụng thẻ và bộ lọc biểu mẫu giòn
mở liên hệ. html mẫu bên trong thư mục liên hệ/mẫu và thay thế toàn bộ tệp bằng các dòng mã sau