web-dev-qa-db-ja.com

Yii2テーマの統合

Yii2拡張アプリケーションをインストールしましたが、バックエンドのテーマを変更したいと思います。これどうやってするの？カスタムテーマを使用するYii2に通知する必要があるファイルはありますか？ backend/web/themes/mytheme。私はこのコードをadvanced/backend/config/main.php、しかし何も起こりませんでした！

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

次に、このコードをcommon/config/main.phpしかし、何も変更されませんでした！

yii2
11
Muhammad Shahzad

Yii2でテーマを変更する別のアプローチは次のとおりです。

  1. テーマを変更するフロントエンドまたはバックエンドのWebフォルダーにテーマディレクトリを作成します。

  2. テーマフォルダーをテーマディレクトリ内に配置します。

  3. 次のように、フロントエンドまたはバックエンドのアセットフォルダにあるAppAsset.phpの$ cssおよび$ js変数を変更します。

    public $css = [
    //'css/site.css',
    'themes/theme_folder/css/font-awesome.min.css',
    'themes/theme_folder/css/slicknav.css',
    'themes/theme_folder/css/style.css',
    'themes/theme_folder/css/responsive.css',
    'themes/theme_folder/css/animate.css',
    'themes/theme_folder/css/colors/red.css',
    //'themes/margo/asset/css/bootstrap.min.css',
];
public $js = [
        'themes/theme_folder/js/jquery.migrate.js',
        'themes/theme_folder/js/modernizrr.js',
        'themes/theme_folder/js/jquery.fitvids.js',
        'themes/theme_folder/js/owl.carousel.min.js',
        'themes/theme_folder/js/nivo-lightbox.min.js',
        //'themes/theme_folder/js/jquery-2.1.4.min.js',
        //'themes/theme_folder/asset/js/bootstrap.min.js'
];

  4. コアbootstrap css、bootstrap jsおよびjquery jsは、Yii2によって提供されるコアAPIであるため、含めないでください。上記でコメントしました。

  5. 以下のコードを使用して、main.phpレイアウトファイルまたは他のサイトページでテーマリソース（css、js、画像など）を参照します。

        <?= Yii::getAlias('@web/themes/theme_folder') ?>/images/margo.png

  6. Layouts-> main.phpファイルにcssまたはjsファイルを含める必要はありません:)

13
iltaf khalid

themes/mythemeにビューフォルダーを作成し、main.phpなどのすべてのビューファイルを必要な他のレイアウトに移動します。

また、backend\config\main.phpで基本的なレイアウトを設定することもできます

return [
'id' => 'app-backend',
'layout'=>'yourtheme', //your `themes/mytheme/views/` contain yourtheme.php in this case
...

また、pathmapを

 'pathMap' => ['@app/views' => '@app/themes/mytheme/views'],
6
Dency G B

バックエンドフォルダーでテーマフォルダーを作成します。ファイルbackend/config/main.phpで、コンポーネントセクションに以下のコードを追加します。このフォルダーのファイルは、バックエンドのビューフォルダーのように動作します。

'view' => [
            'theme' => [
                'basePath' => '@backend/themes/demo',
                'baseUrl' => '@backend/themes/demo',
                'pathMap' => [
                    '@backend/views' => '@backend/themes/demo',
                ],
            ],
        ],
4
Midhun

新しいバックエンドまたはフロントエンドのテーマ（1ページBootstrapテーマ）をインストールしました）をインストールするには、以下の手順に従ってください：

  1. テーマコンテンツ、つまりjs、css、画像、フォントなどのディレクトリを、たとえばbackend-> webフォルダーにコピーします。

  2. バックエンド-> assets-> AppAsset.phpクラスを変更します。つまり、$ cssおよび$ js配列を次のように変更します。

    public $css = [
    //'css/site.css',
    'css/font-awesome.min.css',
    'css/main.css',
    'css/prettyPhoto.css',
    'css/bootstrap.min.css',
];
public $js = [
        //'js/bootstrap.min.js',
        'js/html5shiv.js',
        'js/jquery.isotope.min.js',
        //'js/jquery.js',
        'js/jquery.prettyPhoto.js',
        'js/main.js',
        'js/respond.min.js',
];

コアJQueryとBootstrap JSファイルはデフォルトでYii2によって提供されるため、コメントアウトすることを覚えておいてください。

  1. 以下のように、backend-> views-> layouts-> main.phpファイルを変更します。

     <?php

 /* @var $this \yii\web\View */
 /* @var $content string */

 use backend\assets\AppAsset;
 use yii\helpers\Html;
 use yii\bootstrap\Nav;
 use yii\bootstrap\NavBar;
 use yii\widgets\Breadcrumbs;
 use common\widgets\Alert;
 use webvimark\modules\UserManagement\models\User;
 use webvimark\modules\UserManagement\UserManagementModule;

 AppAsset::register($this);
 ?>

<?php $this->beginPage() ?>

<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>

<!--[if lt IE 9]>
<script src="<?= Yii::$app->request->baseUrl ?>/js/html5shiv.js"></script>
<script src="<?= Yii::$app->request->baseUrl ?>/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="<?= Yii::$app->request->baseUrl ?>/images/ico/favicon.ico">
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="<?= Yii::$app->request->baseUrl ?>/images/ico/Apple-touch-icon-144-precomposed.png">
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="<?= Yii::$app->request->baseUrl ?>/images/ico/Apple-touch-icon-114-precomposed.png">
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="<?= Yii::$app->request->baseUrl ?>/images/ico/Apple-touch-icon-72-precomposed.png">
<link rel="Apple-touch-icon-precomposed" href="<?= Yii::$app->request->baseUrl ?>/images/ico/Apple-touch-icon-57-precomposed.png">
<?php $this->head() ?>
</head><!--/head-->

<body data-spy="scroll" data-target="#navbar" data-offset="0">

<?php $this->beginBody() ?>

    <header id="header" role="banner">
    <div class="container">
        <div id="navbar" class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html"></a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                <li class="active"><a href="#main-slider"><i class="icon-home"></i></a></li>


                    <li><a href="#services">Services</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#pricing">Pricing</a></li>
                    <li><a href="#about-us">About Us</a></li>
                    <li><a href="#contact">Contact</a></li>

                </ul>
            </div>
        </div>
    </div>
      </header><!--/#header-->



            <?= $content ?>



<footer id="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                &copy; 2013 <a target="_blank" href="http://shapebootstrap.net/" title="Free Twitter Bootstrap WordPress Themes and HTML templates">ShapeBootstrap</a>. All Rights Reserved.
            </div>
            <div class="col-sm-6">
                <img class="pull-right" src="<?= Yii::$app->request->baseUrl ?>/images/shapebootstrap.png" alt="ShapeBootstrap" title="ShapeBootstrap">
            </div>
        </div>
    </div>
</footer><!--/#footer-->


<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

  2. 次に、テーマに応じて他のコンテンツページを調整し、自分に合ったテーマのセクションをページに配置します。

誰かが問題に遭遇した場合はお知らせください:)

4
iltaf khalid

これを試して：

'components' => [
    'view' => [
        'theme' => [
            'pathMap' => ['@backend/views' => '@backend/themes/mytheme'],
            'baseUrl' => '@backend/themes/mytheme',
        ],
    ],
],
2
rakhmatov

ビューフォルダをすべてthemes\mythemeに置くだけです

1
Ankita