yii2学习笔记--修改css和js文件（未完成）

（未完成，陆续添加内容）

一、通过模板文件添加的js和css如何修改：

1.1 修改AppAsset.php之中的css、js

假设模板文件为  views/layouts/main.php，观测可知其中有一句：

AppAsset::register($this);

这里就是引入css和js文件的语句，yii2框架是通过AppAsset这个类之中的设置来注入js和css文件的，而这个类的位置在\assets\AppAsset.php，所以我们要修改和添加js、css文件都可以在这里进行修改：

public $css = [
        'css/normalize.css',
        'css/main.css',        
    ];
    public $js = [
        'https://cdn.bootcss.com/jquery/1.11.3/jquery.js',
    ];

比如我要做一个最简单的页面，就可以如上这么写，这样yii2框架只会引入最少的css和js文件。

1.2 修改AppAsset之中的depends

此外yii2还有一个很强大的功能，可以以整库的方式导入js和css文件，比如AppAsset之中就默认导入了bootstrap：

public $depends = [
        'yii\bootstrap\BootstrapAsset',
    ];

这个BootstrapAsset定义在\vendor\yiisoft\yii2-bootstrap之中，此外在\vendor\yiisoft下的extensions.php之中定义了各个库的版本等属性，可以通过composer进行管理。

对此我表示这种把前端都兼顾的方式实在是过于沉重了，何况bootstrap的界面烂大街了，我想用个不会撞脸的比如semantic，那我就可以把这一行depends注释掉。

1.3 修改模板文件之中会让yii2自动导入js和cs的语句

然而刷新页面我们会惊奇的发现，bootstrap的js文件链接依然会出现在html代码之中，这个就是yii2框架的另一个特点，检查main.php我们会发现其中有两句：

use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;

这样会用到bootstrap库之中的控件，而yii2就会自动导入bootstrap库，把这两行注释掉，就不会自动导入vendor\yiisoft\yii2-bootstrap目录下的bootstrap的css和js文件了

1.4 设置js文件引入html的位置：

默认css文档是引入head部的，而js默认是引入在body的末端的，可以在AppAsset.php之中指定js引入的位置，比如加上这么一段：

public $jsOptions = [
        'position'=>View::POS_BEGIN,
    ];

表示js文件是添加在body的起始位置，注意position可以取值为POS_BEGIN，POS_END，POS_HEAD分别对应body起始位置，body的末端，和head，而这三个常量是定义在yii/web/View这个类之中的，所以要使用这三个常量的话，需要在AppAsset.php前面加上一句：

use yii\web\View;

这样就可以使用这几个常量了。

二、在页面文件之中单独设定js和css文件的位置：

假设我们要为index.php这个页面在使用main.php之中已有的js和css之外，单独添加一个js/echarts/echarts.js，这时候我们可以在index.php之前写上：

use yii\helpers\Html;

这是yii2框架的一个助手类，然后就可以在php文件之中想要导入js或者css的位置这样写：

<?=Html::jsFile('@web/***/js/***.js')?>//这里***代表你的目录名或者文件名
<?=Html::cssFile('@web/***/css/***.css')?>//***同上

来源：oschina

链接：https://my.oschina.net/u/150705/blog/598118