Css chó pug
|
Là nhà thiết kế hoặc nhà phát triển web, tất cả chúng ta có thể phải viết những chia sẻ công bằng về HTML. Và mặc dù đây không phải là nhiệm vụ khó khăn nhất, nhưng nó thường có vẻ hơi nhàm chán hoặc lặp đi lặp lại. Đây là nơi bộ tiền xử lý Pug HTML xuất hiện Show
HTML cũng là tĩnh, điều đó có nghĩa là nếu bạn muốn hiển thị dữ liệu động (ví dụ: được tìm nạp từ API), thì bạn luôn kết thúc với một mớ hỗn độn HTML bên trong JavaScript. Đây có thể là một cơn ác mộng để gỡ lỗi và duy trì. Pug là một công cụ mẫu cho Node và cho trình duyệt. Nó biên dịch thành HTML và có cú pháp đơn giản hóa, có thể giúp bạn làm việc hiệu quả hơn và mã của bạn dễ đọc hơn. Pug giúp dễ dàng viết HTML có thể tái sử dụng cũng như hiển thị dữ liệu được lấy từ cơ sở dữ liệu hoặc API Trong hướng dẫn này, tôi sẽ trình bày cách thiết lập và chạy với Pug. Chúng ta sẽ bắt đầu bằng cách cài đặt nó từ npm, xem qua cú pháp cơ bản của nó và sau đó xem một số ví dụ về cách sử dụng JavaScript trong Pug. Cuối cùng, chúng ta sẽ khám phá một vài tính năng nâng cao hơn của Pug bằng cách xây dựng một dự án Node/Express đơn giản sử dụng Pug làm công cụ mẫu của nó Pug được sử dụng để làm gì?Trước khi bắt đầu tìm hiểu về Pug, hãy dành một chút thời gian để hiểu các khái niệm liên quan Công cụ mẫu là một chương trình chịu trách nhiệm biên dịch một mẫu (có thể được viết bằng bất kỳ một trong số các ngôn ngữ) thành HTML. Công cụ mẫu thường sẽ nhận dữ liệu từ một nguồn bên ngoài, dữ liệu này sẽ đưa vào mẫu mà nó đang biên dịch. Điều này được minh họa bằng sơ đồ sau Cách tiếp cận này cho phép bạn sử dụng lại các thành phần trang web tĩnh, đồng thời xác định các thành phần động dựa trên dữ liệu của bạn. Nó cũng tạo điều kiện tách biệt các mối quan tâm, giữ cho logic ứng dụng của bạn được tách biệt khỏi logic hiển thị của bạn Bạn có nhiều khả năng hưởng lợi từ công cụ mẫu nếu trang web hoặc ứng dụng web của bạn được điều khiển bằng dữ liệu — chẳng hạn như thư mục nhân viên để quản lý nhân viên, cửa hàng web liệt kê các sản phẩm khác nhau để người dùng mua hoặc trang web có chức năng tìm kiếm động Bạn sẽ không cần công cụ mẫu nếu bạn đang tìm nạp một lượng nhỏ dữ liệu từ API (trong trường hợp đó, bạn chỉ có thể sử dụng các chuỗi mẫu gốc của JavaScript) hoặc nếu bạn đang tạo một trang web tĩnh nhỏ Một ít lịch sửCũng cần lưu ý rằng Pug từng được gọi là Jade cho đến khi nó buộc phải đổi tên do khiếu nại về nhãn hiệu vào năm 2015. Việc thay đổi tên có hiệu lực với phiên bản 2. 0 Vẫn còn rất nhiều tài liệu liên quan đến Jade trực tuyến. Và mặc dù một số trong số đó có thể vẫn còn khá hợp lệ, nhưng thực tế là việc thay đổi tên trùng với một phiên bản chính có nghĩa là cú pháp của Pug có một số điểm khác biệt, không dùng nữa và bị loại bỏ so với phiên bản tiền nhiệm của nó. Đây là tài liệu ở đây Nếu bạn muốn tìm hiểu thêm, bạn có thể đọc thông báo thay đổi tên ban đầu trong vấn đề GitHub này. Mặt khác, chỉ cần đảm bảo thêm từ “mẫu” vào các tìm kiếm trên Google liên quan đến chó Pug của bạn để tránh kết quả đầy những chú chó con Cài đặt PugTrước khi chúng tôi có thể viết một số Pug, chúng tôi sẽ cần cài đặt Node, npm (đi kèm với Node) và gói pug-cli Có một số tùy chọn để cài đặt Node/npm. Truy cập trang chủ của dự án và tải xuống các tệp nhị phân chính xác cho hệ thống của bạn hoặc sử dụng trình quản lý phiên bản, chẳng hạn như nvm. Tôi khuyên bạn nên sử dụng trình quản lý phiên bản nếu có thể, vì điều này sẽ cho phép bạn cài đặt các phiên bản Node khác nhau và chuyển đổi giữa chúng theo ý muốn. Nó cũng sẽ loại bỏ một loạt các lỗi quyền tiềm năng Bạn có thể xem hướng dẫn của chúng tôi “Cài đặt nhiều phiên bản nút. js Sử dụng nvm” để được hướng dẫn sâu hơn Khi Node và npm được cài đặt trên hệ thống của bạn, bạn có thể cài đặt gói Bạn có thể kiểm tra xem quá trình cài đặt có chạy chính xác hay không bằng cách gõ Tại thời điểm viết, điều này là như sau Đánh dấu cú pháp trong Trình chỉnh sửa của bạnNếu trình chỉnh sửa của bạn không cung cấp tính năng tô sáng cú pháp cho Pug, bạn nên tìm tiện ích mở rộng để thêm chức năng này Tôi hiện đang sử dụng Sublime Text 3 và, ngoài hộp, đây là giao diện của tệp Để khắc phục điều này, người ta có thể cài đặt gói Sublime Pug Đánh dấu cú pháp sẽ giúp làm việc với các tệp Pug dễ dàng hơn nhiều, đặc biệt là các tệp có độ dài bất kỳ Dùng thử Pug HTML mà không cần cài đặtNếu bạn muốn làm theo các ví dụ đơn giản hơn trong hướng dẫn này, bạn cũng có thể chạy chúng trong các sân chơi mã trực tuyến khác nhau Ví dụ, CodePen có hỗ trợ Pug ngay trong. Chỉ cần tạo một cây bút mới, sau đó chọn Cài đặt > HTML và chọn Pug làm bộ tiền xử lý của bạn. Điều này sẽ cho phép bạn nhập mã Pug vào khung HTML và xem kết quả xuất hiện trong thời gian thực Như một phần thưởng bổ sung, bạn có thể nhấp vào mũi tên xuống trong ngăn HTML và chọn Xem HTML đã biên dịch để xem đánh dấu mà Pug đã tạo Pug HTML Cú pháp cơ bảnBây giờ chúng tôi đã cài đặt Pug, hãy dùng thử. Tạo một thư mục mới có tên Ghi chú. lệnh Cách thức hoạt động của việc này là chúng tôi sẽ viết mã Pug của mình bằng Để bắt đầu, hãy mở một thiết bị đầu cuối trong thư mục Bạn sẽ thấy một cái gì đó như sau Ghi chú. trong lệnh trên, tùy chọn Bây giờ, hãy tạo trang từ ảnh chụp màn hình ở trên (trang phàn nàn về việc thiếu đánh dấu cú pháp). Nhập thông tin sau vào Lưu Không tệ nhỉ? Ví dụ này nhằm làm nổi bật một vài điểm quan trọng về Pug. Đầu tiên, nó nhạy cảm với khoảng trắng, có nghĩa là Pug sử dụng thụt đầu dòng để tìm ra thẻ nào được lồng vào nhau. Ví dụ Đoạn mã trên tạo ra cái này Bây giờ lấy mã này Điều này tạo ra như sau Việc bạn sử dụng mức độ thụt lề nào không thực sự quan trọng (thậm chí bạn có thể sử dụng các tab nếu cần), nhưng bạn nên giữ mức độ thụt đầu dòng nhất quán. Trong bài viết này tôi sẽ sử dụng hai dấu cách Thứ hai, Pug không có bất kỳ thẻ đóng nào. Điều này rõ ràng sẽ giúp bạn tiết kiệm được một vài lần nhấn phím và cung cấp cho Pug một cú pháp rõ ràng và dễ đọc Bây giờ chúng ta đã xử lý một số Pug cơ bản, hãy nhanh chóng xem qua cú pháp của nó. Nếu bất kỳ điều nào trong số này có vẻ khó hiểu hoặc bạn muốn tìm hiểu sâu hơn, hãy nhớ tham khảo tài liệu tuyệt vời của dự án LOẠI TÀI LIỆUBạn có thể sử dụng Pug để tạo một số khai báo kiểu tài liệu Ví dụ: thẻNhư đã đề cập, Pug không có bất kỳ thẻ đóng nào và dựa vào thụt lề để lồng vào nhau. Điều này có thể mất một chút thời gian để làm quen, nhưng một khi bạn làm như vậy, nó sẽ tạo ra mã rõ ràng và dễ đọc. Bằng một ví dụ Đoạn mã trên biên dịch thành cái này Lưu ý rằng Pug đủ thông minh để đóng bất kỳ thẻ tự đóng nào (chẳng hạn như phần tử Các lớp, ID và thuộc tínhCác lớp và ID được thể hiện bằng cách sử dụng ký hiệu Pug cũng cung cấp cho chúng tôi một phím tắt tiện dụng. Nếu không có thẻ nào được chỉ định, nó sẽ giả sử một phần tử Cả hai đều biên dịch thành Các thuộc tính được thêm vào bằng cách sử dụng dấu ngoặc Điều này dẫn đến kết quả như sau Còn rất nhiều điều để nói về các thuộc tính. Ví dụ: bạn có thể sử dụng JavaScript để đưa các biến vào thuộc tính của mình hoặc gán một mảng giá trị cho một thuộc tính. Chúng ta sẽ tiếp tục sử dụng JavaScript trong Pug trong phần tiếp theo Văn bản thuần túy và khối văn bảnPug cung cấp nhiều phương thức khác nhau để thêm văn bản thuần túy trực tiếp vào HTML được hiển thị Chúng ta đã thấy cách thêm nội tuyến văn bản thuần túy Một cách khác là thêm vào đầu dòng một ký tự ống ( Điều này cho chúng ta những điều sau đây Khi xử lý các khối văn bản lớn, bạn chỉ cần thêm một dấu chấm Kết quả này trong Bình luậnCuối cùng, ý kiến có thể được thêm vào như vậy Nhận xét này sẽ được thêm vào HTML được hiển thị Bạn bắt đầu một bình luận như vậy Khi bạn thực hiện việc này, nhận xét sẽ vẫn còn trong tệp Pug nhưng sẽ không xuất hiện trong HTML Nhận xét phải xuất hiện trên dòng riêng của họ. Ở đây, bình luận sẽ được coi là văn bản thuần túy Nhận xét nhiều dòng cũng có thể Bản trình diễn cú pháp cơ bảnDưới đây, bạn có thể tìm thấy bản trình diễn bố cục kiểu Bootstrap thể hiện các kỹ thuật mà chúng ta đã thảo luận cho đến nay Xem cây bút Sử dụng JavaScript trong các mẫu Pug HTMLMột trong những điều tuyệt vời về Pug là khả năng chạy JavaScript trong các mẫu của bạn. Điều này giúp dễ dàng chèn các biến vào các mẫu của chúng tôi, lặp qua các mảng và đối tượng, kết xuất HTML có điều kiện, v.v. Bộ đệm so với mã không có bộ đệmĐây là một điểm khác biệt quan trọng cần lưu ý trước khi sử dụng JavaScript trong Pug Mã không có bộ đệm bắt đầu bằng dấu trừ (______29_______3). Nó không trực tiếp thêm bất cứ thứ gì vào đầu ra, nhưng các giá trị của nó có thể được sử dụng từ bên trong Pug Mặt khác, mã đệm bắt đầu bằng ( Đoạn mã trên biên dịch thành cái này Vì lý do bảo mật, mã đệm được thoát khỏi HTML Đoạn mã trên biên dịch thành cái này nội suyNội suy chuỗi là quá trình thay thế một hoặc nhiều phần giữ chỗ trong mẫu bằng một giá trị tương ứng. Như chúng ta vừa thấy, đầu vào được đệm cung cấp một phương pháp để thực hiện việc này. Một người khác đang sử dụng Đoạn mã trên biên dịch thành cái này Vì các dấu ngoặc nhọn có thể chứa bất kỳ biểu thức JavaScript hợp lệ nào nên điều này mở ra rất nhiều khả năng Điều này biên dịch thành Bạn cũng có thể hiển thị các giá trị chưa thoát vào các mẫu của mình bằng cách sử dụng Ghi chú. khi bạn muốn gán giá trị được giữ trong một biến cho một thuộc tính của phần tử, bạn có thể bỏ qua ______29_______5. Ví dụ. lặp lạiTừ khóa Điều này dẫn đến kết quả như sau Bạn cũng có thể sử dụng nó để lặp lại các phím trong một đối tượng Kết quả này trong Pug cũng cho phép bạn cung cấp một khối khác sẽ được thực thi nếu mảng hoặc đối tượng trống Cuối cùng, lưu ý rằng bạn có thể sử dụng điều kiệnĐiều kiện cung cấp một cách rất thuận tiện để hiển thị HTML khác nhau tùy thuộc vào kết quả của biểu thức JavaScript Trong ví dụ này, chúng tôi đang kiểm tra xem đối tượng JavaScript trong Pug DemoDưới đây, bạn có thể tìm thấy bản trình diễn của một số kỹ thuật mà chúng ta đã thảo luận trong phần này. Phần này giới thiệu các lợi ích của Pug nhiều hơn phần nào so với bản demo trước, vì tất cả những gì chúng ta cần làm để thêm nhân viên là thêm các đối tượng khác vào mảng Xem cây bút Một ví dụ thực tếBây giờ chúng ta đã có ý tưởng hợp lý về cú pháp của Pug và cách thức hoạt động của nó, hãy kết thúc bằng cách xây dựng một Express nhỏ. js để minh họa một số tính năng nâng cao hơn của Pug Mã cho ví dụ này có sẵn trên GitHub Ghi chú. nếu bạn chưa từng sử dụng Express trước đây, đừng lo lắng. Đó là một khung web cho Node. js cung cấp một bộ tính năng mạnh mẽ để xây dựng các ứng dụng web. Nếu bạn muốn tìm hiểu thêm, hãy xem hướng dẫn bắt đầu với Express của chúng tôi Trước hết, hãy tạo một dự án mới và cài đặt Express Tiếp theo tạo một tệp Sau đó thêm vào như sau Ở đây, chúng tôi đang khai báo một tuyến đường (______3_______07), tuyến đường này sẽ đáp ứng yêu cầu GET với nội dung “Xin chào, Thế giới. ” Chúng tôi có thể kiểm tra điều này trong các trình duyệt của mình bằng cách khởi động máy chủ bằng Nếu bạn thấy một cái gì đó như thế này, thì mọi thứ đã đi theo kế hoạch Thêm một số dữ liệuỨng dụng Express này sẽ không làm được điều gì quá ngoạn mục. Chúng tôi sẽ xây dựng một thư mục nhân viên đơn giản để lấy danh sách nhân viên từ cơ sở dữ liệu và hiển thị chúng trong một bảng. Để điều đó xảy ra, chúng tôi sẽ cần một cơ sở dữ liệu và một số dữ liệu Tuy nhiên… việc cài đặt và định cấu hình cơ sở dữ liệu hơi khó đối với ví dụ nhỏ này, vì vậy tôi sẽ sử dụng một gói có tên json-server. Điều này sẽ cho phép chúng tôi tạo một tệp Hãy cài đặt nó Bây giờ hãy tạo tệp Cuối cùng, chúng tôi cần một số JSON để điền vào nó. Chúng tôi sẽ sử dụng Trình tạo người dùng ngẫu nhiên, đây là API nguồn mở, miễn phí để tạo dữ liệu người dùng ngẫu nhiên. 25 người nên làm ví dụ của chúng ta, vì vậy hãy truy cập vào Cuối cùng, khởi động máy chủ trong cửa sổ đầu cuối thứ hai với Điều này sẽ khiến máy chủ json khởi động trên cổng 3001 và xem tệp cơ sở dữ liệu của chúng tôi để biết các thay đổi Thiết lập Pug làm Công cụ mẫuExpress có hỗ trợ tuyệt vời cho việc sử dụng Pug, vì vậy rất ít cấu hình cần thiết Đầu tiên, hãy thêm Pug vào dự án của chúng tôi Sau đó, trong Tiếp theo, tạo thư mục Thêm một số nội dung vào tập tin đó Sau đó thay đổi Cuối cùng, khởi động lại máy chủ Node, sau đó làm mới trình duyệt của bạn và bạn sẽ thấy điều này Và đó là nó. bạn tốt để đi Xây dựng danh mục nhân viênNhiệm vụ tiếp theo trong danh sách là chuyển một số dữ liệu cho mẫu Pug để hiển thị. Để làm điều đó, chúng tôi sẽ cần một phương thức tìm nạp dữ liệu từ máy chủ json. Thật không may, API tìm nạp không được triển khai trong Node, vì vậy hãy sử dụng axios, ứng dụng khách HTTP phổ biến để thay thế Sau đó thay đổi Có một vài điều đang xảy ra ở đây. Chúng tôi đã biến trình xử lý tuyến của mình thành một chức năng không đồng bộ, để chúng tôi có thể đợi dữ liệu nhân viên được trả về từ máy chủ json trước khi chuyển giao cho mẫu Sau đó, chúng tôi hiển thị chỉ mục như trước, nhưng lần này chúng tôi chuyển cho nó một đối tượng bằng chữ chứa tất cả dữ liệu của chúng tôi Ghi chú. bạn phải khởi động lại máy chủ Node mỗi khi bạn thay đổi thành Bây giờ cho Pug. Thay đổi Hy vọng không có gì đáng ngạc nhiên xảy ra ở đây. Chúng tôi đang sử dụng semantic-ui-css cho một số kiểu dáng, cũng như một số kiểu dáng của riêng chúng tôi Sau đó, trong phần thân bảng, chúng tôi đang lặp lại mảng của Ở cuối trang là phần chân trang có khiếu nại bản quyền của chúng tôi và năm hiện tại Nếu bạn làm mới trang bây giờ, bạn sẽ thấy điều này  Kế thừa mẫuĐiều này đã khá tốt rồi, nhưng để hoàn thiện mọi thứ, tôi sẽ trình bày cách cấu trúc các khung nhìn của chúng ta để mang lại sự linh hoạt tối đa khi dự án phát triển Hãy bắt đầu bằng cách tạo một tệp Sau đó thêm vào như sau Những gì chúng tôi đã làm ở đây là tạo một tệp bố cục có thể được mở rộng bởi các tệp Pug khác trong dự án của chúng tôi. Khi bạn có một số lượng lớn tệp Pug, điều này sẽ tiết kiệm được một lượng mã đáng kể Cách thức hoạt động của điều này là chúng tôi đã xác định hai khối nội dung ( Bây giờ chúng ta có thể yêu cầu tệp Kết quả giống như chúng ta đã có trước đây, nhưng mã bây giờ có cấu trúc tốt hơn hỗn hợpMixins cho phép bạn tạo các khối Pug có thể tái sử dụng. Chúng ta có thể sử dụng điều này để trích xuất hàng của bảng thành tệp riêng của nó Tạo một thư mục có tên là Mixins được khai báo bằng cách sử dụng từ khóa Bây giờ thay đổi Như bạn có thể thấy, chúng tôi đang nhập mixin ở đầu tệp. Sau đó, chúng tôi gọi nó bằng cách thêm tiền tố vào tên của nó bằng ký hiệu dấu cộng và chuyển đối tượng Điều này là quá mức cần thiết đối với ứng dụng nhỏ của chúng tôi, nhưng nó thể hiện một tính năng rất hữu ích của Pug, cho phép chúng tôi viết mã có thể tái sử dụng Phần kết luậnLàm tốt lắm nếu bạn đã làm được đến mức này. Chúng tôi đã bao phủ rất nhiều nền tảng trong hướng dẫn này. Chúng tôi đã xem xét việc cài đặt Pug, cú pháp cơ bản của nó, hỗ trợ JavaScript của nó và các cấu trúc để lặp lại và hiển thị có điều kiện. Cuối cùng, chúng tôi đã xây dựng một ứng dụng Express đầy đủ chức năng để lấy dữ liệu từ một nguồn từ xa và cung cấp dữ liệu đó cho một mẫu Pug Vẫn còn rất nhiều điều mà Pug có thể làm. Tôi khuyến khích bạn xem tài liệu tuyệt vời của nó và bắt đầu sử dụng nó trong các dự án của bạn. Bạn cũng có thể sử dụng nó với một số khung công tác JS hiện đại, chẳng hạn như React hoặc và thậm chí nó đã được Nếu bạn đang tìm kiếm một thử thách, tại sao không thử mở rộng thư mục nhân viên để thêm chức năng CRUD còn thiếu. Và nếu bạn gặp khó khăn với cú pháp, đừng quên rằng sự trợ giúp luôn sẵn sàng Pug dùng để làm gì?Pug (trước đây gọi là Jade) là một công cụ tạo mẫu. Điều này có nghĩa là nó là một công cụ tạo tài liệu từ các mẫu tích hợp một số dữ liệu được chỉ định. Trong trường hợp này, Pug được sử dụng để viết các mẫu được biên dịch thành các hàm lấy dữ liệu và hiển thị tài liệu HTML .
Làm cách nào để sử dụng CSS trong Pug?Chế độ tạo khuôn cho chó pug . tài liệu html title= "Ví dụ chế độ Pug Templating CodeMirror" liên kết (rel='bản định kiểu', href='/css/bootstrap. tối thiểu. cs') liên kết (rel='bản định kiểu', href='/css/index. cs') tập lệnh (loại = 'văn bản/javascript', src ='/js/jquery-1. 9. 1. tối thiểu. js') tập lệnh (loại = 'văn bản/javascript', src ='/js/bootstrap. tối thiểu. js') Tại sao nên sử dụng Pug thay vì HTML?PUG sử dụng thụt lề để phân biệt vị trí bắt đầu và kết thúc của thẻ . Điều này làm cho mã sạch hơn nhiều so với HTML, nơi thiếu thụt đầu dòng và cần đóng thẻ khiến mã hơi lộn xộn.
Pug có phải là một công cụ tạo mẫu tốt không?Một trong những điều tuyệt vời về Pug là khả năng chạy JavaScript trong các mẫu của bạn . Điều này giúp dễ dàng chèn các biến vào các mẫu của chúng tôi, lặp qua các mảng và đối tượng, kết xuất HTML có điều kiện, v.v. |
