目录
Yii2的相关学习记录,自定义gii模板和引用vendor中的js、css(四),yii2gii
首页 后端开发 php教程 Yii2的相关学习记录,自定义gii模板和引用vendor中的js、css(四),yii2gii_PHP教程

Yii2的相关学习记录,自定义gii模板和引用vendor中的js、css(四),yii2gii_PHP教程

Jul 12, 2016 am 08:55 AM
css gii yii2 学习 引用 模板 相关 自定义 记录

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配置:

<span>$config</span>['bootstrap'][] = 'gii'<span>;
</span><span>$config</span>['modules']['gii'] =<span> [
    </span>'class' => 'yii\gii\Module',
    'generators' => [ <span>//</span><span>here</span>
        'crud' => [ <span>//</span><span> generator name</span>
            'class' => 'yii\gii\generators\crud\Generator', <span>//</span><span> generator class</span>
            templates'<span> => [ //setting for out templates
                </span>'vishun' => '@backend/views/gii/crud/<span>default</span>'<span>, // template name => path to template
            ]
        ]
    ],
];    </span>
登录后复制

这样,再访问gii中的CRUD生成器就会发现多了一个选择:(如果改的是backend的配置,那么只能通过后台的url访问gii才会出现多出来的选项)

记得要改拷贝过来的内容,例如删除掉多出来的标题什么的,然后重新生成一遍,就可以看到改变后的效果了。如果是团队合作,也应该将这个写入到环境中去。

再说下AdminLTE,我们在其官方演示站时,会发现模板集成了很多的漂亮功能,例如在Forms/Advanced Elements中select2,下拉菜单是箭头的样式。用firebug查看其css编发现引用了select2.min.css这个css。再回到我们自己的站点同样看下,便会发现我们站点没有这么一个css。所以我们要着手将其引入,但在此之前,需要先了解Yii2中如何在页面中引入js或者css。下面以引入js为例,css与此相同:

方法一、直接同在html中一样:(不建议使用,会导致依赖顺序错乱)

<span>//</span><span>外部js文件</span>
<script src="你的js路径/plugins/select2/select2r.min.js">
<span>//</span><span>或者</span>
<?=Html::jsFile('你的js路径/plugins/select2/select2r.min.js')?>
<span>//</span><span>内部js</span>
<script> <span>var</span> a='abc' </script>
登录后复制

方法二、用$this->registerJs$this->registerJsFile方法(可控依赖顺序,但是引入外部js时建议用方法三)

<span>$this</span>->registerJs("var options = ".json_encode(<span>$options</span>).";", View::POS_END, 'my-options');<span>//</span><span>引入内部js</span>
<span>$this</span>->registerJsFile('http://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::className()]]);<span>//</span><span>引入外部js文件</span>
登录后复制

方法三、引入外部js式时,利用Yii2新功能注册资源包来部署(功能更强大,例如可以转换less,压缩合并等),可参照backend/assets/AppAsset.php文件:

<span>namespace backend\assets;
</span><span>use</span><span> yii\web\AssetBundle;

</span><span>class</span> AppAsset <span>extends</span><span> AssetBundle
{
    </span><span>public</span> <span>$basePath</span> = '@webroot'<span>;
    </span><span>public</span> <span>$baseUrl</span> = '@web'<span>;
    </span><span>public</span> <span>$css</span> =<span> [
        </span>'css/site.css',<span>
    ];
    </span><span>public</span> <span>$js</span> =<span> [
    ];
    </span><span>public</span> <span>$depends</span> =<span> [
        </span>'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',<span>
    ];
}</span>
登录后复制

定义此类后,在视图文件中:

backend\assets\AppAsset::register(<span>$this</span>);
登录后复制

即可将定义的site.css以及关联的'yii\web\YiiAsset'和'yii\bootstrap\BootstrapAsset'定义的css和js引入。更多功能请看YII2权威指南中的“客户端脚本”和“资源”两个章节。

既然已了解以上引入方法,可以继续我们引入select2的计划,我们先看下我们站点引入了哪些资源,在你copy后的layouts/main.php中:

<span>if</span> (<span>class_exists</span>('backend\assets\AppAsset'<span>)) {
    backend\assets\AppAsset</span>::register(<span>$this</span><span>);
} </span><span>else</span><span> {
    app\assets\AppAsset</span>::register(<span>$this</span><span>);
}
dmstr\web\AdminLteAsset</span>::register(<span>$this</span>);
登录后复制

先是注册了本来就有的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中,具体文件内容可参考:

<?<span>php
namespace backend\assets;
</span><span>use</span><span> yii\web\AssetBundle;

</span><span>class</span> Select2Asset <span>extends</span><span> AssetBundle
{
    </span><span>public</span> <span>$sourcePath</span> = '@vendor/almasaeed2010/adminlte/plugins/select2';<span>//</span><span>路径</span>
    <span>public</span> <span>$css</span> =<span> [
        </span>'select2.min.css',<span>//</span><span>css</span>
<span>    ];
    </span><span>public</span> <span>$js</span> =<span> [
        </span>'select2.min.js'<span>//</span><span>js</span>
<span>    ];
    </span><span>public</span> <span>$depends</span> =<span> [
        </span>'dmstr\web\AdminLteAsset',<span>//</span><span>依赖关系</span>
<span>    ];
}</span>
登录后复制

同时在layouts/main.php中:

backend\assets\Select2Asset::register(<span>$this</span><span>);
</span><span>//</span><span> dmstr\web\AdminLteAsset::register($this);</span>
登录后复制

可以将AdminLteAsset这行注释掉,因为我们在Select2Asset中写明了依赖AdminLteAsset,所以会自动注册依赖文件的css和js,这时我们再次查看元素,就会发现多了select2.min.css和select2.min.js,有了这两个我们便可以使用三角样式的下拉菜单了。

以上就这样了,睡觉先。

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/1114987.htmlTechArticleYii2的相关学习记录,自定义gii模板和引用vendor中的js、css(四),yii2gii 上文中后台模板框架已经搭建起来了,但还是有些不协调,像是有...
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中placeholder是什么意思 vue中placeholder是什么意思 May 07, 2024 am 09:57 AM

在 Vue.js 中,placeholder 属性指定输入元素的占位符文本,当用户未输入内容时显示,提供输入提示或示例,提高表单可访问性。其用法为在输入元素中设置 placeholder 属性,并可使用 CSS 自定义外观。最佳实践包括与输入相关、简短清晰、避免默认文本,并考虑可访问性。

js中什么是节点 js中什么是节点 May 07, 2024 pm 09:06 PM

节点是 JavaScript DOM 中表示 HTML 元素的实体。它们代表页面中的特定元素,可用于访问和操作该元素。常见的节点类型包括元素节点、文本节点、注释节点和文档节点。通过 DOM 方法(如 getElementById()),可以访问节点并对其进行操作,包括修改属性、添加/移除子节点、插入/替换节点和克隆节点。节点遍历有助于在 DOM 结构中导航。节点在动态创建页面内容、事件处理、动画和数据绑定方面非常有用。

浏览器插件是什么语言写的 浏览器插件是什么语言写的 May 08, 2024 pm 09:36 PM

浏览器插件通常使用以下语言编写:前端语言:JavaScript、HTML、CSS后端语言:C++、Rust、WebAssembly其他语言:Python、Java

vscode怎么设置未知属性 vscode设置未知属性方法 vscode怎么设置未知属性 vscode设置未知属性方法 May 09, 2024 pm 02:43 PM

1.首先,打开左下角的设置图标,点击settings选项2.随后,在跳转的窗口中找到css栏目3.最后,将unknownproperties菜单中的下拉选项改为error按钮即可

深入解析C++中的指针与引用,优化内存使用 深入解析C++中的指针与引用,优化内存使用 Jun 02, 2024 pm 07:50 PM

通过使用指针和引用,可以优化C++中的内存使用:指针:存储其他变量地址,可指向不同变量,节约内存,但可能产生野指针。引用:别名为另一个变量,始终指向同一个变量,不会产生野指针,适用于函数参数。通过避免不必要的复制、减少内存分配和节省空间,优化内存使用可以提升代码效率和性能。

vue中less文件可以引入数据吗 vue中less文件可以引入数据吗 May 07, 2024 pm 12:06 PM

是,Vue 中 Less 文件可以通过 CSS 变量和 Less 混入引入数据:创建 JSON 文件,包含数据。使用 @import 规则导入 JSON 文件。使用 CSS 变量或 Less 混入访问 JSON 数据。

vue中组件中的样式如何进行隔离 vue中组件中的样式如何进行隔离 May 09, 2024 pm 03:57 PM

Vue 组件中的样式隔离可通过四种方法实现:使用作用域样式创建隔离的作用域。使用 CSS Modules 生成唯一类名的 CSS 文件。采用 BEM 约定组织类名以保持模块化和可复用性。在极少数情况下,可在组件中直接注入样式,但并不推荐此做法。

Visual Studio 2019设置CSS的默认属性的图文步骤 Visual Studio 2019设置CSS的默认属性的图文步骤 May 09, 2024 pm 02:01 PM

1、打开VisualStudio2019,找到他的选项设置,点击CSS。2、在这看到下列属性的技术设置。3、此时就能在这设置文本以及填充边框。4、这时还能在这里进行浮动定位的设置。5、此刻还能在这里设置边框和背景,就能完成操作了。6、最后在这里点击确定按钮设置CSS默认属性。

See all articles