Theming در فریمورک Yii

به کمک Theming می توانید، بدون اینکه فایل های view اصلی را ویرایش کنیم، مجموعه ای از view ها را با یکدیگر جایگزین کنیم. برای استفاده از theming باید propety به نام theme در کامپوننتِ برنامه را مقداردهی کنیم.

شما همچنین باید propery های زیر را تعریف کنید :

• yii\base\Theme::$basePath - پوشه اصلی (base directory) فایل های  CSS، JS، تصاویر و غیره را تعریف می کند.
• yii\base\Theme::$baseUrl – آدرس اصلی (base URL) منابع تم، را تعریف می کند.
• yii\base\Theme::$pathMap - قوانین یا rule های جایگزینی را تعریف می کند.

به عنوان مثال، اگر شما  $this->render('create') را در UserController فراخوانی کنید، فایل ویو  @app/views/user/create.phpرندر خواهد شد. حال، اگر theming را در پیکربندی برنامه ی خود (configuration) فعال کرده باشید، فایل ویو  @app/themes/basic/user/create.php به جای آن render می شود.

مرحله 1 - فایل config/web.php را اینگونه تغییر دهید.

<?php
   $params = require(__DIR__ . '/params.php');
   $config = [
      'id' => 'basic',
      'basePath' => dirname(__DIR__),
      'bootstrap' => ['log'],
      'components' => [
         'request' => [
            // !!! insert a secret key in the following (if it is empty) - this
               //is required by cookie validation
            'cookieValidationKey' => 'ymoaYrebZHa8gURuolioHGlK8fLXCKjO',
         ],
         'cache' => [
            'class' => 'yii\caching\FileCache',
         ],
         'user' => [
            'identityClass' => 'app\models\User',
            'enableAutoLogin' => true,
         ],
         'errorHandler' => [
            'errorAction' => 'site/error',
         ],
         'mailer' => [
            'class' => 'yii\swiftmailer\Mailer',
            // send all mails to a file by default. You have to set
            // 'useFileTransport' to false and configure a transport
            // for the mailer to send real emails.
            'useFileTransport' => true,
         ],
         'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
               [
                  'class' => 'yii\log\FileTarget',
                  'levels' => ['error', 'warning'],
               ],
            ],
         ],
         'view' => [
            'theme' => [
               'basePath' => '@app/themes/basic',
               'baseUrl' => '@web/themes/basic',
               'pathMap' => [
                  '@app/views' => '@app/themes/basic',
               ],
            ],
         ],
         'db' => require(__DIR__ . '/db.php'),
      ],
      'modules' => [
         'hello' => [
            'class' => 'app\modules\hello\Hello',
         ],
      ],
      'params' => $params,
   ];
   if (YII_ENV_DEV) {
      // configuration adjustments for 'dev' environment
      $config['bootstrap'][] = 'debug';
      $config['modules']['debug'] = [
         'class' => 'yii\debug\Module',
      ];
      $config['bootstrap'][] = 'gii';
      $config['modules']['gii'] = [
         'class' => 'yii\gii\Module',
      ];
   }
   return $config;
?>

مرحله 2 – حال دایرکتوری web/themes/basic و themes/basic/site را ایجاد کنید. داخل پوشه  themes/basic/site  یک فایل با نام about.php ایجاد کنید.

<?php
   /* @var $this yii\web\View */
   use yii\helpers\Html;
   $this->title = 'About';
   $this->params['breadcrumbs'][] = $this->title;
   $this->registerMetaTag(['name' => 'keywords', 'content' => 'yii, developing,
      views, meta, tags']);
   $this->registerMetaTag(['name' => 'description', 'content' => 'This is the
      description of this page!'], 'description');
?>

 
<div class = "site-about">
   <h1><?= Html::encode($this->title) ?></h1>
            
   <p style = "color: red;">
      This is the About page. You may modify the following file to customize its content:
   </p> 
</div>

مرحله 3 - حال اگر به آدرس http://localhost:8080/index.php?r=site/about بروید، به جای themes/basic/site/about.php، فایل views/site/about.php رندر می شود.

مرحله 4 - برای theme module ها، مسیرyii\base\Theme::$pathMap   را به شیوه زیر پیکربندی کنید.

'pathMap' => [
   '@app/views' => '@app/themes/basic',
   '@app/modules' => '@app/themes/basic/modules',
],

مرحله 5 - برای theme widget ها، proprty با نام yii\base\Theme::$pathMap به صورت زیر پیکربندی کنید.

'pathMap' => [
   '@app/views' => '@app/themes/basic',
   '@app/widgets' => '@app/themes/basic/widgets', // <-- !!!
],

گاهی اوقات شما نیاز به تعریف یک تم basic دارید که دارای ظاهری ساده است. برای رسیدن به این هدف، می توانید از تم inheritance استفاده کنید.

مرحله 6 - کامپوننت view ازبرنامه را به شکل زیر ویرایش کنید.

'view' => [
   'theme' => [
      'basePath' => '@app/themes/basic',
      'baseUrl' => '@web/themes/basic',
      'pathMap' => [
         '@app/views' => [
            '@app/themes/christmas',
            '@app/themes/basic',
         ],
      ]
   ],
],

در پیکربندی فوق، فایل ویو @app/views/site/index.php با فایل های @app/themes/christmas/site/index.php یا @app/themes/basic/site/index.php بسته به اینکه کدام فایل وجود دارد، تم گذاری می شود. اگر هر دو فایل وجود داشته باشد، اولین مورد استفاده خواهد شد.

مرحله 7 – یک پوشه به نام themes/christmas/site بسازید.

مرحله 8 - حال داخل پوشه themes/christmas/site، فایل about.php را با کد زیر ایجاد کنید.

<?php
   /* @var $this yii\web\View */
   use yii\helpers\Html;
   $this->title = 'About';
   $this->params['breadcrumbs'][] = $this->title;
   $this->registerMetaTag(['name' => 'keywords', 'content' => 'yii, developing,
      views, meta, tags']);
   $this->registerMetaTag(['name' => 'description', 'content' => 'This is the
      description of this page!'], 'description');
?>

 
<div class = "site-about">
   <h2>Christmas theme</h2>
   <img src = "http://clicksite.org/upload/fir_tree_PNG2514.png" alt = ""/>
   <p style = "color: red;">
      This is the About page. You may modify the following file to customize its content:
   </p>
</div>

مرحله 9 - اگر در آدرسبار مرورگر وب تان به آدرس http://localhost:8080/index.php?r=site/about بروید، مشاهده خواهید کرد که صفحه about با استفاده ازتم Christmas  آپدیت شده است.