2. Layout Template
2.4.Thêm thực hiện của riêng bạn để file layout template
Trên cả 2 tập tin vừa được tạo ra 1_3_columns.tpl và 1_3_columns.wap.tpl đều trống. 1_3_columns.png là mặc định hình ảnh mà không đại diện cho bố trí thực tế mẫu chúng ta cần phải tạo ra. Các bước tiếp theo là để bổ sung mã riêng của chúng tôi để hai tập tin mẫu.
Mở tập tin 1_3_columns.tpl với trình soạn thảo ưa thích của bạn, thêm các mã sau đây, và sau đó lưu nó.
46
<div class="columns-1-3" id="main-content" role="main"> <table class="portlet-layout">
<tr>
<td class="portlet-column portlet-column-only" id="column-1" colspan="3"> $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only") </td> </tr> <tr>
<td class="aui-w33 portlet-column portlet-column-first" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</td>
<td class="aui-w33 portlet-column" id="column-3">
$processor.processColumn("column-3", "portlet-column-content") </td>
<td class="aui-w33 portlet-column portlet-column-last" id="column-4"> $processor.processColumn("column-4", "portlet-column-content portlet-column-content-last") </td> </tr> </table>
47
</div>
Xin để ý rằng mẫu này bố trí có hai dòng: dòng đầu tiên chỉ có một cột và hàng thứ hai có ba cột như nhau rộng. Mỗi tế bào được xác định bởi các hàng và cột có một ID duy nhất, chẳng hạn như cột-1, cột 2, cột 3, và cột 4. ID duy nhất này là quan trọng để làm cho portlet bên phải (s) đặt ở bên phải trên trang cổng thông tin mẫu này bố trí đã được áp dụng.
Bây giờ chúng tôi chép đoạn code tương tự từ 1_3_columns.tpl tập tin 1_3_columns.wap.tpl.
Bạn có thể sửa đổi tập tin 1_3_columns.wap.tpl như bạn muốn làm mới thiết kế của bạn bố trí mẫu cho các thiết bị di động.
Điều thứ ba chúng ta cần làm là sử dụng một chương trình thao tác hình ảnh như GIMP hoặc Adobe Photoshop để tạo ra một 1_3_columns.png trông giống như những gì các layout template được thể hiện.