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')?>//***同上