FuelPHP - Chủ đề

Các chủ đề được sử dụng để tạo ra nhiều giao diện cho ứng dụng. Nó cung cấp tùy chọn cho người dùng / nhà phát triển để thay đổi giao diện của ứng dụng mà không làm ảnh hưởng đến chức năng của ứng dụng. Một ứng dụng có thể có một hoặc nhiều chủ đề. Mỗi chủ đề nằm trong thư mục riêng của nó. Hãy để chúng tôi tìm hiểu cách tạo chủ đề trong chương này.

Cấu hình chủ đề

FuelPHP cung cấp một tệp cấu hình riêng cho các chủ đề, fuel/app/config/themes.php. Tất cả các cài đặt liên quan đến chủ đề được định cấu hình trong tệp này. Một số cài đặt chủ đề chính như sau:

  • active - Tên của chủ đề hoạt động

  • fallback - Tên của chủ đề dự phòng, nếu chủ đề hoạt động không được tìm thấy

  • paths - Mảng đường dẫn để tìm kiếm và tìm chủ đề

  • assets_folder- Thông thường, nội dung cần phải ở bên trong DOCPATH để có thể truy cập thông qua web. Nó đề cập đến thư mục nội dung cho các chủ đề bên trong DOCPATH

  • view_ext - Phần mở rộng của tệp xem của chủ đề

  • info_file_name - Tệp có thông tin mở rộng về các chủ đề

  • require_info_file - Có yêu cầu tệp thông tin chủ đề, info_file_name hay không

  • use_modules - Có sử dụng mô-đun hiện tại hay không

Cấu hình đơn giản cho tệp chủ đề như sau.

<?php  
   return array ( 
      'active' => 'tpthemes', 
      'fallback' => 'tpthemes', 
      'paths' => array ( 
         APPPATH.'themes', 
      ), 
      'assets_folder' => 'assets', 
      'view_ext' => '.html', 
      'require_info_file' => false, 
      'info_file_name' => 'themeinfo.php', 
      'use_modules' => false, 
   );

Ở đây chúng tôi đã thiết lập,

  • Tên của chủ đề hoạt động và dự phòng dưới dạng tpthemes
  • Đường dẫn của thư mục chủ đề dưới dạng nhiên liệu / ứng dụng / chủ đề /
  • Đường dẫn của thư mục nội dung là / public / asset / tpthemes /

Lớp chủ đề

Sau khi cấu hình xong, chúng ta có thể sử dụng lớp Theme do FuelPHP cung cấp để thực hiện chức năng của theme. Hãy cho chúng tôi biết về các phương thức có sẵn trong lớp Chủ đề trong chương này.

ví dụ

phương thức instance cho phép tạo một chủ đề mới. Nó có hai tham số sau,

  • $name - Tên của chủ đề (tùy chọn)

  • $config - Mảng cấu hình chủ đề (giống như đã thấy trong phần cấu hình)

Cả hai thông số đều là tùy chọn. Nếu không có tham số nào được chỉ định, nó sẽ cố gắng lấy chủ đề mặc định từ tệp cấu hình. Nếu tên chủ đề được chỉ định, nó sẽ cố gắng lấy các cài đặt khác từ tệp cấu hình. Nếu cấu hình cũng được chỉ định, thì nó sẽ sử dụng cài đặt do người dùng chỉ định thay vì cài đặt từ tệp cấu hình.

$theme = \Theme::instance(); 
$theme = \Theme::instance('tpthemes'); 
$theme = \Theme::instance ('mytheme', array ( 
   'active' => 'mytheme', 'view_ext' => '.php'));

làm giả

forge tương tự như instance, ngoại trừ nó chỉ có mảng cấu hình.

$theme = \Theme::forge (array( 
   'active'   => 'tpthemes', 
   'fallback' => 'tpthemes', 
   'view_ext' => '.php', 
));

lượt xem

phương pháp xem sử dụng View::forge()trong nền. Cả hai API đều tương tự nhau ngoại trừ phương pháp xem tìm kiếm tệp chế độ xem trong thư mục chủ đề, fuel / app / themes / tpthemes / thay vì fuel / app / views / folder.

$theme = \Theme::instance(); 
$view = $theme->view('template/index'); 
// *fuel/app/themes/tpthemes/template/index.php

người thuyết trình

phương pháp trình bày sử dụng Presenter::forge()trong nền. Cả hai API đều tương tự nhau ngoại trừ phương thức trình bày tìm kiếm tệp chế độ xem trong thư mục chủ đề, fuel / app / themes / tpthemes / thay vì fuel / app / views / folder.

$theme = \Theme::instance(); 
$presenter = $theme->presenter('template/index');

asset_path

Phương thức asset_path trả về đường dẫn đến nội dung được yêu cầu liên quan đến chủ đề hiện được chọn.

$theme = \Theme::instance();  

// public/assets/tpthemes/css/style.css 
$style = \Html::css($theme->asset_path('css/style.css'));

add_path

Phương thức add_path cho phép thêm một đường dẫn chủ đề trong thời gian chạy.

$theme = \Theme::instance(); 
$theme->add_path(DOCROOT.'newthemes');

add_paths

Phương thức add_paths cho phép thêm nhiều đường dẫn chủ đề trong thời gian chạy.

$theme = \Theme::instance();   
$theme->add_path(DOCROOT.'newthemes');

hoạt động

phương thức hoạt động cho phép thiết lập chủ đề hoạt động.

$theme = \Theme::instance(); 
$active = $theme->active('newtheme');

dự phòng

phương pháp dự phòng cho phép thiết lập chủ đề dự phòng.

$theme = \Theme::instance();
$fallback = $theme->fallback('custom');

get_template

phương thức get_template sẽ trả về phiên bản View của mẫu chủ đề hiện đang được tải.

$theme = \Theme::instance(); 
$theme->get_template()->set('body', 'Theme can change the look and feel of your app');

set_template

Phương thức set_template cho phép thiết lập mẫu chủ đề cho trang.

$theme = \Theme::instance(); 
$theme->set_template('layouts/index')->set('body', 'set theme template');

tìm thấy

find trả về true, nếu đường dẫn đến theme được tìm thấy, ngược lại nó trả về false.

$theme = \Theme::instance(); 
$path = $theme->find('newtheme')

tất cả

all method trả về một mảng tất cả các chủ đề trong tất cả các đường dẫn chủ đề.

$theme = \Theme::instance(); 
$themes = $theme->all();

nhận thông tin

Phương thức get_info trả về một biến cụ thể từ mảng thông tin chủ đề. Nếu không có chủ đề nào được chỉ định, mảng thông tin của chủ đề đang hoạt động sẽ được sử dụng.

$theme = \Theme::instance(); 
$var = $theme->get_info('color', 'green', 'newtheme');

Ở đây, phương thức lấy màu được định nghĩa trong 'newtheme'. Nếu nó không được xác định, thì nó sẽ sử dụng 'xanh lá cây' làm màu mặc định.

set_info

Phương thức set_info đặt một biến trong chủ đề hoạt động hoặc dự phòng.

$theme->set_info('color', 'green', 'fallback');

set_partial

Phương thức set_partial cho phép đặt một phần chế độ xem cho phần được đặt tên trong mẫu trang của bạn. Thông thường, nó được thực hiện thông qua cuộc gọi HMVC.

$theme = \Theme::instance(); 
$theme->set_template('layouts/homepage'); 
$theme->set_partial('navbar', 'homepage/navbar');

get_partial

Phương thức get_partial cho phép lấy phiên bản dạng xem của một phần đã đặt trước đó trong phần được đặt tên của mẫu trang của bạn.

$theme = \Theme::instance(); 
$theme->set_partial('sidebar', 'partials/menu'); 
$theme->get_partial('sidebar', 'partials/menu')->set('class', 'menu green');

Ví dụ làm việc

Hãy để chúng tôi thêm hỗ trợ chủ đề trong ứng dụng nhân viên của chúng tôi.

Step 1 - Thêm tệp cấu hình chủ đề mới, fuel / app / config / theme.php với nội dung sau.

<?php  
   return array ( 
      'active' => 'tpthemes',
      'fallback' => 'tpthemes', 
      'paths' => array (APPPATH.'themes', ), 
      'assets_folder' => 'assets', 
      'view_ext' => '.html', 
      'require_info_file' => false, 
      'info_file_name' => 'themeinfo.php', 
      'use_modules' => false, 
   );

Step 2 - Thêm thư mục tài sản mới, công khai / tài sản / tpthemes / css cho chủ đề, tpthemes.

cd /go/to/app/root/path 
mkdir -p public/assets/tpthemes/css

Step 3 - Tải xuống bootstrap mới nhất và đặt bootstrap.min.css dưới public / asset / tpthemes / css

Step 4 - Thêm thư mục mới, tpthemes trong thư mục fuel / app / themes.

cd /go/to/app/root/path   
mkdir -p fuel/app/themes/tpthemes

Step 5 - Thêm mẫu bố cục mới, bootstrap.html trong fuel / app / themes / tpthemes / layout / và thêm mã sau.

<!DOCTYPE html> 
<html lang = "en"> 
   <head> 
      <title>Theme example</title> 
      <meta charset = "utf-8"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <!-- Bootstrap core CSS --> 
      <?php echo \Theme::instance()->asset->css('bootstrap.min.css'); ?> 
   </head> 
   
   <body> 
      <?php echo $header; ?> 
      <div class = "container"> 
         <div class = "row">
            <div class = "col-sm-12"> 
               <?php echo $content; ?> 
            </div> 
         </div> 
      </div> 
   </body>
   
</html>

Ở đây, chúng tôi đã sử dụng phương thức đối tượng và tài sản của chủ đề để lấy đường dẫn của tệp bootstrap. Chúng tôi đã xác định hai biến, tiêu đề và nội dung.header được định nghĩa để đặt động chi tiết tiêu đề. content được định nghĩa để đặt động nội dung thực của trang.

Step 6 - Thêm mẫu tiêu đề mới, header.php tại fuel / app / themes / tpthemes / partials như sau.

<div class = "jumbotron text-center">
   <h1>Theme support in fuelphp</h1> 
   <p>bootstrap based template</p>  
</div>

Step 7 - Tạo bộ điều khiển mới, ThemeSample tại fuel / app / class / controller / themesample.php và action tại action_index như sau.

<?php  
   class Controller_ThemeSample extends \Controller { 
      public function before() { 
         $this->theme = \Theme::instance(); 
         $this->theme->set_template('layouts/bootstrap');  
         $header = $this->theme->view('partials/header'); 
         $this->theme->get_template()->set('header', $header); 
      }  
      public function action_index() { 
         $content = $this->theme 
         ->view('themesample/index') 
         ->set('message', 'This data comes from action page');  
         $this->theme 
         ->get_template() 
         ->set('content', $content); 
      } 
      public function after($response) { 
         if (empty($response) or  ! $response instanceof Response) { 
            $response = \Response::forge(\Theme::instance()->render()); 
         } 
         return parent::after($response); 
      } 
   }

Ở đây, chúng tôi đã sử dụng beforeafter phương pháp để khởi tạo chủ đề bằng cách sử dụng các phương thức của Themelớp học. Một số phương thức được sử dụng là instance, get_template, set_template và view.

Step 8 - Cuối cùng, thêm view cho action index, index.php tại fuel / app / themes / tpthemes / themesample như sau.

<p>The data comes from *fuel/app/themes/tpthemes/themesample/index.html* file.</p> 
<p> 
   <?php echo $message; ?> 
</p>

Ở đây, chúng tôi đã xác định một biến, thông báo, cần được đặt động trong bộ điều khiển.

Chúng tôi đã tạo một chủ đề mới, tpthemes và sử dụng nó trong ThemeSamplebộ điều khiển. Bây giờ chúng ta hãy kiểm tra kết quả bằng cách yêu cầu URL, http: // localhost: 8080 / themesample / index. Kết quả là như sau.