Dấu phân cách giữa các phần tử là một chuỗi trống theo mặc định, nhưng bạn có thể xác định nó bằng tham số đầu tiên tùy chọn
Một tham số thứ hai cũng có thể được cung cấp sẽ là dấu phân cách được sử dụng giữa hai mục cuối cùng của chuỗi
Twig [mở cửa sổ mới] là một hệ thống tạo khuôn mẫu nhanh và mạnh mẽ, thường được sử dụng để hỗ trợ chế độ xem giao diện người dùng trong các hệ thống quản lý nội dung như Craft, Drupal và WordPress [thông qua plugin Timber [mở cửa sổ mới]]
Chúng ta hãy xem nó hoạt động như thế nào
Các loại mã Twig
Các mẫu Twig là các tệp HTML được rắc các bit mã Twig. Khi Twig tải một mẫu, điều đầu tiên nó sẽ làm là tách mã HTML thô khỏi mã Twig. Mã HTML thô sẽ được xuất ra trình duyệt mà không có bất kỳ sự giả mạo nào
Tất cả mã Twig tuân theo một mẫu cơ bản tách nó khỏi HTML xung quanh. Ở các cạnh bên ngoài của nó, bạn sẽ tìm thấy các dấu ngoặc nhọn trái và phải [{ và }], cùng với một ký tự khác biểu thị loại mã Twig đó là gì. Các bộ ký tự này được gọi là "dấu phân cách"
Có ba loại dấu phân cách mà Twig tìm kiếm
Nhận xét nhánh được gói trong dấu phân cách {# và #}. Bạn có thể sử dụng chúng để ghi chú nhỏ cho chính mình trong mã
Chúng tương tự như nhận xét HTML ở chỗ chúng sẽ không hiển thị dưới dạng văn bản được hiển thị trong trình duyệt. Điểm khác biệt là chúng sẽ không bao giờ đưa nó vào nguồn HTML ngay từ đầu
Thẻ nhánh được gói trong dấu phân cách {% và %} và được sử dụng để xác định logic của mẫu, chẳng hạn như điều kiện, vòng lặp, định nghĩa biến, bao gồm mẫu và những thứ khác
Cú pháp trong các dấu phân cách {% và %} thay đổi theo từng thẻ, nhưng chúng sẽ luôn bắt đầu bằng cùng một thứ. tên của thẻ
Ở dạng đơn giản nhất, tên thẻ có thể là tất cả những gì cần thiết. Lấy ví dụ về thẻ Craft
Các thẻ khác có thể chấp nhận tham số. Trong trường hợp thẻ của Craft, bạn có thể tùy ý đặt mã trạng thái HTTP sẽ được gửi tới trình duyệt trong phản hồi
Một số thẻ được dùng theo cặp, chẳng hạn như thẻ đăng ký mã JavaScript trên trang
Một số thẻ có thể có các thẻ lồng nhau giữa thẻ mở và thẻ đóng
Tham khảo trang Thẻ để biết danh sách đầy đủ các thẻ có sẵn cho các mẫu Thủ công của bạn
Báo cáo in
Để xuất mã HTML bổ sung một cách linh hoạt, hãy sử dụng câu lệnh in. Chúng được bọc trong các dấu phân cách {{ và }}, và bạn có thể đặt bất cứ thứ gì bên trong chúng, miễn là nó có thể được coi là một
Không đặt câu lệnh in [hoặc bất kỳ mã Twig nào khác] trong câu lệnh in khác. Xem để biết cách kết hợp chuỗi với các biểu thức khác
Tự động thoát
Hầu hết thời gian, các câu lệnh in sẽ tự động mã hóa HTML nội dung trước khi thực sự xuất nội dung đó [được gọi là thoát tự động], giúp bảo vệ chống lại các lỗ hổng của cross-site scripting [XSS]
Ví dụ: giả sử bạn có một trang kết quả tìm kiếm, trong đó truy vấn tìm kiếm được xác định bởi tham số chuỗi truy vấn }0 và trong trường hợp không có kết quả, bạn muốn xuất một thông báo cho người dùng bao gồm truy vấn
Nếu nó không phải để thoát tự động, tìm kiếm }1 sẽ dẫn đến HTML này
Điều này sẽ khiến JavaScript thực thi trên trang, mặc dù nó không phải là một phần của mẫu Twig ban đầu. Nhưng nhờ tự động thoát, bạn thực sự sẽ nhận được HTML này
Có hai trường hợp câu lệnh in sẽ xuất nội dung trực tiếp mà không tự động thoát nội dung đó trước
- Khi nội dung được coi là an toàn bởi thẻ hoặc chức năng cuối cùng được gọi trong câu lệnh in [chẳng hạn như bộ lọc]
- Khi bạn đánh dấu rõ ràng nội dung là an toàn bằng bộ lọc thô [mở cửa sổ mới]
Thoát thủ công
Đôi khi bạn có thể cần phải làm việc với cả nội dung đáng tin cậy và không đáng tin cậy cùng nhau. Ví dụ: giả sử bạn muốn xuất nội dung do người dùng cung cấp dưới dạng Markdown, nhưng trước tiên bạn muốn đảm bảo rằng họ không đưa bất kỳ nội dung bất chính nào vào đó
Để làm điều đó, bạn có thể mã hóa rõ ràng tất cả HTML trong nội dung do người dùng cung cấp bằng cách sử dụng bộ lọc thoát [mở cửa sổ mới], trước khi chuyển nó tới bộ lọc
Ngoài ra, nếu bạn muốn cho phép một số HTML, miễn là nó được thuần hóa, bạn có thể sử dụng bộ lọc để lọc nội dung bằng cách sử dụng Bộ lọc HTML [mở cửa sổ mới]
Biến
Twig hỗ trợ đặt các biến tùy chỉnh trong mẫu của bạn, cho phép bạn lưu một tham chiếu sau này trong mẫu của mình
Bạn có thể xác định các biến bằng cách sử dụng thẻ set [opens new window]
Craft cung cấp một số biến được xác định trước sẽ có sẵn ngoài các biến do bạn tự xác định. Tham khảo trang Biến toàn cầu để biết danh sách đầy đủ các biến toàn cầu có sẵn cho các mẫu Craft của bạn
Chức năng
Có một số chức năng có sẵn cho các mẫu Twig của bạn, có thể thực hiện nhiều việc khác nhau. Ví dụ: Craft cung cấp một chức năng có thể dùng để tạo HTML cho đầu vào ẩn
Tham khảo trang Chức năng để biết danh sách đầy đủ các chức năng có sẵn cho mẫu Craft của bạn
bộ lọc
Các bộ lọc giống như các hàm, nhưng chúng sử dụng cú pháp đường ống [}2] và chúng luôn nhằm mục đích thao túng một giá trị nào đó. Ví dụ: Craft cung cấp bộ lọc chuyển đổi văn bản có định dạng Markdown [mở cửa sổ mới] thành HTML
Bạn có thể xâu chuỗi các bộ lọc lại với nhau. Mỗi bộ lọc tiếp theo sẽ sử dụng kết quả của bộ lọc trước đó làm điểm bắt đầu
Lưu ý rằng các bộ lọc sẽ chỉ áp dụng cho giá trị ngay trước nó. Nếu muốn áp dụng bộ lọc cho kết quả của một biểu thức, trước tiên, bạn phải đặt biểu thức đó trong dấu ngoặc đơn
Tham khảo trang Bộ lọc để biết danh sách đầy đủ các bộ lọc có sẵn cho các mẫu Thủ công của bạn
bài kiểm tra
Các bài kiểm tra giống như các hàm chỉ trả về }3 hoặc }4 và nhằm mục đích tiết lộ điều gì đó về bản chất của một giá trị. Ví dụ: kiểm tra đã xác định [mở cửa sổ mới] sẽ trả về }3 hoặc }4 tùy thuộc vào việc một biến hoặc thuộc tính hàm băm/đối tượng được xác định
Nếu bạn đang tìm kiếm xem một bài kiểm tra có trả về }4 hay không, hãy sử dụng cú pháp }8
Tham khảo trang Thử nghiệm để biết danh sách đầy đủ các bộ lọc có sẵn cho các mẫu Thủ công của bạn
Các loại giá trị
Có sáu loại giá trị mà bạn sẽ làm việc trong Twig
Chúng ta hãy xem xét từng người trong số họ một cách chi tiết
Dây
Giá trị văn bản được gọi là chuỗi. Để xác định một chuỗi, hãy bọc một số văn bản trong dấu ngoặc kép hoặc dấu ngoặc đơn [nhưng không phải dấu ngoặc kép/dấu ngoặc kép thông minh]
Khi bạn đã bắt đầu một chuỗi, Twig sẽ tiếp tục phân tích cú pháp chuỗi đó cho đến khi gặp một dấu ngoặc kép phù hợp khác. Điều đó có nghĩa là bạn có thể thêm các dấu ngoặc kép khác vào trong chuỗi một cách an toàn—miễn là đó không phải là cùng một loại dấu ngoặc kép
Nếu cần sử dụng cả hai loại dấu ngoặc kép trong cùng một chuỗi, bạn có thể đặt dấu gạch chéo ngược [}9] ngay trước dấu gạch chéo ngược khớp với dấu phân cách mở đầu của chuỗi để “thoát” khỏi bị phân tích cú pháp dưới dạng dấu phân cách kết thúc
kết hợp chuỗi
Twig cung cấp hai cách để kết hợp các chuỗi với nhau. Bạn có thể nối chúng bằng cách sử dụng toán tử dấu ngã [{#0] hoặc bạn có thể đưa một chuỗi vào giữa một chuỗi khác bằng phép nội suy chuỗi
Nội suy chuỗi chỉ hoạt động trong chuỗi trích dẫn kép
số
Các số có thể được viết nguyên văn mà không có bất kỳ dấu phân cách đặc biệt nào
Các số có thể được xuất dưới dạng câu lệnh in hoặc được kết hợp với chuỗi
Booleans
Các giá trị Boolean là }3 hoặc }4. Đó là những từ dành riêng trong Twig, vì vậy nếu muốn tạo giá trị boolean, bạn chỉ cần nhập nó ra
Booleans thường được sử dụng nhiều nhất trong , giúp bật hoặc tắt một phần của mẫu tùy thuộc vào biểu thức
Nếu bạn xuất một giá trị boolean trong câu lệnh in hoặc kết hợp nó với một chuỗi khác, thì giá trị đó sẽ được chuyển đổi thành {#3 hoặc {#4
Mảng
Mảng được sắp xếp danh sách các giá trị lồng nhau. Chúng được phân cách bằng dấu ngoặc vuông trái và phải [{#5 và {#6] và các giá trị của chúng được phân tách bằng dấu phẩy
Bạn có thể lặp qua một mảng bằng thẻ for [opens new window]
Lưu ý rằng bạn không thể xuất một mảng trực tiếp trong câu lệnh in hoặc kết hợp nó với một chuỗi khác. Nếu bạn muốn xuất nhanh danh sách các giá trị của một mảng được phân tách bằng dấu phẩy, bạn có thể sử dụng bộ lọc nối [mở cửa sổ mới]
Băm
Băm tương tự như , ngoại trừ các giá trị được lập chỉ mục bởi các khóa tùy chỉnh
Để xác định hàm băm, hãy sử dụng dấu ngoặc nhọn trái và phải làm dấu phân cách [{ và }]. Phân tách các cặp khóa-giá trị của hàm băm bằng dấu phẩy, giống như mảng và tách các khóa riêng lẻ khỏi các giá trị bằng dấu hai chấm
Nếu bạn cần tạo một hàm băm bằng khóa động, hãy đặt khóa đó trong dấu ngoặc đơn
Giống như mảng, bạn có thể lặp qua tất cả các giá trị trong hàm băm bằng cách sử dụng thẻ for [opens new window]
Bạn cũng có thể truy cập trực tiếp các giá trị băm bằng khóa của chúng, sử dụng cú pháp dấu chấm hoặc mảng
chức năng mũi tên
Một số và cho phép bạn chuyển một hàm mũi tên làm đối số. Các hàm mũi tên là các hàm nhỏ gọn mà bạn xác định ngay trong mẫu của mình, hàm này trả về một giá trị duy nhất
Ví dụ: bộ lọc của Craft sẽ nhóm tất cả các mục trong một mảng, dựa trên kết quả của hàm mũi tên mà bạn nhập vào
vòng lặp
Bạn sẽ thường xuyên cần lặp lại nhiều mục trong một hoặc. Để làm điều đó, bạn sẽ sử dụng thẻ for [opens new window]
điều kiện
Các mẫu của bạn có thể chứa các điều kiện, được bắt đầu bằng thẻ if [mở cửa sổ mới], chứa một biểu thức sẽ được đánh giá là }3 hoặc }4 và sẽ hiển thị một phần của mẫu tùy thuộc vào kết quả của biểu thức đó
Bạn có thể bao gồm thẻ #}1 lồng nhau, nếu bạn muốn hiển thị một phần khác của mẫu khi điều kiện là }4
Bạn cũng có thể bao gồm các thẻ #}3 lồng nhau [trước thẻ #}1, nếu có], để tạo các điều kiện dự phòng bổ sung trong trường hợp điều kiện ban đầu là }4
Nếu bạn muốn chuyển đổi giữa các phần khác nhau trong mẫu của mình tùy thuộc vào giá trị của nội dung nào đó, thẻ sẽ cung cấp cú pháp đơn giản hơn so với nhiều thẻ #}6 và #}3, mỗi thẻ so sánh lặp đi lặp lại cùng một giá trị
khuôn mẫu KHÔ
Bất cứ khi nào bạn mã hóa bất cứ thứ gì, bạn luôn nên giữ mã của mình ở trạng thái “KHÔ” [Không lặp lại chính mình], để tránh viết và duy trì cùng một logic chung hoặc HTML ở nhiều nơi. Điều này cũng áp dụng cho Twig. mỗi trang trên trang web của bạn có thể có đầu trang và chân trang giống nhau và phần lớn các trang của bạn phải được tạo thành từ các thành phần được chia sẻ, có thể tái sử dụng
Twig cung cấp bốn cách để giữ cho mẫu của bạn KHÔ
Kế thừa mẫu
Các mẫu nhánh có thể mở rộng các mẫu khác, điền nhiều chi tiết hơn mẫu gốc của chúng. Khái niệm này được gọi là kế thừa mẫu vì các mẫu con kế thừa một bộ HTML cơ sở từ mẫu gốc của chúng
Ví dụ: bạn có thể tạo một mẫu #}8 trong thư mục #}9 của mình, mẫu này xác định bản soạn sẵn HTML cơ sở mà tất cả các trang trên trang web của bạn nên có
Bản thân mẫu này khá vô giá trị, nhưng nó cung cấp một khuôn khổ cho các mẫu lồng nhau để tận dụng lợi thế của