Do có 1 anh hỏi mình về vấn đề làm sao để tạo được chuyên mục tin dạng như hình demo sau thì bữa nay mình sẽ thực hiện hướng dẫn để các bạn có thể thực hiện được theo một cách dễ dàng nhất. Cách này cũng không có gì khó, chủ yếu can thiệp một chút vào php với một số quy luật nhất định cùng với cách sắp xếp thẻ html sao cho hợp lý là ra kết quả như mong muốn.
Mình thực hiện trên mã nguồn mở NukeViet vì thế bạn nào dùng NukeViet dễ hiểu hơn chút vì code cũng thoáng hơn chứ ko rối rắm đóng mở thẻ php.
Lưu ý: ở đây là mình copy file theme.php của module news sang thư mục news của themes thay vì ở trong module vì vấn đề sau này có nâng cấp nó cũng không tèo luôn file theme.php này. Sau đó thì mình chỉ tiến hành sửa file theme.php trong thư mục news của theme đang dùng mà thôi vì nó ưu tiên trước nếu không có nó mới quay về theme.php của module
Đầu tiên bạn cần tìm tới function:
Bạn kéo xuống dòng 379 có nội dung là “$a = 0;” bạn thêm vào sau nó thẻ biến sau
Tiếp đến bạn tìm tới dòng
Bạn thay nó bằng đoạn mã sau
Ỹ nghĩa của việc thay kia đó là mình điều kiện cho biến $_first nếu tồn tại thì thực hiện tạo ảnh thumbnail cho tin đầu tiên trong danh sách tin bên trái của main-right và gán nó sang biến khác để thực hiện hiển thị và ngược lại là các tin tiếp theo hiển thị như bình thường trừ tin vừa kiểm tra ra để không bị lặp lại.
Tiếp theo bạn cần tiến hành thay thế các thẻ html sao cho đúng thì nó mới thực hiện hiển thị
Bạn mở file viewcat_main_right.tpl và tìm tới thẻ
Thêm vào dưới thẻ đó mã lệnh sau
<div class="feature-1"> <a class="thumbs img_80_45" href="{OTHER.link}" title="{OTHER.title}"> <img src="{OTHER_HOMEIMG}" alt="{OTHER_HOMEIMGALT}" width="{IMGWIDTH}" /> </a> <a href="{OTHER.link}" title="{OTHER.title}"> {OTHER.title} </a> </div>code-box
Tiếp đến bạn tìm tới
Thay bằng mã lệnh sau
Mình thực hiện trên mã nguồn mở NukeViet vì thế bạn nào dùng NukeViet dễ hiểu hơn chút vì code cũng thoáng hơn chứ ko rối rắm đóng mở thẻ php.
Lưu ý: ở đây là mình copy file theme.php của module news sang thư mục news của themes thay vì ở trong module vì vấn đề sau này có nâng cấp nó cũng không tèo luôn file theme.php này. Sau đó thì mình chỉ tiến hành sửa file theme.php trong thư mục news của theme đang dùng mà thôi vì nó ưu tiên trước nếu không có nó mới quay về theme.php của module
Đầu tiên bạn cần tìm tới function:
function viewsubcat_main($viewcat, $array_cat)code-box
Bạn kéo xuống dòng 379 có nội dung là “$a = 0;” bạn thêm vào sau nó thẻ biến sau
$_first = true;
code-box
Tiếp đến bạn tìm tới dòng
$xtpl->assign('OTHER', $array_row_i);
if ($module_config[$module_name]['showtooltip']) {
$xtpl->parse('main.listcat.related.loop.tooltip');
}
$xtpl->parse('main.listcat.related.loop');code-box
Bạn thay nó bằng đoạn mã sau
if ($_first) { $_first = false; $xtpl -> assign('OTHER', $array_row_i); if ($array_row_i['imghome'] != "") { $xtpl->assign('OTHER_HOMEIMG', $array_row_i['imghome']); $xtpl->assign('OTHER_HOMEIMGALT', ! empty($array_row_i['homeimgalt']) ? $array_row_i['homeimgalt'] : $array_row_i['title']); } } else { $xtpl -> assign('OTHER_LIST', $array_row_i); if ($module_config[$module_name]['showtooltip']) { $xtpl->parse('main.listcat.related.loop.tooltip'); } $xtpl->parse('main.listcat.related.loop'); }
code-box
Ỹ nghĩa của việc thay kia đó là mình điều kiện cho biến $_first nếu tồn tại thì thực hiện tạo ảnh thumbnail cho tin đầu tiên trong danh sách tin bên trái của main-right và gán nó sang biến khác để thực hiện hiển thị và ngược lại là các tin tiếp theo hiển thị như bình thường trừ tin vừa kiểm tra ra để không bị lặp lại.
Tiếp theo bạn cần tiến hành thay thế các thẻ html sao cho đúng thì nó mới thực hiện hiển thị
Bạn mở file viewcat_main_right.tpl và tìm tới thẻ
“<div class=”col-md-8″>”
Thêm vào dưới thẻ đó mã lệnh sau
Tiếp đến bạn tìm tới
<a class="show h4" href="{OTHER.link}" title="{OTHER.title}" <!-- BEGIN: tooltip -->data-content="{OTHER.hometext}" data-img="{OTHER.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip -->>{OTHER.title}</a>
code-box
Thay bằng mã lệnh sau
<a href="{OTHER_LIST.link}" title="{OTHER_LIST.title}" <!-- BEGIN: tooltip -->data-content="{OTHER_LIST.hometext}" data-img="{OTHER_LIST.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip -->>{OTHER_LIST.title}</a>
code-box
Nguồn: thinhweb.com
Tags:
Nukeviet