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

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

1、经过模板文件添加的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;

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

2、在页面文件之中单独设定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')?>//***同上