Yii2主题整合

时间:2014-09-02 11:41:26

标签: 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下替换了这段代码,但没有改变!

6 个答案:

答案 0 :(得分:12)

在Yii2中改变主题的另一种方法是:

  1. 在要更改主题的前端或后端的Web文件夹中创建主题目录。

  2. 将主题文件夹放在主题目录中。

  3. 在前端或后端的assets文件夹中的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. 不要包含核心引导程序css,bootstrap js和jquery js,因为这些是Yii2提供的核心API。我在上面评论过他们。

  5. 使用以下代码在main.php布局文件或其他网站页面中引用主题资源(css,js,图像等):

        <?= Yii::getAlias('@web/themes/theme_folder') ?>/images/margo.png
    
  6. 不需要在layouts-&gt; main.php文件中包含css或js文件:)

答案 1 :(得分:6)

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'],

答案 2 :(得分:4)

在后端文件夹中创建一个主题文件夹。在文件backend / config / main.php中,components部分添加下面给出的代码,此文件夹中的文件的行为类似于后端的视图文件夹。

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

答案 3 :(得分:4)

要安装新的后端或前端主题(我做了一页Bootstrap主题),请按照以下步骤操作:

  1. 将主题内容(例如js,css,图像,字体等目录)复制到例如backend-&gt; web文件夹中。

  2. 更改后端 - &gt; assets-&gt; 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',
    ];
    
  3. 请记住注释掉Yii2默认提供的核心JQuery和Bootstrap JS文件。

    1. 修改后端 - &gt; views-&gt; layouts-&gt; 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. 现在根据主题调整其他内容页面,在适合您的页面上放置主题部分:)

    3. 如果有人遇到任何困难,请告诉我们。)

答案 4 :(得分:2)

试试这个:

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

答案 5 :(得分:1)

将所有视图文件夹放在themes \ mytheme