Tạo cách trình bày tin mới nhất lên trên và tin khác nằm dưới

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:

function viewsubcat_main($viewcat, $array_cat)

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;

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');

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');
}

Ỹ 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

<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>

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>

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>

Mọi thắc mắc các bạn có thể để lại bình luận để mọi người có thể theo dõi và cùng chia sẻ hướng giải quyết