dwt là tệp mẫu cho trang chủ - soi keo truc tiep

Việc phát triển một giao diện hoàn toàn mới từ đầu là không thực tế. Cách đơn giản và thô bạo nhất chính là sao chép một giao diện hiện có, sau đó tiến hành sửa đổi dần dần dựa trên bản sao này.

Khởi tạo

Bạn chỉ cần sao chép một giao diện có sẵn trong thư mục themes ở gốc dự án để bắt đầu quá trình phát triển. Ví soi keo truc tiep dụ, nếu bạn muốn phát triển một giao diện giống trang web JD.com:

cp -R default jd

Giải thích cấu trúc thư mục giao diện

• Các tệp .dwt là các tệp giao diện. Chẳng hạn, index.dwt là tệp mẫu cho trang chủ. Định dạng .dwt được sử dụng bởi Dreamweaver Template.
• Các tệp .lbi là các tệp thư viện (library). Chúng hoạt động tương tự như các tệp template tái sử dụng trong Laravel blade được đưa vào bằng lệnh include.
• Tệp style.css là tệp chứa mã CSS. Đồng thời, phần đầu của tệp này cũng ghi chú thông tin về giao diện và người phát triển.

Bước đầu tiên

Chỉnh sửa tệp style.css để thay đổi tên giao diện và thông tin tác giả thành của bạn. Sau đó, đăng nhập vào bảng điều khiển quản trị của ecshop và chuyển sang giao diện mới.

Ngôn ngữ mẫu được sử dụng trong ecshop

Tại sao keo truc tiep lại tồn tại cả hai cú pháp sau đây?

<!-- #BeginLibraryItem "/library/xxx.lbi" --><!-- #EndLibraryItem -->

và

{include file="/library/xxx.lbi"} [b29 club](/blog/running-frequency/) 

Cú pháp include chắc chắn là cú pháp của smarty, điều này không có gì đáng bàn. Nhưng BeginLibraryItem thì là gì? Khi xem xét vào tập tin includes/cls_template.php, ta có thể thấy rằng hai cú pháp này thực chất là tương đương nhau. Ecshop sẽ tự động chuyển đổi BeginLibraryItem thành include.

1073       /* Thay thế tất cả các library trong mẫu bằng */
1074       $pattern   = '/<!--\s#BeginLibraryItem\s\"\/(.*?)\"\s-->.*?<!--\s#EndLibraryItem\s-->/se';
1075       $replacement = "'{include file='.strtolower('\\1'). '}'";
1076       $source   = preg_replace($pattern, $replacement, $source);

Một ngôn ngữ mẫu kỳ quái khác xuất hiện:

<!-- {if $new_goods} -->

Tuy nhiên, còn có kiểu như sau:

{if $cat_rec[2]}

Vẫn trong cls/template.php, chúng ta tìm thấy câu trả lời:

1136     $pattern = array(
1137       '/<!--[^>|\n]*?({.+?})[^<|{|\n]*?-->/', // Thay thế chú thích smarty
1138       '/<!--[^<|>|{|\n]*?-->/',        // Thay thế chú thích html không xuống dòng
1139       '/(href=["|\'])\.\.\/(.*?)(["|\'])/i', // Thay thế đường dẫn tương đối
1140       '/((?:background|src)\s*=\s*["|\'])(?:\.\/|\.\.\/)?(images\/.*?["|\'])/is', // Thêm $tmp_dir trước images
1141       '/((?:background|background-image):\s*?url\()(?:\.\/|\.\.\/)?(images\/)/is', // Thêm $tmp_dir trước images
1142       '/([\'|"])\.\.\//is', // Sửa tất cả các đường dẫn bắt đầu bằng ../ thành rỗng
1143       );
1144     $replace = array(
1145       '\1',
1146       '',
1147       '\1\2\3',
1148       '\1' . $tmp_dir . '\2',
1149       '\1' . $tmp_dir . '\2',
1150       '\1'
1151       );

Biểu thức chính quy đầu tiên sẽ chuyển đổi kiểu chú thích kỳ lạ này thành cú pháp smarty.

Ôi trời ơi, dòng giao diện bẩn thỉu này, tại sao tôi còn phải đọc tiếp?

Bởi vì nếu không hiểu rõ bộ giao diện kỳ quặc này, bạn sẽ chẳng thể chỉnh sửa nó thêm được nữa...

Sự khác biệt giữa insert và include trong giao diện

{insert name='ads' id=$ads_id num=$ads_num}

Điều này tương ứng với hàm insert_ads trong tập tin includes/lib_insert.php. Câu hỏi đặt ra là tại sao cần dùng insert khi mà theo kinh nghiệm làm việc với các framework hiện đại như Laravel, việc chỉ cần include một tệp lbi là đã đủ rồi chứ?

Xét ví dụ sau:

234 function insert_member_info()
235 {
236   $need_cache = $GLOBALS['smarty']->caching;
237   $GLOBALS['smarty']->caching = false;
238
239   if ($_SESSION['user_id'] > 0)
240   {
241     $GLOBALS['smarty']->assign('user_info', get_user_info());
242   }
243   else
244   {
245     if (!empty($_COOKIE['ECS']['username']))
246     {
247       $GLOBALS['smarty']->assign('ecs_username', stripslashes($_COOKIE['ECS']['username']));
248     }
249     $captcha = intval($GLOBALS['_CFG']['captcha']);
250     if (($captcha & CAPTCHA_LOGIN) && (!($captcha & CAPTCHA_LOGIN_FAIL) || (($captcha & CAPTCHA_LOGIN_FAIL) && $_SESSION['login_fail'] > 2)) && gd_version() > 0)
251     {
252       $GLOBALS['smarty']->assign('enabled_captcha', 1);
253       $GLOBALS['smarty']->assign('rand', mt_rand());
254     }
255   }
256   $output = $GLOBALS['smarty']->fetch('library/member_info.lbi');
257
258   $GLOBALS['smarty']->caching = $need_cache;
259
260   return $output;
261 }

Từ hàm insert_member_info, ta dễ dàng nhận ra rằng đây là cách tiếp cận mô-đun hóa. Trước tiên, logic lấy dữ liệu được thực thi, sau đó dữ liệu được điền vào tệp lbi tương ứng, thay vì truyền tất cả các biến vào khi render tệp dwt. Điều này tương tự như khái niệm view composer trong Laravel, dù rằng view composer của Laravel tinh tế hơn hàng nghìn lần.