Flask bao gồm HTML
Mẫu là một thành phần thiết yếu trong phát triển web toàn diện. Với Jinja, bạn có thể xây dựng các mẫu phong phú cung cấp năng lượng cho giao diện người dùng của các ứng dụng web Python của bạn Show
Nhưng bạn không cần sử dụng web framework để trải nghiệm khả năng của Jinja. Khi bạn muốn tạo các tệp văn bản có nội dung có lập trình, Jinja có thể giúp bạn Trong hướng dẫn này, bạn sẽ học cách
Bạn sẽ bắt đầu bằng cách tự mình sử dụng Jinja để bao quát những kiến thức cơ bản về tạo khuôn mẫu Jinja. Sau đó, bạn sẽ xây dựng một dự án web Flask cơ bản với hai trang và một thanh điều hướng để tận dụng hết tiềm năng của Jinja Xuyên suốt hướng dẫn, bạn sẽ xây dựng một ứng dụng mẫu giới thiệu một số tính năng đa dạng của Jinja. Để xem những gì nó sẽ làm, bỏ qua phía trước để Bạn cũng có thể tìm thấy mã nguồn đầy đủ của dự án web bằng cách nhấp vào liên kết bên dưới Mã nguồn. Nhấp vào đây để tải xuống mã nguồn mà bạn sẽ sử dụng để khám phá các khả năng của Jinja Hướng dẫn này dành cho bạn nếu bạn muốn tìm hiểu thêm về ngôn ngữ mẫu Jinja hoặc nếu bạn đang bắt đầu với Flask Bắt đầu với JinjaJinja không chỉ là một thành phố ở Khu vực phía Đông của Uganda và là một ngôi đền Nhật Bản, mà còn là một công cụ tạo mẫu. Bạn thường sử dụng các công cụ mẫu cho các mẫu web nhận nội dung động từ giao diện người dùng và hiển thị nội dung đó dưới dạng trang tĩnh ở giao diện người dùng Nhưng bạn có thể sử dụng Jinja mà không cần khung web chạy ngầm. Đó chính xác là những gì bạn sẽ làm trong phần này. Cụ thể, bạn sẽ cài đặt Jinja và xây dựng các mẫu đầu tiên của mình Loại bỏ các quảng cáoCài đặt JinjaTrước khi khám phá bất kỳ gói mới nào, bạn nên tạo và kích hoạt một môi trường ảo. Bằng cách đó, bạn đang cài đặt bất kỳ phụ thuộc dự án nào trong môi trường ảo của dự án thay vì trên toàn hệ thống Chọn hệ điều hành của bạn bên dưới và sử dụng lệnh dành riêng cho nền tảng của bạn để thiết lập môi trường ảo
Với các lệnh trên, bạn tạo và kích hoạt một môi trường ảo có tên 8 bằng cách sử dụng mô-đun 8 tích hợp sẵn của Python. Dấu ngoặc đơn ( 0) xung quanh 8 phía trước lời nhắc cho biết bạn đã kích hoạt thành công môi trường ảoSau khi bạn đã tạo và kích hoạt môi trường ảo của mình, đã đến lúc cài đặt Jinja với 2________số 8_______ Đừng quên 3 ở cuối tên gói. Nếu không, bạn sẽ cài đặt phiên bản cũ không tương thích với Python 3Điều đáng chú ý là mặc dù phiên bản chính hiện tại thực sự lớn hơn 3, gói mà bạn sẽ cài đặt vẫn được gọi là 5. Bạn có thể xác minh rằng bạn đã cài đặt phiên bản Jinja hiện đại bằng cách chạy 6
Để làm cho mọi thứ trở nên khó hiểu hơn, sau khi cài đặt Jinja với chữ hoa 7, bạn phải nhập nó với chữ thường 8 bằng Python. Hãy dùng thử bằng cách mở trình thông dịch Python tương tác và chạy các lệnh sau>>>
Khi bạn cố gắng nhập 5, với cách đặt tên viết hoa mà bạn đã sử dụng để cài đặt Jinja, thì bạn tăng một số 0. Để nhập gói Jinja vào Python, bạn phải nhập 1 với chữ thường 8Kết xuất mẫu Jinja đầu tiên của bạnVới Jinja được nhập, bạn có thể tiếp tục tải và hiển thị mẫu đầu tiên của mình >>>
Thành phần cốt lõi của Jinja là lớp 3. Trong ví dụ này, bạn tạo một môi trường Jinja không có bất kỳ đối số nào. Sau đó, bạn sẽ thay đổi các tham số của 4 để tùy chỉnh môi trường của mình. Tại đây, bạn đang tạo một môi trường đơn giản nơi bạn tải chuỗi 5 làm mẫuNhững gì bạn vừa làm có vẻ không ấn tượng hơn nhiều so với việc sử dụng một chuỗi được định dạng bằng Python thuần túy. Tuy nhiên, ví dụ này cho thấy hai bước quan trọng mà bạn thường thực hiện khi sử dụng Jinja
Mẫu nguồn mà bạn đang tải có thể là một chuỗi ký tự. Nhưng mọi thứ trở nên thú vị hơn khi bạn làm việc với tệp và cung cấp tệp văn bản dưới dạng mẫu Loại bỏ các quảng cáoSử dụng tệp bên ngoài làm mẫuNếu bạn muốn làm theo các ví dụ trong hướng dẫn này, thì bạn có thể tiếp tục và tạo một thư mục mới để làm việc trong đó. Bên trong thư mục làm việc của bạn, tạo một thư mục có tên 8Bạn sẽ lưu trữ bất kỳ mẫu sắp tới nào trong thư mục 8. Bây giờ hãy tạo một tệp văn bản có tên 0
Hãy tưởng tượng rằng bạn là một giáo viên muốn gửi kết quả cho những học sinh có thành tích tốt. Mẫu 0 chứa bản thiết kế cho tin nhắn mà bạn có thể sao chép và dán để gửi sau. Giống như trong ví dụ về 7, bạn tìm thấy dấu ngoặc nhọn ( 6) trong văn bản mẫu của mìnhTiếp theo, tạo một tệp Python có tên 4
Khi bạn tạo môi trường Jinja với 5, bạn có thể chuyển đường dẫn trỏ đến thư mục mẫu của bạn. Thay vì chuyển vào một chuỗi, bây giờ bạn tải 0 làm mẫu của mình. Sau khi mẫu của bạn được tải, bạn có thể sử dụng lại nhiều lần để điền vào nội dung. Trong 4, bạn kết xuất 8 và 9 cho từng học sinh giỏi nhất của mình vào một tệp văn bảnLưu ý rằng các khóa của từ điển 0, cùng với 1 và 2, khớp với các biến mẫu trong 0. Nếu bạn không cung cấp ngữ cảnh cho các biến trong mẫu, chúng sẽ không báo lỗi. Nhưng chúng hiển thị một chuỗi trống, điều này thường không được mong muốnKhi bạn gọi 4, bạn trả lại mẫu được hiển thị dưới dạng chuỗi. Như với bất kỳ chuỗi nào khác, bạn có thể sử dụng 5 để ghi nó vào một tệp. Để xem 4 đang hoạt động, hãy chạy tập lệnh
Bạn vừa tạo một tệp cho từng học sinh của mình. Ví dụ, hãy xem 7
Các biến của mẫu 0 của bạn đã nhận thành công dữ liệu của học sinh. Thật là một cách tuyệt vời để Python và Jinja làm việc cho bạn. Giờ đây, bạn có thể sao chép và dán văn bản, gửi cho học viên của mình và tiết kiệm cho mình một số công việcKiểm soát dòng chảy trong JinjaCho đến giờ, bạn đã thêm các biến giữ chỗ vào văn bản mẫu và hiển thị các giá trị vào đó. Trong phần này, bạn sẽ học cách thêm các câu lệnh 9 và vòng lặp 7 vào một mẫu để hiển thị nội dung theo điều kiện mà không lặp lại chính mìnhSử dụng câu lệnh ifTrong ví dụ ở phần trước, bạn đã lập trình tạo các thông báo tùy chỉnh cho các học sinh giỏi nhất của mình. Bây giờ là lúc để xem xét tất cả các sinh viên của bạn. Thêm hai học sinh có điểm thấp hơn vào 0 trong 4 0Bạn thêm điểm của Fritz và Sirius vào danh sách 0. Không giống như các sinh viên khác, cả hai đều đạt dưới 80 điểm. Sử dụng dấu 4 để tạo câu điều kiện trong 0 1Ngoài các biến mà bạn đã sử dụng trước đây, giờ đây bạn cũng đang sử dụng câu lệnh điều kiện với khối Jinja. Thay vì sử dụng một cặp dấu ngoặc nhọn kép, bạn tạo các khối Jinja bằng một dấu ngoặc nhọn và một dấu phần trăm ( 6) ở mỗi đầuTrong khi bạn có thể coi các biến thông thường là các chuỗi con, các khối Jinja bao bọc một phần lớn hơn trong mẫu của bạn. Đó là lý do tại sao bạn cũng cần nói cho Jinja biết khối của bạn kết thúc ở đâu. Để đóng một khối, bạn sử dụng lại chính các từ khóa đó, với tiền tố 7Trong ví dụ trên, bạn đang bắt đầu một khối 8 ở dòng 5, khối này bạn đóng ở dòng 9 với 9. Bản thân câu lệnh 9 hoạt động giống như câu lệnh điều kiện trong Python. Ở dòng 5, bạn đang kiểm tra xem 9 có cao hơn 4 không. Nếu vậy, thì bạn đang hiển thị một thông điệp vui vẻ. Nếu không, bạn hiển thị thông báo xin lỗi ở dòng 8Trong ví dụ trên, các sinh viên đồng ý rằng họ muốn lấy 80 điểm làm điểm chuẩn cho hiệu suất thử thách Python của họ. Vui lòng thay đổi 4 thành bất kỳ điểm nào khiến bạn và học sinh của bạn cảm thấy thoải mái hơnLoại bỏ các quảng cáoĐòn bẩy cho vòng lặpBạn cũng có thể kiểm soát luồng mẫu của mình bằng 7 vòng lặp. Ví dụ: bạn quyết định tạo một trang HTML cho sinh viên của mình để hiển thị tất cả các kết quả. Lưu ý rằng tất cả học sinh đã đồng ý công khai kết quả của mình trong cuộc thi thân thiện nàyTạo một tệp mới có tên 5 trong thư mục 8 của bạn 2Tại đây, bạn đang tạo một trang HTML lặp qua từ điển 0 của bạn và hiển thị hiệu suất của chúng. Cũng giống như với các khối 8, bạn phải đảm bảo rằng bạn đóng khối 9 của mình bằng 00Bạn có thể kết hợp các câu lệnh 9 và vòng lặp 7 để kiểm soát luồng mẫu của mình hơn nữa 3Tùy thuộc vào điểm số của học sinh, bạn hiển thị biểu tượng cảm xúc mặt cười hoặc mặt buồn. Note that you can put the block expressions on a single line, too Go on and update 4 4In addition to the 7 loop where you saved a message for each student, you’re now also writing a single HTML file containing all the results for that student. This time you’re creating a 05 dictionary that holds all the variables that you pass into the templateNote. Using 05 as a name for the collection that stores the variables for a template is a convention. That said, you can name the dictionary differently if you preferVới một từ điển chứa tất cả ngữ cảnh của mẫu của bạn, bạn có thể gọi 07 với 05 làm đối số duy nhất. When you run 4, you also create an HTML file>>> 5You can view the rendered HTML file in your code editor. However, since you’re working with HTML now, you can also have a look at the file in your browser Like in Python scripts, you can control the flow of Jinja templates with the 9 statement and 7 loops. In Jinja, you’re using blocks to wrap content. When you’re using a 7 block, then the content within that block gets rendered in each step of the loopWith templates, you can create building blocks for larger websites without duplicating your front-end code. That’s why web frameworks like Flask leverage the power of Jinja templates. In the next section, you’ll learn how to use Flask to render data from the back end into the web pages of the front end Use Jinja With FlaskChances are that you first heard of Jinja when you used a web framework like Flask. Both Jinja and Flask are maintained by Pallets Project, a community-driven organization that takes care of Python libraries that power the Flask web framework In this section, you’ll continue the examples from before by creating a basic web application for your students Loại bỏ các quảng cáocài đặt bìnhYou can continue working in the same directory and virtual environment that you created in the previous section. Khi bạn đang ở trong môi trường ảo đang hoạt động của mình, hãy tiếp tục và cài đặt Flask 6With Flask installed, continue to create your first route to verify that Flask works as expected. Create a file named 13 in your project’s root directory 7When you put an 14 decorator on top of a Flask view function, you register it with the given URL . Here, you’re establishing the route 15, which returns 7To see your home page in the browser, start your Flask development web server 8Now your Flask app is running in 17 mode. In 17 mode, you’ll get more meaningful error messages if something goes wrong. Also, your server will restart automatically whenever you change something in your codebaseTo see your home page, visit 19Awesome, you now have a running Flask app. In the next section, you’ll implement Jinja templates in your Flask app Add a Base TemplateSo far, your Flask app returns a string. You could enhance your string by adding HTML code, and Flask would render it for you. But as you learned in the previous section, using templates makes rendering content much more convenient for you Create a new template named 20 in your 8 directory 9In 20, you have two occurrences where you use template variables. once in line 7 and then again in line 11. Để hiển thị và phục vụ 20, hãy tải nó làm trang chủ của bạn trong 13 0By default, Flask expects your templates in a 8 directory. Therefore, you don’t need to set the template directory explicitly. When you provide 20 to 27, Flask knows where to look for your templateNote. Usually, you’d improve your website’s look with CSS and add some functionality with JavaScript. Bởi vì bạn đang tập trung vào cấu trúc nội dung trong hướng dẫn này, nên bạn sẽ giữ cho ứng dụng web của mình hầu như không được tạo kiểu Restart your Flask development server if it hasn’t updated automatically already. Then visit 19 and verify that Flask serves and renders your base templateFlask rendered the 29 variable in your website’s title and in the welcome message. Next, you’ll create a page to show your students’ resultsLoại bỏ các quảng cáoAdd Another PageIn one of the , you used 5 as a template to generate a file named 31. Bây giờ bạn đã có một ứng dụng web, bạn có thể sử dụng 5 để hiển thị mẫu của mình một cách linh hoạt mà không cần lưu nó vào một tệp mới vào lúc nàyĐảm bảo rằng 5 được đặt trong 8 và trông như thế này 1Các điều chỉnh duy nhất cho phiên bản cũ hơn được đánh dấu ở trên
Để truy cập trang kết quả trong ứng dụng web của bạn, bạn phải tạo một lộ trình. Thêm đoạn mã sau vào 13 2Trong một ứng dụng web chính thức, bạn có thể lưu trữ dữ liệu trong cơ sở dữ liệu bên ngoài. Hiện tại, bạn giữ 1, 2 và 0 bên cạnh 39Flask's 27 chỉ chấp nhận một , đó là tên mẫu. Bất kỳ đối số nào khác phải là đối số từ khóa. Vì vậy, bạn phải có hai dấu hoa thị ( 41) ở phía trước của 05. Với các toán tử dấu hoa thị, bạn đang chuyển các mục của 05 dưới dạng đối số từ khóa vào 27Khi bạn truy cập 45 trong trình duyệt của mình, Flask sẽ phục vụ 5 với ngữ cảnh được hiển thị. Hop over to the browser and take a look at itBây giờ bạn có một trang chủ và một trang hiển thị kết quả của học sinh. That’s a great start for a web app Trong phần tiếp theo, bạn sẽ học cách tận dụng sức mạnh của các mẫu nhiều hơn nữa bằng cách lồng chúng vào nhau. You’ll also add a navigation menu to your project so that users can conveniently jump from page to page Nest Your TemplatesKhi ứng dụng của bạn phát triển và bạn tiếp tục thêm các mẫu mới, bạn phải đồng bộ hóa mã chung. Cho đến nay, hai mẫu của bạn, 20 và 5, trông rất giống nhau. When multiple templates contain the same code, you need to adjust every template if you change any of the common codeTrong phần này, bạn sẽ triển khai cấu trúc mẫu cha và con giúp mã của bạn dễ bảo trì hơn Điều chỉnh mẫu cơ sở của bạnKhi bạn sử dụng kế thừa mẫu của Jinja, bạn có thể di chuyển cấu trúc chung của ứng dụng web của mình sang mẫu cơ sở gốc và để các mẫu con kế thừa mã đó 20 của bạn gần như đã sẵn sàng để dùng làm mẫu cơ sở của bạn. Để làm cho mẫu cơ sở của bạn có thể mở rộng, hãy thêm một số thẻ 50 vào cấu trúc 3You use the 50 tag to define which parts of your base template may be overridden by child templates. Cũng giống như với 8 và 9, bạn phải đóng các khối của mình bằng 54Lưu ý rằng bạn cũng đặt tên cho các khối của mình. Với đối số 29, bạn cho phép một mẫu con thay thế mã giữa 56 và 57 bằng khối 29 của chính nó. Bạn có thể thay mã của 59 bằng khối 60Ghi chú. Tên của các khối nội dung của bạn phải là duy nhất bên trong mỗi mẫu. Nếu không, Jinja sẽ bối rối không biết chọn khối nào để thay thế Nội dung mà bạn có ở giữa các thẻ 50 trong 20 là một trình giữ chỗ. Nội dung dự phòng hiển thị bất cứ khi nào một mẫu con không chứa các thẻ 50 tương ứngYou can also decide not to add fallback content in between 50 tags. Đối với các biến trong mẫu, Jinja sẽ không phàn nàn nếu bạn không cung cấp nội dung cho chúng. Instead, Jinja will render an empty stringTrong 20, bạn cung cấp nội dung dự phòng cho các khối mẫu của mình. Therefore, you don’t need to change anything in your 66 view. Nó sẽ hoạt động giống như trước đâyTrong phần tiếp theo, bạn sẽ chuẩn bị mẫu con của mình để làm việc với 20Loại bỏ các quảng cáoMở rộng mẫu conBạn hiện có một mẫu 5 hoạt động độc lập, không có mẫu gốc. That means that you can now adjust the code of 5 to connect it with 20 4Để kết nối mẫu con với mẫu gốc, bạn phải thêm thẻ 71 ở đầu tệpChild templates also contain 50 tags. Bằng cách cung cấp tên của khối làm đối số, bạn đang kết nối các khối từ mẫu con với các khối từ mẫu gốcLưu ý rằng 5 không chứa khối 29. Nhưng trang của bạn sẽ vẫn hiển thị đúng tiêu đề, bởi vì nó sử dụng nội dung dự phòng trong 20 và chế độ xem cung cấp biến 29Bạn không cần điều chỉnh chế độ xem 39 của mình. When you visit 45, you should notice no changes. The rendered page contains the root code of 20 and the fill-ins from the block of 5Keep in mind that any content outside the child template’s blocks won’t appear on your rendered page. Ví dụ: nếu bạn muốn thêm điều hướng vào 5 liên kết trở lại trang chủ của mình, thì bạn phải xác định khối giữ chỗ mới trong 20 hoặc thêm menu điều hướng vào cấu trúc của 20Bao gồm một Menu điều hướngThe navigation of a website is usually displayed on every page. Với cấu trúc mẫu cơ sở và mẫu con của bạn, tốt nhất bạn nên thêm mã cho menu điều hướng vào 20Instead of adding the navigation menu code directly into 20, you can leverage the 86 tag. Bằng cách tham chiếu một mẫu khác với 86, bạn đang tải toàn bộ mẫu vào vị trí đóCác mẫu được bao gồm là các phần có chứa một phần mã HTML đầy đủ. To indicate that a template is meant to be included, you can prefix its name with an underscore ( 88)Follow the prefix-based naming scheme and create a new template named 89 in your 8 folder 5Note that 89 contains neither an 71 tag nor any 50 tags. You can focus solely on how you want to render your navigation menuWhen you use 94, Flask creates the full URL to the given view for you. So even when you decide to change the route to one of your pages, the navigation menu will still workInclude 89 in 20 to display your navigation menu on all of your pages 6Instead of adding the navigation menu code directly into 20, you include 89 into your website’s header. Vì 5 kéo dài 20, bạn có thể truy cập vào 45 để xem menu điều hướng mới của mìnhTrang kết quả của bạn kế thừa mã từ mẫu cơ sở của bạn. When you click a link in the navigation menu, the URL in your address bar changes based on your current page Loại bỏ các quảng cáoÁp dụng các bộ lọcHãy dành một chút thời gian và nghĩ về một tình huống trong đó một người khác đảm nhận phần cuối và trách nhiệm của bạn là phần đầu của trang web. Để tránh can thiệp lẫn nhau, bạn không được phép điều chỉnh bất kỳ chế độ xem nào trong 13 hoặc thay đổi dữ liệu có trong mẫu của bạnSau cuộc trò chuyện với sinh viên của bạn, bạn đồng ý rằng ứng dụng web của bạn có thể được cải thiện. Bạn nghĩ ra hai tính năng
Bạn sẽ sử dụng chức năng lọc của Jinja để triển khai cả hai tính năng mà không cần chạm vào phần cuối Điều chỉnh các mục menu của bạnJinja cung cấp một loạt. Nếu bạn kiểm tra chúng, thì bạn sẽ nhận thấy rằng chúng trông giống với các hàm dựng sẵn của Python và Trước khi bạn tiếp tục, hãy xem lại phần 89 của bạn 5Hiện tại, các mục menu của bạn được hiển thị bằng chữ thường để khớp với tên của chế độ xem. Nếu 05 không phải là chữ thường thì liên kết sẽ không hoạt động. Điều đó có nghĩa là 05 trong thuộc tính 07 phải giữ nguyênTuy nhiên, bạn có thể điều chỉnh hiển thị của 05 bên trong các thẻ 09 8Bạn chỉ định biến và sau đó là ký hiệu ống dẫn (_______8_______10), tiếp theo là bộ lọc. Trong một số trường hợp, bạn có thể chỉ định đối số trong ngoặc đơn Trong menu điều hướng của bạn, bạn bàn giao biến 05 cho bộ lọc 12. Giống như phương thức chuỗi 13 của Python, bộ lọc 12 của Jinja trả về biến bằng chữ in hoaTruy cập 19 để xem các thay đổi của bạn trực tiếpHoàn hảo, các mục menu hiện được viết hoa. Bạn đã triển khai tính năng đầu tiên trong danh sách yêu cầu của mình. Đã đến lúc giải quyết yêu cầu tính năng tiếp theo Sắp xếp danh sách kết quả của bạnHiện tại, kết quả của học sinh xuất hiện theo thứ tự như bạn đã định nghĩa chúng trong từ điển ở 13. Bạn sẽ sử dụng bộ lọc 17 của Jinja để sắp xếp danh sách kết quả theo thứ tự bảng chữ cái của học sinhMở 5 và thêm bộ lọc 17 vào vòng lặp 7 của bạn 9Bộ lọc 17 sử dụng 22 của Python dưới mui xeCủa bạn 0 iterable trong 5 chứa một từ điển cho mỗi mục. Bằng cách thêm 25, bạn yêu cầu Jinja sắp xếp 0 dựa trên các giá trị của 8. Bạn có thể sử dụng bộ lọc 17 mà không cần bất kỳ đối số nào khi muốn sắp xếp danh sách các chuỗiChuyển đến 45 và xem cách sắp xếp mớiBạn đã sử dụng bộ lọc 17 của Jinja để sắp xếp kết quả của học sinh theo tên của họ. Nếu bạn có những học sinh trùng tên, thì bạn có thể xâu chuỗi các bộ lọc 0Đầu tiên, bạn sắp xếp sinh viên của bạn theo tên. Nếu có hai sinh viên trùng tên, thì bạn sắp xếp họ theo điểm số của họ. Tất nhiên, những sinh viên có cùng tên thực sự cần một số khác biệt ngoài điểm số của họ, nhưng với mục đích của ví dụ này, việc sắp xếp này là đủ Bạn đảo ngược thứ tự của 9 để sắp xếp những học sinh này từ điểm cao nhất xuống thấp nhất. Khi dòng của bạn quá dài, Jinja cho phép bạn phân phối câu lệnh của mình trên nhiều dòngGhi chú. Ngược lại với việc sử dụng Booleans trong Python, bạn nên viết Booleans trong Jinja bằng chữ thường Bạn sử dụng các bộ lọc để chuyển đổi dữ liệu trong các mẫu của mình một cách độc lập với phần cuối của bạn. Khi áp dụng bộ lọc cho một biến, bạn có thể thay đổi giá trị của biến cho người dùng mà không thay đổi bất kỳ cấu trúc dữ liệu cơ bản nào Kiểm tra để tìm hiểu thêm về các bộ lọc mẫu Nếu bạn muốn đưa nhiều logic hơn nữa vào các mẫu của mình, thì bạn có thể tận dụng các macro. Trong phần tiếp theo, bạn sẽ khám phá các macro bằng cách triển khai thêm ba tính năng trong ứng dụng Flask của mình Loại bỏ các quảng cáoBao gồm MacroKhi bạn bao gồm một phần mẫu như menu điều hướng, mã được bao gồm sẽ được hiển thị trong ngữ cảnh của mẫu gốc mà không cần bất kỳ điều chỉnh nào. Rất thường xuyên, đó chính xác là những gì bạn muốn, nhưng những lúc khác, bạn có thể muốn tùy chỉnh giao diện của các mẫu đi kèm của mình Các macro của Jinja có thể giúp bạn tạo các phần mẫu chấp nhận các đối số. Giống như khi xác định hàm của riêng bạn trong Python, bạn có thể xác định macro và nhập chúng vào mẫu của mình Trong phần này, bạn sẽ thêm ba tính năng nữa vào dự án Flask của mình
Giống như trước đây, bạn sẽ không chạm vào bất kỳ mã back-end nào để cải thiện ứng dụng web của mình Triển khai Chế độ tốiĐối với một số học sinh, cách phối màu sáng tối sẽ hấp dẫn hơn về mặt thị giác. Để phục vụ cho tất cả học viên của mình, bạn sẽ thêm tùy chọn chuyển sang chế độ tối với văn bản màu sáng trên nền tối Thêm tệp 32 vào thư mục 8 1Bạn xác định một macro với khối 34 giống với định nghĩa hàm trong Python. Macro của bạn phải có tên và nó có thể chấp nhận đối sốĐối với macro 35, bạn phải cung cấp tên phần tử HTML. Đây sẽ là thành phần mà CSS từ dòng 6 đến dòng 14 chuyển từ nhạt sang đậmĐể tránh phục vụ một trang web có chủ đề tối theo mặc định, bạn muốn cung cấp cho sinh viên của mình tùy chọn để chuyển đổi thiết kế. Khi họ thêm 36 vào bất kỳ tuyến đường nào trong ứng dụng của bạn, bạn sẽ kích hoạt chế độ tốiỞ dòng 4, bạn đang sử dụng đối tượng 37 của Flask để đọc các tham số của yêu cầu. Theo mặc định, đối tượng 37 có trong ngữ cảnh mẫu của bạnNếu tham số chế độ tối tồn tại trong yêu cầu GET, thì bạn hiển thị liên kết có tùy chọn chuyển sang chế độ sáng trong dòng 5 và thêm thẻ 39 vào mẫu. Không có bất kỳ tham số chế độ tối nào, bạn hiển thị một liên kết chuyển sang chủ đề tốiĐể sử dụng macro của bạn, bạn phải nhập chúng vào mẫu cơ sở của mình. Cũng giống như câu lệnh 40 của Python, bạn nên đặt khối 41 ở đầu mẫu của mình 2Tùy thuộc vào tham số GET của yêu cầu, bạn hiển thị chế độ tối và hiển thị liên kết để chuyển sang chủ đề màu khác Bằng cách cung cấp 42 làm đối số cho 43, học sinh của bạn có thể chuyển bảng màu của toàn bộ trang. Truy cập vào 19 và khám phá cách chuyển đổi bảng màu của bạnBạn có thể thử cung cấp 45 thay vì 46 cho 43 rồi tải lại trang. Bởi vì macro chấp nhận các đối số, nên chúng mang lại cho bạn sự linh hoạt để hiển thị có điều kiện các phần của mẫu của bạnLoại bỏ các quảng cáoLàm nổi bật học sinh giỏi nhất của bạnMột lý do khác để giới thiệu macro cho dự án Flask của bạn là đặt một số logic vào ngăn riêng của nó. Giống như các mẫu lồng nhau, chức năng gia công phần mềm cho macro có thể dọn dẹp mẫu gốc của bạn Để làm nổi bật học sinh giỏi nhất của bạn bằng biểu tượng cảm xúc ngôi sao, hãy dọn dẹp 5 và tham chiếu macro 49 3Lưu ý rằng bạn không nhập 32 ở đầu 5. Bạn đang mở rộng 20, nơi bạn đã nhập tất cả các macro. Vì vậy, không cần phải nhập lại chúng ở đâyThay vì thêm nhiều mã hơn vào một mục danh sách trong 5, bạn đang tham khảo 54 bên trong vòng lặp 7 của mình. Bạn tận dụng cơ hội để xóa điều kiện 9 … 57 hiển thị biểu tượng cảm xúc khuôn mặt vui hoặc buồn. Mã này sẽ hoàn toàn phù hợp với mục đích thêm huy hiệu cho tất cả học sinh của macroMacro 49 sẽ mong đợi hai đối số
Nếu bạn đã truy cập trang của mình bây giờ, bạn sẽ gặp lỗi vì Flask không thể tìm thấy macro mà bạn đang tham chiếu. Tiếp tục và thêm macro mới của bạn vào 32 4Jinja cho phép bạn xác định các biến của riêng mình bên trong một mẫu với khối 62. Khi bạn xác định biến, bạn cũng có thể thêm bộ lọc vào giá trị của chúng và thậm chí xâu chuỗi chúngTrong 63, bạn đang xác định 64 bằng cách trước tiên tạo danh sách tất cả các điểm bằng bộ lọc 65 và sau đó chọn điểm cao nhất với 66. Cả hai bộ lọc đều hoạt động tương tự như hàm 65 hoặc 66 của PythonKhi bạn biết điểm cao nhất trong số các học sinh của mình, sau đó bạn kiểm tra điểm của học sinh hiện tại của bạn so với điểm đó từ dòng 8 đến 14 Truy cập 45 và xem hoạt động của macro mới của bạnNgoài biểu tượng cảm xúc mặt cười hoặc buồn mà bạn đã hiển thị trước đây, giờ đây, bạn hiển thị biểu tượng cảm xúc ngôi sao cho học sinh có thành tích tốt nhất của mình Đánh dấu trang hiện tạiTính năng cuối cùng mà bạn triển khai sẽ cải thiện menu điều hướng của bạn. Hiện tại, menu điều hướng vẫn giữ nguyên trên cả hai trang. Trong phần này, bạn sẽ tạo một macro đánh dấu mục menu của trang hiện tại bằng một mũi tên Thêm một macro khác vào 32 5Macro 71 của bạn lấy mục menu làm đối số. Nếu 05 khớp với điểm cuối hiện tại, thì macro của bạn sẽ hiển thị một mũi tên ngoài liên kết mục menuNgoài ra, bạn kiểm tra chế độ màu. Nếu 73 là một phần của yêu cầu GET, thì 74 sẽ được thêm vào liên kết menu. Nếu không kiểm tra và thêm chế độ, bạn sẽ chuyển sang chủ đề sáng mỗi khi nhấp vào liên kết, vì 74 sẽ không phải là một phần của liên kếtThay thế liên kết mục menu trong 89 bằng macro mới của bạn 6Bằng cách thêm macro 71 vào menu điều hướng của bạn, bạn giữ cho mẫu điều hướng của mình sạch sẽ. Bạn đưa ra bất kỳ logic có điều kiện nào cho 71Truy cập 19 và xem tất cả các tính năng mà bạn đã triển khaiMacro là một tính năng mạnh mẽ của Jinja. Tuy nhiên, bạn không nên lạm dụng chúng. Trong một số trường hợp, có thể tốt hơn nếu đưa logic vào phần cuối thay vì để các mẫu của bạn thực hiện công việc Sẽ luôn có những trường hợp khó khăn mà bạn phải quyết định xem bạn có thêm mã trực tiếp vào mẫu của mình hay không, chuyển nó sang một mẫu được bao gồm hay tạo macro thay thế. Nếu mã mẫu của bạn vật lộn quá nhiều với cấu trúc dữ liệu, thì đó thậm chí có thể là dấu hiệu cho thấy logic mã của bạn thuộc về mặt sau của ứng dụng Loại bỏ các quảng cáoPhần kết luậnJinja là một công cụ tạo khuôn mẫu giàu tính năng được đóng gói với khung web Flask. Nhưng bạn cũng có thể sử dụng Jinja độc lập với Flask để tạo các mẫu mà bạn có thể điền nội dung theo chương trình Trong hướng dẫn này, bạn đã học cách
Nếu bạn muốn áp dụng kiến thức mới thu được của mình về Jinja, thì bạn có thể xây dựng giao diện người dùng cho công cụ rút ngắn URL FastAPI hoặc triển khai ứng dụng Flask của bạn cho Heroku Bạn cũng có thể cân nhắc sử dụng. Để tìm hiểu thêm về sự khác biệt giữa công cụ tạo khuôn mẫu của Jinja và Django, hãy truy cập tài liệu của Jinja về việc chuyển đổi từ các công cụ tạo khuôn mẫu khác sang Jinja Bạn có các trường hợp sử dụng khác mà bạn tận dụng các khả năng mà Jinja cung cấp không? Đánh dấu là đã hoàn thành 🐍 Thủ thuật Python 💌 Nhận một Thủ thuật Python ngắn và hấp dẫn được gửi đến hộp thư đến của bạn vài ngày một lần. Không có thư rác bao giờ. Hủy đăng ký bất cứ lúc nào. Được quản lý bởi nhóm Real Python Gửi cho tôi thủ thuật Python » Giới thiệu về Philipp Accany Philipp là một kỹ sư phần mềm có trụ sở tại Berlin với nền tảng thiết kế đồ họa và niềm đam mê phát triển web toàn diện » Thông tin thêm về PhilippMỗi hướng dẫn tại Real Python được tạo bởi một nhóm các nhà phát triển để nó đáp ứng các tiêu chuẩn chất lượng cao của chúng tôi. Các thành viên trong nhóm đã làm việc trong hướng dẫn này là Aldren Geir Arne Joanna kate Michael Bậc thầy Kỹ năng Python trong thế giới thực Với quyền truy cập không giới hạn vào Python thực Tham gia với chúng tôi và có quyền truy cập vào hàng nghìn hướng dẫn, khóa học video thực hành và cộng đồng các Pythonista chuyên gia Nâng cao kỹ năng Python của bạn » Chuyên gia Kỹ năng Python trong thế giới thực Tham gia với chúng tôi và có quyền truy cập vào hàng ngàn hướng dẫn, khóa học video thực hành và cộng đồng Pythonistas chuyên gia Nâng cao kỹ năng Python của bạn » Bạn nghĩ sao? Đánh giá bài viết này Tweet Chia sẻ Chia sẻ EmailBài học số 1 hoặc điều yêu thích mà bạn đã học được là gì? Mẹo bình luận. Những nhận xét hữu ích nhất là những nhận xét được viết với mục đích học hỏi hoặc giúp đỡ các sinh viên khác. và nhận câu trả lời cho các câu hỏi phổ biến trong cổng thông tin hỗ trợ của chúng tôi Làm cách nào để đưa HTML vào Flask?Kết xuất tệp HTML trong Flask . Đầu tiên, tạo một thư mục mới trong thư mục dự án có tên là mẫu. Tạo một tệp mới trong thư mục mẫu có tên là “home. html”. Trình phát video đang tải. Phát video. . Bây giờ hãy mở ứng dụng. py và thêm đoạn mã sau. từ Flask nhập bình, render_template. ứng dụng = Flask(__name__) @app. tuyến đường('/') Flask có hỗ trợ HTML không?Khung bình đã được viết theo cách để nó tìm các tệp mẫu HTML trong một thư mục có tên là mẫu . Vì vậy, bạn nên tạo một thư mục trống như vậy và sau đó đặt tất cả các mẫu HTML vào đó.
Làm cách nào để lấy các giá trị từ biểu mẫu HTML trong Python Flask?Dữ liệu liên kết với biểu mẫu HTML được mang trong yêu cầu HTTP. Để truy cập dữ liệu yêu cầu biểu mẫu trong Flask, chúng tôi có thể nhập yêu cầu và sử dụng yêu cầu. đối số . Mã ở trên sử dụng yêu cầu để tìm nạp dữ liệu có trong
Những gì được bao gồm trong Flask?Flask là một web framework, nó là một mô-đun Python cho phép bạn phát triển các ứng dụng web một cách dễ dàng. Nó có một lõi nhỏ và dễ mở rộng. đó là một vi khung không bao gồm ORM (Trình quản lý quan hệ đối tượng) hoặc các tính năng như vậy. Nó có nhiều tính năng thú vị như định tuyến url, công cụ mẫu . |