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 के रूप में सक्रिय और कमबैक थीम का नाम
  • ईंधन / एप्लिकेशन / थीम / के रूप में थीम फ़ोल्डर का पथ
  • संपत्ति फ़ोल्डर का पथ / सार्वजनिक / संपत्ति / tpthemes /

विषय वर्ग

एक बार कॉन्फ़िगरेशन हो जाने के बाद, हम क्लास, थीम का कार्य करने के लिए फ्यूलपीईपी द्वारा उपलब्ध कराए गए थीम का उपयोग कर सकते हैं। आइए इस अध्याय में थीम वर्ग में उपलब्ध तरीकों के बारे में जानते हैं।

उदाहरण

आवृत्ति विधि एक नई थीम बनाने में सक्षम बनाती है। इसके निम्नलिखित दो मापदंड हैं,

  • $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 समान हैं सिवाय दृश्य विधि के कि थीम फ़ोल्डर, ईंधन / ऐप / थीम / tpthemes / में ईंधन / ऐप / विचार / फ़ोल्डर के बजाय दृश्य फ़ाइल खोजता है।

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

प्रस्तोता

प्रस्तुतकर्ता विधि का उपयोग करता है Presenter::forge()पृष्ठभूमि में। प्रस्तुतकर्ता विधि के अलावा दोनों एपीआई समान हैं, थीम फ़ोल्डर, ईंधन / ऐप / थीम / tpthemes / में ईंधन / ऐप / विचार / फ़ोल्डर के बजाय दृश्य फ़ाइल खोजता है।

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

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 विधि वर्तमान में लोड किए गए थीम टेम्पलेट का दृश्य उदाहरण लौटाएगा।

$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 कॉल के माध्यम से किया जाता है।

$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 - निम्नलिखित विषयवस्तु के साथ नई थीम कॉन्फ़िगरेशन फ़ाइल, ईंधन / ऐप / कॉन्फ़िगरेशन / थीम जोड़ें।

<?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 - विषय के लिए नए संपत्ति फ़ोल्डर, सार्वजनिक / संपत्ति / tpthemes / css जोड़ें, tpthemes।

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

Step 3 - नवीनतम बूटस्ट्रैप डाउनलोड करें और जनता / संपत्ति / tpthemes / css के तहत bootstrap.min.cs को रखें।

Step 4 - नए फ़ोल्डर, ईंधन / एप्लिकेशन / थीम फ़ोल्डर के तहत tpthemes जोड़ें।

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

Step 5 - ईंधन / एप्लिकेशन / थीम / tpthemes / लेआउट / के तहत नया लेआउट टेम्पलेट, बूटस्ट्रैप जोड़ें और निम्नलिखित कोड जोड़ें।

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

यहां, हमने बूटस्ट्रैप फ़ाइल का पथ प्राप्त करने के लिए थीम इंस्टेंस और एसेट विधि का उपयोग किया है। हमने दो चर, हेडर और सामग्री को परिभाषित किया है।header हेडर विवरण को गतिशील रूप से सेट करने के लिए परिभाषित किया गया है। content पृष्ठ की वास्तविक सामग्री को गतिशील रूप से सेट करने के लिए परिभाषित किया गया है।

Step 6 - नए हेडर टेम्प्लेट, हेडर जोड़ें। फ्यूल / एप / थीम / टैप्टेम / पार्टियल में निम्नानुसार।

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

Step 7 - एक नया नियंत्रक बनाएँ, ThemeSample ईंधन / ऐप / वर्गों / नियंत्रक / themesample.php और पर action एक्शन_इंडेक्स इस प्रकार है।

<?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 और दृश्य हैं।

Step 8 - अंत में, इंडेक्स एक्शन के लिए दृश्य जोड़ें। फ्यूल / ऐप / थीम / tpthemes / themesample में index.php निम्नानुसार है।

<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 का अनुरोध करके परिणाम की जाँच करें। परिणाम इस प्रकार है।