FuelPHP - ธีม

ธีมใช้เพื่อเปิดใช้งานรูปลักษณ์ที่หลากหลายสำหรับแอปพลิเคชัน มีตัวเลือกสำหรับผู้ใช้ / ผู้พัฒนาในการเปลี่ยนรูปลักษณ์ของแอปพลิเคชันโดยไม่รบกวนการทำงานของแอปพลิเคชัน แอปพลิเคชันสามารถมีได้ตั้งแต่หนึ่งธีมขึ้นไป แต่ละธีมอยู่ในโฟลเดอร์ของตัวเอง ให้เราเรียนรู้วิธีสร้างธีมในบทนี้

การกำหนดค่าธีม

FuelPHP มีไฟล์การกำหนดค่าแยกต่างหากสำหรับธีม fuel/app/config/themes.php. การตั้งค่าที่เกี่ยวข้องกับธีมทั้งหมดได้รับการกำหนดค่าในไฟล์นี้ การตั้งค่าธีมหลักบางส่วนมีดังนี้ -

• active - ชื่อของธีมที่ใช้งานอยู่

• fallback - ชื่อของธีมทางเลือกหากไม่พบธีมที่ใช้งานอยู่

• paths - อาร์เรย์ของเส้นทางในการค้นหาและค้นหาธีม

• assets_folder- โดยปกติเนื้อหาต้องอยู่ใน DOCPATH จึงจะสามารถเข้าถึงได้ทางเว็บ หมายถึงโฟลเดอร์เนื้อหาสำหรับธีมภายใน DOCPATH

• view_ext - ส่วนขยายของไฟล์มุมมองของธีม

• info_file_name - ไฟล์ที่มีข้อมูลเพิ่มเติมเกี่ยวกับธีม

• require_info_file - ต้องการไฟล์ข้อมูลธีมหรือไม่ info_file_name

• use_modules - ไม่ว่าจะใช้โมดูลปัจจุบันหรือไม่

การกำหนดค่าอย่างง่ายสำหรับไฟล์ธีมมีดังนี้

<?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, 
   );

ที่นี่เราได้ตั้งค่า

• ชื่อของธีมที่แอ็คทีฟและทางเลือกเป็น tpthemes
• เส้นทางของโฟลเดอร์ธีมเป็นเชื้อเพลิง / แอป / ธีม /
• เส้นทางของโฟลเดอร์เนื้อหาเป็น / public / assets / tpthemes /

คลาสธีม

เมื่อกำหนดค่าเสร็จแล้วเราสามารถใช้คลาสซึ่งเป็นธีมที่ FuelPHP จัดเตรียมไว้เพื่อทำงานของธีมได้ แจ้งให้เราทราบเกี่ยวกับวิธีการที่มีอยู่ในคลาส Theme ในบทนี้

ตัวอย่าง

วิธีการอินสแตนซ์ช่วยให้สามารถสร้างธีมใหม่ มีสองพารามิเตอร์ต่อไปนี้

• $name - ชื่อธีม (ไม่บังคับ)

• $config - อาร์เรย์การกำหนดค่าธีม (เช่นเดียวกับที่เห็นในส่วนการกำหนดค่า)

พารามิเตอร์ทั้งสองเป็นทางเลือก หากไม่ได้ระบุพารามิเตอร์พารามิเตอร์จะพยายามรับธีมเริ่มต้นจากไฟล์คอนฟิกูเรชัน หากระบุชื่อธีมจะพยายามรับการตั้งค่าอื่น ๆ จากไฟล์คอนฟิกูเรชัน หากระบุคอนฟิกูเรชันด้วยก็จะใช้การตั้งค่าที่ผู้ใช้ระบุแทนการตั้งค่าจากไฟล์คอนฟิกูเรชัน

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

ปลอม

การปลอมนั้นคล้ายกับอินสแตนซ์ยกเว้นว่าจะมีอาร์เรย์การกำหนดค่าเท่านั้น

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

ดู

วิธีการดูใช้ไฟล์ View::forge()ในพื้นหลัง. API ทั้งสองเหมือนกันยกเว้นวิธีการดูค้นหาไฟล์มุมมองในโฟลเดอร์ธีม, fuel / app / themes / tpthemes / แทน fuel / app / views / folder

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

ผู้นำเสนอ

วิธีผู้นำเสนอใช้ไฟล์ Presenter::forge()ในพื้นหลัง. API ทั้งสองเหมือนกันยกเว้นวิธีของผู้นำเสนอค้นหาไฟล์มุมมองในโฟลเดอร์ธีม, fuel / app / themes / tpthemes / แทน fuel / app / views / folder

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

asset_path

เมธอด asset_path ส่งคืนเส้นทางไปยังเนื้อหาที่ร้องขอโดยสัมพันธ์กับธีมที่เลือกในปัจจุบัน

$theme = \Theme::instance();  

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

add_path

เมธอด add_path อนุญาตให้เพิ่มพา ธ ธีมที่รันไทม์

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

add_paths

เมธอด add_paths อนุญาตให้เพิ่มพา ธ ธีมหลายรายการในรันไทม์

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

คล่องแคล่ว

วิธีการใช้งานอนุญาตให้ตั้งค่าธีมที่ใช้งานอยู่

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

รั้งท้าย

วิธีการสำรองอนุญาตให้ตั้งค่าธีมทางเลือก

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

get_template

เมธอด get_template จะส่งคืนอินสแตนซ์ View ของเทมเพลตธีมที่โหลดในปัจจุบัน

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

set_template

เมธอด set_template อนุญาตให้ตั้งค่าเทมเพลตธีมสำหรับเพจ

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

หา

ค้นหาผลตอบแทนจริงหากพบเส้นทางไปยังธีมมิฉะนั้นจะส่งกลับเท็จ

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

ทั้งหมด

วิธีการทั้งหมดจะส่งคืนอาร์เรย์ของธีมทั้งหมดในพา ธ ธีมทั้งหมด

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

รับข้อมูล

เมธอด get_info ส่งคืนตัวแปรเฉพาะจากอาร์เรย์ข้อมูลธีม หากไม่ได้ระบุธีมจะใช้อาร์เรย์ข้อมูลของธีมที่ใช้งานอยู่

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

ที่นี่วิธีการรับสีถูกกำหนดไว้ใน 'newtheme' หากไม่ได้กำหนดไว้ก็จะใช้ 'สีเขียว' เป็นสีเริ่มต้น

set_info

เมธอด set_info ตั้งค่าตัวแปรในธีมที่ใช้งานอยู่หรือธีมทางเลือก

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

set_partial

วิธี set_partial อนุญาตให้ตั้งค่ามุมมองบางส่วนสำหรับส่วนที่มีชื่อของเทมเพลตเพจของคุณ โดยปกติจะดำเนินการผ่านทาง HMVC call

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

get_partial

เมธอด get_partial อนุญาตให้รับอินสแตนซ์มุมมองของบางส่วนที่ตั้งไว้ก่อนหน้านี้ในส่วนที่มีชื่อของเทมเพลตเพจ

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

ตัวอย่างการทำงาน

ให้เราเพิ่มการสนับสนุนธีมในแอปพลิเคชันพนักงานของเรา

Step 1 - เพิ่มไฟล์กำหนดค่าธีมใหม่ fuel / app / config / theme.php พร้อมเนื้อหาต่อไปนี้

<?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 - เพิ่มโฟลเดอร์เนื้อหาใหม่ public / assets / tpthemes / css สำหรับธีม tpthemes

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

Step 3 - ดาวน์โหลด bootstrap ล่าสุดและวาง bootstrap.min.css ไว้ใน public / assets / tpthemes / css

Step 4 - เพิ่มโฟลเดอร์ใหม่ tpthemes ภายใต้โฟลเดอร์ fuel / app / themes

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

Step 5 - เพิ่มเทมเพลตเลย์เอาต์ใหม่ bootstrap.html ใต้ fuel / app / themes / tpthemes / layout / และเพิ่มโค้ดต่อไปนี้

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

ที่นี่เราได้ใช้ธีมอินสแตนซ์และวิธีการเนื้อหาเพื่อรับเส้นทางของไฟล์ bootstrap เราได้กำหนดสองตัวแปรส่วนหัวและเนื้อหาheader ถูกกำหนดเพื่อตั้งค่ารายละเอียดส่วนหัวแบบไดนามิก content ถูกกำหนดเพื่อตั้งค่าเนื้อหาจริงของเพจแบบไดนามิก

Step 6 - เพิ่มเทมเพลตส่วนหัวใหม่ header.php ที่ fuel / app / themes / tpthemes / partials ดังนี้

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

Step 7 - สร้างตัวควบคุมใหม่ ThemeSample ที่ fuel / app / class / controller / themesample.php และ action ที่ action_index ดังนี้

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

ที่นี่เราได้ใช้ before และ after วิธีการเริ่มต้นของธีมโดยใช้เมธอด Themeชั้นเรียน วิธีการบางอย่างที่ใช้ ได้แก่ อินสแตนซ์ get_template set_template และ view

Step 8 - สุดท้ายเพิ่มมุมมองสำหรับการดำเนินการดัชนี index.php ที่ fuel / app / themes / tpthemes / themesample ดังต่อไปนี้

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

ที่นี่เราได้กำหนดตัวแปรหนึ่งตัวคือข้อความซึ่งจำเป็นต้องตั้งค่าแบบไดนามิกในคอนโทรลเลอร์

เราได้สร้างธีมใหม่ tpthemes และใช้ใน ThemeSampleตัวควบคุม ตอนนี้ให้เราตรวจสอบผลลัพธ์โดยขอ URL http: // localhost: 8080 / themesample / index ผลลัพธ์เป็นดังนี้