1 Tháng 4, 2017 Tác giả: Thịnh Nguyễn Chuyên mục: NukeViet Themes

Hướng dẫn cách viết block dành cho giao diện website nukeviet

Xin chào các bạn, hôm nay Thịnh sẽ hướng dẫn các bạn cách viết một block dành cho giao diện website trên nền tảng mã nguồn mở NukeViet. Với block này bạn có thể nhúng thêm code nhạc từ bên ngoài hay bất kỳ những gì bạn muốn. Nhưng trước tiên là để giải đáp một số câu hỏi của một số bạn đã bình luận trên blog của mình. Để không dài dòng văn tự mình đi vào vấn đề luôn

Block giao diện là block được đặt tại thư mục blocks nằm trong thư mục themes mà bạn đang sử dụng và nó gồm có 3 tập tin sau nhưng sẽ có 2 tập tin bắt buộc là php và tpl.

  • Tập tin có đuôi .ini nếu bạn thêm thiết lập cho block
  • Tập tin có đuôi .tpl
  • Tập tin có đuôi .php

Nhưng vì block bạn đính kèm từ trang nhạc hay nội dung nào đó mà không sử dụng cấu hình block thì mình sẽ bỏ qua tập tin .ini và chỉ hướng dẫn các bạn viết trên tập tin .tpl và .php.

Tập tin .php

Tập tin .php là tập tin chữa các đoạn mã bằng ngôn ngữ php để hệ thống nhận diện nó là block theme và trong tập tin này có những nội dung như sau.


<?php

/**
* @Project NUKEVIET 4.x
* @Author Thinhweb Blog (thinhwebhp@gmail.com)
* @Copyright (C) 2017 Thinhweb Blog. All rights reserved
* @License GNU/GPL version 2 or any later version
* @Createdate Sun, 27 Mar 2017 12:41:32 GMT
*/

Đầu tập tin là thông tin của project, tác giả, bản quyền, licese, thời gian thực hiện.

Tiếp theo là khai báo với hệ thống mặc định nó là block với lệnh sau


if( ! defined( 'NV_MAINFILE' ) ) die( 'Stop!!!' );

Tiếp đến bạn khai báo tên block thông qua function. ví dụ ở đây mình khai báo function là nv_copyright với lệnh sau.


if( ! nv_function_exists( 'nv_copyright' ) )
{

// noi dung code nam trong day

}

Để hiển thị ngoài site thì bạn truyền nó qua $content với lệnh sau


if( defined( 'NV_SYSTEM' ) )
{
     $content = nv_copyright( $block_config );
}

Với đoạn mã trong phần nv_copyright bạn viết nội dung như sau và mình comment nội dung trong đó luôn


function nv_copyright( $block_config )
{
   global $global_config, $site_mods;

   // khai báo thư viện global cho block

   if( file_exists( NV_ROOTDIR . '/themes/' . $global_config['module_theme'] . '/blocks/global.copyright.tpl' ) )
   {
      $block_theme = $global_config['module_theme'];
   }
   elseif( file_exists( NV_ROOTDIR . '/themes/' . $global_config['site_theme'] . '/blocks/global.copyright.tpl' ) )
   {
      $block_theme = $global_config['site_theme'];
   }
   else
   {
      $block_theme = 'default';
   }

   $xtpl = new XTemplate( 'global.copyright.tpl', NV_ROOTDIR . '/themes/' . $block_theme . '/blocks' );

   // Đoạn này khai báo gọi tới file global.copyright.tpl nằm trong cùng thư mục với file php của block này.

   $xtpl->assign( 'NV_BASE_SITEURL', NV_BASE_SITEURL );

   //Khai báo NV_BASE_SITEURL để sử dụng trong file tpl

   $xtpl->assign( 'BLOCK_THEME', $block_theme );

   // Khai bao block_theme để sử dụng trong file tpl

   $xtpl->parse( 'main' );

   return $xtpl->text( 'main' );
}

Sau khi bạn viết xong đoạn code trên bạn chuyển qua file .tpl

Tập tin .tpl

Trong tập tin .tpl bạn điền đoạn mã khai báo bắt đầu và kết thúc sau đó điền nội dung bạn nhúng vào trong nó.


<!-- BEGIN: main -->

// nội dung bạn cần nhúng vô đây

<!-- END: main -->

Như vậy là xong, sau khi viết xong bạn bật kéo thả block và thêm block giao diện này vào website là được. Chúc các bạn thành công

Tác giả: Thịnh Nguyễn

Chuyên gia chia sẻ kiến thức về lập trình, thiết kế web và tối ưu hệ thống server.

Chia sẻ bài viết này:

0 bình luận

Để lại bình luận của bạn

Địa chỉ email của bạn sẽ không được công bố rộng rãi. Các trường bắt buộc được đánh dấu *

Bài viết liên quan

Hướng dẫn bổ sung tính năng tin nổi bật vào giao diện module news nukeviet

Nếu như website của bạn đang sử dụng là NukeViet thì chắc hẳn bạn sẽ hỏi tại sao website của bạn không có tính năng nổi bật ở module news. Tuy nhiên điều này không có khó khăn gì và sau đây Thịnh sẽ hướng dẫn các bạn thêm tính năng tin nổi bật vào […]

Xem chi tiết →

Hướng dẫn thêm hình ảnh làm icon chuyên mục của module news NukeViet

Như các bạn đã biết thì hiện nay đối vớ module news của website sử dụng NukeViet sẽ không hiện tất cả các tính năng mà bạn thêm vào trong admin. Chính vì vậy bạn cần phải thực hiện viết một đoạn mã để hiển thị icon chuyên mục ra ngoài site cũng như loại […]

Xem chi tiết →

Cấu trúc themes khi thiết kế giao diện website NukeViet

Themes là giao diện của một website được cấu thành từ các template khác nhau của từng vị trí trên site để tạo lên một giao diện website hoàn chỉnh. Tuy nhiên không phải ai cũng rành về những thứ như vậy đặc biệt với những người mới làm quen tới lập trình thiết kế […]

Xem chi tiết →