Yii2 learning records, custom gii templates and references js, css (4), yii2gii

Yii2 learning records, custom gii templates and references js, css (4), yii2gii

In the previous article, the background template framework has been set up, but there are still some inconsistencies, such as two User headers, or we want to add or delete some public items when gii is generated. Therefore, we need to define our own gii template.

Taking the CRUD template as an example, the default gii template is located in the default directory of: vendor/yiisoft/yii2-gii/generators/crud, of course, we can create a directory in parallel with default here, but it is not recommended to create a directory here, because it is the vendor directory. As mentioned in the previous chapter, do not change the content under the vendor directory, in this way, you do not need to submit the vendor directory during git release or team sharing, which is convenient.

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

$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            ]        ]    ],];    

In this way, accessing the CRUD generator in gii will find one more option: (if you change the backend configuration, you can only access gii through the background url)

Remember to replace the copied content, such as deleting the multiple titles, and re-create the content to see the effect after the change. If you are working with a team, you should also write this into the environment.

In our official demo site, we will find that the Template integrates many beautiful functions, such as select2 in Forms/Advanced Elements. The drop-down menu is the arrow style. The css select2.min.css is used in firebug‑based css compilation and discovery. Return to our own site and check it again. We will find that our site does not have such a css. So we need to start introducing it, but before that, we need to first understand how to introduce js or css in yii2. The following uses js as an example. css is the same as this:

Method 1: directly the same as in html: (not recommended, leading to 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 js <script> var a = 'abc' </script>

Method 2: Use$this->registerJsAnd$this->registerJsFileMethod (controllable dependency sequence, but method 3 is recommended when external js is introduced)

$ This-> registerJs ("var options = ". json_encode ($ options ). ";", View: POS_END, 'My-options'); // introduce internal js $ this-> registerJsFile ('HTTP: // example.com/js/main.js ', ['desc' => [\ yii \ web \ JqueryAsset: className ()]); // introduce an external js File

Method 3: Use the new Yii2 function to register a resource package for deployment (more powerful, such as less conversion, compression, and merge) when introducing external js models. Refer to backend/assets/AppAsset. PHP file:

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',    ];}

After this class is defined, in the View File:

backend\assets\AppAsset::register($this);

The built-in site.css and associated css and js defined by 'yii \ web \ yiiasset' and 'yii \ bootstrap \ bootstrapasset' can be introduced. For more functions, see "client script" and "resource" in the YII2 authoritative guide.

Now that we know the above introduction method, we can continue to introduce the select2 plan. Let's take a look at the resources introduced by our site, in the layouts/main. php after your copy:

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 existing AppAsset, and then register the AdminLteAsset under the dmstr \ web namespace, we will find that only the adminlte.min.css file in the vendor/almasaeed2010/distfile and the changed * .min.css css file are introduced in this file. ), however, when we enable vendor/almasaeed2010/adminlte/plugins, we will find that there are many other functions, and the select2 mentioned above is also in it. Of course, we can go to AdminLteAsset. set up Select2Asset at the same level in php. PHP file, but the reason is the same as mentioned in the gii template above. It is best not to change the file under the vendor, so we will create this file in the backend/assets. For details about the file content, refer:

<? Phpnamespace backend \ assets; use yii \ web \ AssetBundle; class Select2Asset extends AssetBundle {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 ', // dependency];}

Also in layouts/main. php:

backend\assets\Select2Asset::register($this);// dmstr\web\AdminLteAsset::register($this);

Callback and select2.min. js. With these two options, we can use the triangle style drop-down menu.

The above is the case. Go to bed first.