Yii2 主题安装答案

【问题标题】：Yii2 Theme InstallationYii2 主题安装
【发布时间】：2015-06-26 09:42:13
【问题描述】：

我正在尝试将 Cerulean 主题安装到前端应用程序上的 Yii2 高级模板中。在 main.php AppAsset::register($this);不包括文件。以下是我在 AppAsset 中的代码

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';    
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
         'css/site.css',
    ];
    public $js = [
        '/js/jquery.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

在 main.php 中

<?php

use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;
use frontend\widgets\Alert;
use yii\bootstrap\ActiveForm;

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

AppAsset::register($this); 
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="<?= Yii::$app->charset ?>"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
        <title><?= Html::encode($this->title) ?></title>
        <?php $this->head() ?>


        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="/themes/cerulian/js/jquery.js"></script>
        <script src="/themes/cerulian/js/bootstrap-transition.js"></script>
        <script src="/themes/cerulian/js/bootstrap-alert.js"></script>
        <script src="/themes/cerulian/js/bootstrap-modal.js"></script>
        <script src="/themes/cerulian/js/bootstrap-dropdown.js"></script>
        <script src="/themes/cerulian/js/bootstrap-scrollspy.js"></script>
        <script src="/themes/cerulian/js/bootstrap-tab.js"></script>
        <script src="/themes/cerulian/js/bootstrap-tooltip.js"></script>
        <script src="/themes/cerulian/js/bootstrap-popover.js"></script>
        <script src="/themes/cerulian/js/bootstrap-button.js"></script>
        <script src="/themes/cerulian/js/bootstrap-collapse.js"></script>
        <script src="/themes/cerulian/js/bootstrap-carousel.js"></script>
        <script src="/themes/cerulian/js/bootstrap-typeahead.js"></script>

        <!-- Le styles -->

<!--        <link href="/themes/cerulian/bootstrap/dist/css/bootstrap.css" rel="stylesheet">-->

        <link href="/themes/cerulian/css/bootstrap.css" rel="stylesheet">
        <link rel="stylesheet" href="/css/site.css">
        <style type="text/css">

        </style>
        <link href="/css/developers.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
        <![endif]-->

        <!-- Fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="/ico/apple-touch-icon-57-precomposed.png">
        <link rel="shortcut icon" href="/ico/favicon.png">

        <style>

        </style>

          <link rel="stylesheet" href="/css/developers.css">
    </head>

    <body>

<?php

//      echo '<pre>';
//      print_r($this);exit;
$this->beginBody()
?>

</html>

请参阅我通过提供脚本和 css 标签手动添加了脚本和 css 文件。

在frontend/config/main.php下面是设置

    'components' => [
//        'MyHtmlElementsGenerator' => [
//            'class' => 'componentsmodels\User',
//            'enableAutoLogin' => true,
//        ],
         'view' => [
            'theme' => [
                'basePath' => '@app/themes/cerulian',
                'baseUrl' => '@web/themes/cerulian',
                'pathMap' => [
                    '@app/views' => '@app/themes/cerulian',
                ],
            ],
                        ], 

        'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
                [
                    'class' => 'yii\log\FileTarget',
                    'levels' => ['error', 'warning'],
                ],
            ],
        ],
        'errorHandler' => [
            'errorAction' => 'site/error',![enter image description here][1]
        ],
    ],

以下是目录结构。

!http://i.stack.imgur.com/ZCkRk.png

问题是资产登记不工作。即使在视图中我也不能使用 $this->registerJs 和 $this->registerCssFile。这些功能似乎不起作用。有什么问题可以帮助我吗？我想在这个主题中自动添加所有必需的文件 JS/CSs。

【问题讨论】：

尝试在 AppAsset 中评论 $basePath 和 $baseUrl
对我不起作用

标签： php twitter-bootstrap themes yii2

【解决方案1】：

这里是如何集成 Yii2 高级应用程序和自定义主题，特别是前端。按照此步骤操作，更多信息请在 youtube 中查看： https://www.youtube.com/watch?v=AUbMpjDauq0

第 1 步 - 下载主题，此示例使用“carlote”主题。第 2 步 - 将自定义主题提取到供应商/凉亭。第 3 步 - 编辑视图/布局。

Copy the index carlote theme to main
Copy index.html from beginning <body>..</body>
Add this script to the top
<?php
use frontend\assets\AppAsset;
use yii\helpers\Html;

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

$asset         = frontend\assets\AppAsset::register($this);
$baseUrl        =    $asset->baseUrl;
?>

第 4 步 - 在 frontendfollow css/js 中编辑资产包或来自 carlote index.html 的图像

class AppAsset extends AssetBundle
{
    //public $basePath = '@webroot';
    //public $baseUrl = '@web';
    public $sourcePath = '@bower/corlate/';
    public $css = [
        'css/bootstrap.min.css',
        'css/font-awesome.min.css',
        'css/animate.min.css',
        'css/prettyPhoto.css',
        'css/main.css',
        'css/responsive.css',
    ];
    public $js = [
            'js/jquery.js',
            'js/bootstrap.min.js',
            'js/jquery.prettyPhoto.js',
            'js/jquery.isotope.min.js',
            'js/main.js',
            'js/wow.min.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

刷新您的前端页面，...完成:)

【讨论】：

以上我的回答来源：satusoftware.com/frontend/web/site/post/3/…