程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> Yii2的相關學習記錄,自定義gii模板和引用vendor中的js、css(四),yii2gii

Yii2的相關學習記錄,自定義gii模板和引用vendor中的js、css(四),yii2gii

編輯:關於PHP編程

Yii2的相關學習記錄,自定義gii模板和引用vendor中的js、css(四),yii2gii


上文中後台模板框架已經搭建起來了,但還是有些不協調,像是有兩個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,有了這兩個我們便可以使用三角樣式的下拉菜單了。

以上就這樣了,睡覺先。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved