上文中後台模板框架已經搭建起來了,但還是有些不協調,像是有兩個User標題,或者我們想自己在gii生成時添加或刪除些公用的東西。這就需要我們定義自己的gii模板。
我們以CRUD的模板為例,默認的gii模板位置是在:vendor/yiisoft/yii2-gii/generators/crud的default目錄下,我們當然可以在此新建一個和default並列的目錄,但是並不推薦在這裡新建,因為這裡是vendor目錄,正如上章所說的,vendor目錄下的東西盡量不要去更改,這樣你在git發布時或團隊共享時不需要提交vendor目錄,比較方便。
正確的方法是,將default文件夾復制出來,移動到你想移動到的位置,我這裡移動到了backend/views/gii/crud目錄下,然後更改改backend/common/main-local.php下的gii配置:
$config['bootstrap'][] = 'gii'; $config['modules']['gii'] = [ 'class' => 'yii\gii\Module', 'generators' => [ //here 'crud' => [ // generator name 'class' => 'yii\gii\generators\crud\Generator', // generator class templates' => [ //setting for out templates 'vishun' => '@backend/views/gii/crud/default', // template name => path to template ] ] ], ];
這樣,再訪問gii中的CRUD生成器就會發現多了一個選擇:(如果改的是backend的配置,那麼只能通過後台的url訪問gii才會出現多出來的選項)
記得要改拷貝過來的內容,例如刪除掉多出來的標題什麼的,然後重新生成一遍,就可以看到改變後的效果了。如果是團隊合作,也應該將這個寫入到環境中去。
再說下AdminLTE,我們在其官方演示站時,會發現模板集成了很多的漂亮功能,例如在Forms/Advanced Elements中select2,下拉菜單是箭頭的樣式。用firebug查看其css編發現引用了select2.min.css這個css。再回到我們自己的站點同樣看下,便會發現我們站點沒有這麼一個css。所以我們要著手將其引入,但在此之前,需要先了解Yii2中如何在頁面中引入js或者css。下面以引入js為例,css與此相同:
方法一、直接同在html中一樣:(不建議使用,會導致依賴順序錯亂)
//外部js文件 <script src="你的js路徑/plugins/select2/select2r.min.js"> //或者 <?=Html::jsFile('你的js路徑/plugins/select2/select2r.min.js')?> //內部js <script> var a='abc' </script>
方法二、用$this->registerJs
和$this->registerJsFile
方法(可控依賴順序,但是引入外部js時建議用方法三)
$this->registerJs("var options = ".json_encode($options).";", View::POS_END, 'my-options');//引入內部js $this->registerJsFile('http://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::className()]]);//引入外部js文件
方法三、引入外部js式時,利用Yii2新功能注冊資源包來部署(功能更強大,例如可以轉換less,壓縮合並等),可參照backend/assets/AppAsset.php文件:
namespace backend\assets; use yii\web\AssetBundle; 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', ]; }
定義此類後,在視圖文件中:
backend\assets\AppAsset::register($this);
即可將定義的site.css以及關聯的'yii\web\YiiAsset'和'yii\bootstrap\BootstrapAsset'定義的css和js引入。更多功能請看YII2權威指南中的“客戶端腳本”和“資源”兩個章節。
既然已了解以上引入方法,可以繼續我們引入select2的計劃,我們先看下我們站點引入了哪些資源,在你copy後的layouts/main.php中:
if (class_exists('backend\assets\AppAsset')) { backend\assets\AppAsset::register($this); } else { app\assets\AppAsset::register($this); } dmstr\web\AdminLteAsset::register($this);
先是注冊了本來就有的AppAsset,然後又注冊了dmstr\web命名空間下的AdminLteAsset,我們追溯到此文件下就會發現裡面只引入了vendor/almasaeed2010/dist文件中的AdminLTE.min.css和變動的*.min.css這兩個css文件(almasaeed2010文件是我們compose下載yii2-adminlte-asset自動下載的依賴文件),但我們打開vendor/almasaeed2010/adminlte/plugins下,會發現還有很多的功能,我們上方提到的select2也在其中。我們當然可以在AdminLteAsset.php的平級建立Select2Asset.php文件,但理由同上方gii模板時說的,最好不要改動vendor下的文件,所以我們將此文件建立在backend/assets中,具體文件內容可參考:
<?php namespace backend\assets; use yii\web\AssetBundle; class Select2Asset extends AssetBundle { public $sourcePath = '@vendor/almasaeed2010/adminlte/plugins/select2';//路徑 public $css = [ 'select2.min.css',//css ]; public $js = [ 'select2.min.js'//js ]; public $depends = [ 'dmstr\web\AdminLteAsset',//依賴關系 ]; }
同時在layouts/main.php中:
backend\assets\Select2Asset::register($this); // dmstr\web\AdminLteAsset::register($this);
可以將AdminLteAsset這行注釋掉,因為我們在Select2Asset中寫明了依賴AdminLteAsset,所以會自動注冊依賴文件的css和js,這時我們再次查看元素,就會發現多了select2.min.css和select2.min.js,有了這兩個我們便可以使用三角樣式的下拉菜單了。
以上就這樣了,睡覺先。