Yii-theming

提供:Dev Guides
移動先:案内検索

Yii-テーマ

テーマを設定すると、元のビューファイルを変更することなく、一連のビューを別のビューに置き換えることができます。 テーマを使用するには、ビューアプリケーションコンポーネントの theme プロパティを設定する必要があります。

また、次のプロパティを定義する必要があります-

  • yii \ base \ Theme :: $ basePath -CSS、JS、画像などのベースディレクトリを定義します。
  • yii \ base \ Theme :: $ baseUrl -テーマのベースURLを定義します リソース。
  • yii \ base \ Theme :: $ pathMap -置換ルールを定義します。

たとえば、UserControllerで* $ this→ render( 'create')を呼び出すと、 *@ app/views/user/create.php ビューファイルがレンダリングされます。 それでも、次のアプリケーション構成のようにテーマを有効にすると、代わりにビューファイル@ app/themes/basic/user/create.phpがレンダリングされます。

ステップ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 に移動し、* viewsの代わりに themes/basic/site/about.php ファイルがレンダリングされます/site/about.php*。

テーマの作成

*ステップ4 *-テーマモジュールに対して、このようにyii \ base \ Theme
$ pathMapプロパティを設定します。
'pathMap' => [
   '@app/views' => '@app/themes/basic',
   '@app/modules' => '@app/themes/basic/modules',
],
*ステップ5 *-ウィジェットをテーマにするには、 *yii \ base \ Theme
$ pathMap* プロパティをこのように設定します。
'pathMap' => [
   '@app/views' => '@app/themes/basic',
   '@app/widgets' => '@app/themes/basic/widgets',//<-- !!!
],

アプリケーションの基本的なルックアンドフィールを含む基本テーマを指定する必要がある場合があります。 この目標を達成するために、テーマの継承を使用できます。

  • ステップ6 *-この方法でビューアプリケーションコンポーネントを変更します。
'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://pngimg.com/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ページが表示されます。

クリスマステーマ