Cách thiết kế trang mẫu với Twig trên VPS
Về cành cây
Twig là một công cụ mẫu hiện đại được thiết kế cho PHP, thân thiện với cả nhà thiết kế và nhà phát triển. Nó là một giải pháp thay thế rất tốt cho cách PHPTemplate để xây dựng logic trình bày của một ứng dụng web vì nó thể hiện trải nghiệm tạo khuôn mẫu rõ ràng hơn nhiều. Về mặt này, nó đi kèm với một cú pháp rất dễ hiểu và hạn chế bạn thực hiện các hoạt động PHP động trong các file mẫu.
Trong hướng dẫn trước , ta đã biết cách cài đặt Twig với Composer và bắt đầu sử dụng nó ở cấp độ cơ bản nhất. Trong hướng dẫn này, ta sẽ đi sâu hơn một chút về cú pháp của nó và cách bạn có thể sử dụng nó để tạo file mẫu của bạn .
Comment
Điều đầu tiên bạn cần biết là làm thế nào để thêm comment vào trang web . Có một cú pháp đơn giản cho nó: {# #} . Mọi thứ bạn đặt bên trong khối này sẽ không được phân tích cú pháp. Và nó cũng có thể nằm trên nhiều dòng:
{#
This is a comment that won’t be parsed.
#}Biến
Ta đã biết cách chuyển một biến vào file mẫu và cách in biến đó ra (ở giữa dấu ngoặc nhọn kép). Cái ta thấy là một biến PHP chuỗi rất đơn giản. Tuy nhiên, bạn có thể chuyển qua phương thức render () cũng như mảng hoặc đối tượng.
Giả sử ta có lớp PHP sau trong ứng dụng của bạn :
class Box
{
public $shape = 'square';
public function displayShape() {
return $this->shape;
}
}Nếu ta khởi tạo một đối tượng mới dựa trên lớp này ( ta hãy gọi nó là myBox ) và chuyển nó qua mẫu Twig, ta có thể làm việc với nó theo cách sau. Nếu ta muốn in ra thuộc tính $ shape, ta thực hiện như sau:
{{ myBox.shape }}Nếu ta muốn trả về phương thức displayShape () , ta làm như sau:
{{ myBox.displayShape() }}Với một mảng, nó rất giống nhau. Giả sử myBox là một mảng có một phần tử có hình dạng chính. Ta in nó ra với cùng một cú pháp với thuộc tính object:
{{ myBox.shape }}Ngoài ra, bạn có thể đặt các biến mới trong file mẫu bằng cách sử dụng dấu phân cách Twig khác {%%} :
{% set shape = 'square' %}Bộ lọc
Một điều thú vị về Twig là sự sẵn có của một số bộ lọc rất hữu ích và dễ sử dụng. Bạn hỏi bộ lọc là gì? Cách dễ nhất để giải thích là với một ví dụ:
{{ shape|upper }}Điều này sẽ xuất ra giá trị của biến hình dạng bằng tất cả các chữ cái viết hoa. Và bạn thậm chí có thể kết hợp nhiều bộ lọc nếu bạn muốn:
{{ shape|upper|trim }}Điều này cũng cắt bỏ các khoảng trống ở đầu và cuối của giá trị biến. Ngoài ra, bạn có thể áp dụng bộ lọc cho toàn bộ khối:
{% filter upper %}
This box is {{ shape }}.
{% endfilter %}Câu lệnh trên sẽ biến mọi thứ bên trong khối lọc thành các chữ cái viết hoa.
Bạn có rất nhiều bộ lọc tiện dụng mà bạn có thể xem trên trang web tài liệu Twig. Một số thậm chí còn lấy các đối số, chẳng hạn như bộ lọc ngày trong đó bạn chỉ định định dạng mà bạn muốn biến ngày hiển thị. Nếu bạn đang học Twig, bạn sẽ thấy mình thường đến đó để kiểm tra nội dung.
Cấu trúc điều khiển
Vì không có file mẫu nào có thể đi mà không có vòng lặp hoặc câu lệnh if / else, Twig cũng cho phép bạn sử dụng các cấu trúc điều khiển khác nhau cho dữ liệu của bạn . Ví dụ: đây là cách bạn thực hiện lặp lại foreach thông thường:
{% for shape in shapes %}
{{ shape }}
{% endfor %}
Thao tác này sẽ lặp qua mảng hình dạng và in ra từng hình dạng . Câu lệnh if / else trông giống như sau:
{% if shape is defined %}
{{ shape }}
{% endif %}Điều này sẽ in ra biến hình dạng chỉ khi nó được cài đặt . Thông tin thêm về cấu trúc điều khiển bạn có thể tìm thấy trên trang tài liệu Twig.
Bao gồm và Kế thừa Mẫu
Twig có một tính năng rất mạnh cho phép bạn bao gồm các mẫu bên trong nhau. Hãy minh họa:
{% include 'header.html' %}Câu lệnh này sẽ tải file header.html và hiển thị file trong ngữ cảnh hiện tại của mẫu bao gồm nó. Điều này nghĩa là nó có quyền truy cập vào tất cả các biến có sẵn cho mẫu bao gồm. Đây là một tính năng tuyệt vời cho phép bạn giữ nhiều file nhưng sạch hơn nhiều.
Ngoài ra, kế thừa là một tính năng khác và thậm chí còn mạnh mẽ hơn trong Twig. Nó cho phép bạn tạo các mẫu mà bạn xác định các khối và sau đó mở rộng chúng bằng các mẫu khác có thể overrides nội dung mặc định trong các khối này hoặc thêm nội dung mới vào chúng. Một ví dụ nhanh:
Mẫu A ( layout.html ) chứa những điều sau đây (hãy nhớ rằng đây chỉ là một ví dụ):
<div class=”eight columns”>{% block mainContent %}{% endblock %}</div>
<div class=”four columns”>{% block rightSidebar %}{% endblock %}</div>Như bạn thấy , không có nội dung nào trong các khối được xác định. Ta có thể thêm một số nếu ta muốn. Nhưng mẫu B cũng có thể mở rộng mẫu này và thêm nội dung vào các khối đó:
{% extends "layout.html" %}
{% block mainContent %}Some page text{% endblock %}
{% block rightSidebar %}Some sidebar content{% endblock %}
Điều xảy ra ở đây là mẫu B mở rộng mẫu A (về cơ bản mẫu A được tải và hiển thị trên trang) nhưng cũng điền vào các khối được xác định của nó hiện đang trống. Nếu các khối trong mẫu A có nội dung, mẫu B sẽ overrides lên nội dung đó trong ví dụ trên. Để thêm vào nội dung hiện có thay vì overrides , nó sẽ phải giống như sau:
{% block mainContent %}
{{ parent() }}
Some page text
{% endblock %}Vì vậy, khối mainContent bây giờ tải những gì có trong khối cha mà nó mở rộng, in nó ra và thêm vào bên dưới một số nội dung khác.
Một số điểm chính cần đề cập. Khối mở rộng phải là thứ đầu tiên trên trang web nếu bạn muốn mở rộng một mẫu. Ngoài ra, nếu bạn làm điều này, bạn không thể có nội dung bên ngoài các khối được xác định trong mẫu bạn đang mở rộng. Do đó trong mẫu B, tất cả nội dung bạn thêm phải đi vào một trong các khối được xác định trong mẫu A.
Thông tin thêm về kế thừa qua thẻ mở rộng, bạn có thể đọc trên trang tài liệu Twig.
Kết luận
Trong bài viết này, ta đã tìm hiểu sâu hơn một chút về việc sử dụng Twig để xây dựng các trang mẫu. Ta đã thấy cách sử dụng hệ thống comment , in ra các biến (cả đơn giản và phức tạp như mảng và đối tượng), sử dụng cấu trúc điều khiển để có kết quả động hơn và cách bao gồm và mở rộng các mẫu. Còn rất nhiều việc bạn có thể làm trong các file cành cây và tôi khuyến khích bạn nên kiểm tra chúng.
Và nếu bạn muốn sử dụng các khuôn khổ PHP, Twig là công cụ tạo khuôn mẫu mặc định cho Symfony2, vì vậy hãy ghi nhớ điều đó. Ngoài ra, bản phát hành Drupal 8 lớn sắp tới cũng sẽ sử dụng Twig để tạo khuôn mẫu.
Các tin liên quan
