Интеграция с темой 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 но ничего не изменилось!

Ответ 1

Еще один подход к изменению темы в Yii2:

  • Создайте каталог тем в веб-папке в интерфейсе или бэкэнд, где вы хотите изменить тему.

  • поместите папку темы в каталог тем.

  • изменить переменные $css и $js в AppAsset.php в папке с ресурсами в интерфейсе или бэкэнде, например:

    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'
    ];
    
  • Не включайте ядро ​​bootstrap css, bootstrap js и jquery js, так как это основные API, которые предоставляются Yii2. Я прокомментировал их выше.

  • Используйте приведенный ниже код для ссылки на ресурсы темы (css, js, images и т.д.) в файле макета main.php или на других страницах сайта:

        <?= Yii::getAlias('@web/themes/theme_folder') ?>/images/margo.png
    
  • Нет необходимости включать файлы css или js в layouts- > файл main.php:)

Ответ 2

Создайте папку вида в 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'],

Ответ 3

В папке backend создайте папку темы. В файле backend/config/main.php раздел компонентов добавляет код, указанный ниже, файлы в этой папке будут вести себя как папка представления в бэкэнд.

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

Ответ 4

Чтобы установить новую внутреннюю или внешнюю тему (я сделал одну страницу Bootstrap на странице), выполните следующие шаги:

  • Скопируйте содержимое темы, то есть каталоги, такие как js, css, images, fonts и т.д., например, backend- > web folder.

  • Измените свой сервер- > активы- > класс 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',
    ];
    

Обратите внимание на основные JS файлы JQuery и Bootstrap, поскольку они предоставлены 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. Теперь настройте другие страницы контента в соответствии с темой, разместите разделы темы на ваших страницах, которые вам подходят:)

Сообщите мне, если кто-нибудь столкнется с любой трудностью:)

Ответ 5

попробуй это:

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

Ответ 6

просто поместите всю свою папку просмотра в темы\mytheme

Ответ 7

в компоненте следует настроить карту вида, попробуйте это:

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