YII2 related learning records, customizing the GII template and referencing JS, CSS in vendor (iv)

The background template framework above is already set up, but it's still somewhat uncoordinated, like there are two user titles, or we want to add or remove something common when we build the GII. This requires us to define our own gii template.

We take the crud template as an example, the default GII template location is in: Vendor/yiisoft/yii2-gii/generators/crud, we can of course create a new directory with the default, But it is not recommended to build here, because this is the vendor directory, as Oberzhang said, vendor directory of Things to try not to change, so you do not need to submit the vendor directory when the Git release or team sharing, more convenient.

The correct way is to copy the default folder, move it to the location you want to move to, move to the Backend/views/gii/crud directory, and then change the GII configuration under backend/common/main-local.php:

  $config  [' Bootstrap '] [] = ' gii '   $config  [' Modules '] [' GII '] = [ ' class ' = ' yii\gii\module ', ' generators ' = ' = ' //  Generator name  ' class ' = ' Yii\gii\generators\crud\generator ', // generator class  templates '  = [//set Ting for Out templates  ' vishun ' = ' @backend/views/gii/crud/default     ' 

In this way, a second visit to the crud generator in the GII will reveal one more option: (If you change the backend configuration, you can only access the GII with the backend URL)

Remember to change the contents of the copy, for example, delete the more out of the title or something, and then regenerate again, you can see the effect after the change. If you are working in a team, you should also write this to the environment.

Besides Adminlte, when we are at their official demo station, we will find that the template integrates a lot of beautiful features, such as Select2 in forms/advanced elements, the drop-down menu is the style of the arrow. Use Firebug to view its CSS compilation found referencing the CSS select2.min.css. Back to our own site to see the same, we will find that our site does not have such a CSS. So we're going to start by introducing it, but before we do, we need to know how to introduce JS or CSS to the page in Yii2. The following is the example of the introduction of JS, CSS is the same:

Method one, the same as in HTML: (not recommended, will cause the order of dependency disorder)

// external js file <script src= "Your JS path/plugins/select2/select2r.min.js" >// or <?=html:: Jsfile (' Your JS path/plugins/select2/select2r.min.js ')?>// internal JSvar a= ' abc ' </script >

Method Two, use $this->registerJs and $this->registerJsFile method (controllable dependence order, but introduce external JS when the proposed method three)

$this->registerjs ("var options =". Json_encode ($options). ";", View::P os_end, ' my-options '); // introduction of Internal JS $this->registerjsfile (' http://example.com/js/main.js ', [' depends ' = [\yii\web\jqueryasset:: ClassName ()]); // introduction of external JS file

Method Three, the introduction of external JS, the use of Yii2 new functions to register the resource bundle to deploy (more powerful, such as can be converted less, compression and merger, etc.), can refer to the backend/assets/appasset.php file:

namespace Backend\assets; UseYii\web\assetbundle;classAppassetextendsassetbundle{ Public $basePath= ' @webroot ';  Public $BASEURL= ' @web ';  Public $css= [        ' Css/site.css ',    ];  Public $js= [    ];  Public $depends= [        ' Yii\web\yiiasset ', ' Yii\bootstrap\bootstrapasset ',    ];}

After defining this class, in the view file:

Backend\assets\appasset::register ($this);

The defined site.css and the associated ' yii\web\yiiasset ' and ' yii\bootstrap\bootstrapasset ' defined CSS and JS are introduced. For more versatility, see the "Client Script" and "resources" in the YII2 authoritative guide for two chapters.

Now that we understand the above introduction, we can continue our plan to introduce SELECT2, let us first look at what resources we have introduced in our site, in your post-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);

First register the original appasset, and then register the Dmstr\web namespace under the Adminlteasset, we trace back to this file will find that only introduced vendor/almasaeed2010/ The AdminLTE.min.css and changes in the dist file *. Min.css these two CSS files (almasaeed2010 file is our compose download Yii2-adminlte-asset automatic download dependent file), but we open vendor/almasaeed2010/adminlte/ Plugins, you will find a lot of features, we mentioned above the Select2 is also in it. We can of course build select2asset.php files on the adminlteasset.php side, but for the same reason as in the gii template above, it's best not to change the files under vendor, so we'll build this file in Backend/assets, Specific document content can be consulted:

<?phpnamespace backend\assets; UseYii\web\assetbundle;classSelect2assetextendsassetbundle{ Public $sourcePath= ' @vendor/almasaeed2010/adminlte/plugins/select2 ';//Path     Public $css= [        ' Select2.min.css ',//CSS    ];  Public $js= [        ' Select2.min.js '//JS    ];  Public $depends= [        ' Dmstr\web\adminlteasset ',//Dependent Relationships    ];}

At the same time in layouts/main.php:

Backend\assets\select2asset::register ($this); // Dmstr\web\adminlteasset::register ($this);

Adminlteasset This line can be commented out, because we have written in Select2asset dependent Adminlteasset, so will automatically register the dependent file CSS and JS, then we look at the element again, Will find more select2.min.css and select2.min.js, with these two we can use the Triangle style drop-down menu.

That's it, sleep first.

YII2 related learning records, customizing the GII template and referencing JS, CSS in vendor (iv)