Assets文件夹可以引用的文件(css,js,视频,音频或图像等)。
Yii管理Assets捆绑中的Asset。Assets捆绑包的目的是在代码库中具有一组相关的JS或CSS文件,并能够在单个PHP调用中注册它们。Assets也可以依赖于其他Asset。
在Assets文件夹内,您将找到基本应用程序模板的Assets捆绑包
<?php namespace app\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', ]; public $js = []; public $depends = [ 'yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', ]; } ?>
上面的类指定Assets文件位于@webroot文件夹内,该文件夹对应于URL @web。该捆绑包不包含JS文件和单个CSS文件。捆绑包取决于其他捆绑包-
yii \ web \ YiiAsset和yii \ bootstrap \ BootstrapAsset。
以下是AssetBundle的属性。
根据位置,Assets可以分类为-
步骤1-在assets文件夹内,创建一个名为DemoAsset.php的新文件,其内容如下。
<?php namespace app\assets; use yii\web\AssetBundle; class DemoAsset extends AssetBundle { public $basePath = ‘@webroot’; public $baseUrl = ‘@web’; public $js = [‘js/demo.js’]; } ?>
步骤2-我们刚刚使用单个demo.js文件声明了一个新的Assets捆绑包。现在,在web / js文件夹中,使用此代码创建一个名为demo.js的文件。
console.log("hello from demo asset");
步骤3-要注册新创建的Assets捆绑包,请转到views / layouts目录,并在main.php文件顶部,添加以下行。
\app\assets\DemoAsset::register($this);
步骤4-如果将Web浏览器指向http:// localhost:8080 / index.php,则应该看到以下chrome控制台输出。
您还可以定义jsOptions和cssOptions属性,以自定义页面中包含CSS和JS文件的方式。默认情况下,JS文件位于结束body标记之前。
步骤5-要在头部包含JS文件,请按以下方式修改DemoAsset.php文件。
<?php namespace app\assets; use yii\web\AssetBundle; use yii\web\View; class DemoAsset extends AssetBundle { public $basePath = '@webroot'; public $baseUrl = '@web'; public $js = ['js/demo.js']; public $jsOptions = ['position' => View::POS_HEAD]; } ?>
步骤6-现在转到http:// localhost:8080 / index.php,您应该看到demo.js脚本包含在页面的顶部。
在生产模式下运行的Web应用程序启用Assets的HTTP缓存是一种常见的做法。这样,最后的修改时间戳将被附加到所有已发布的Assets上。
步骤7-转到config文件夹并修改web.php文件,如以下代码所示。
<?php $params = require(__DIR__ . '/params.php'); $config = [ 'id' => 'basic', 'basePath' => dirname(__DIR__), 'bootstrap' => ['log'], 'components' => [ 'assetManager' => [ 'appendTimestamp' => true, ], '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'], ], ], ], '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; ?>
我们已经添加了AssetManager组件并设置了appendTimestamp属性。
步骤8-现在在网络浏览器的地址栏中键入http:// localhost:8080 / index.php。您会注意到,所有Assets现在都有一个时间戳,如下图所示。
以下是Core Yii Assetbundles。