yii2怎么引入css和js文件

2915

yii2怎么引入css和js文件

引入方式有多種：

1、可以直接在視圖頁面上引入

<?php  use YIIhelpersHtml;?>=Html::cssFile('@web/css/index.css')?&gt;=Html::JSFile('@web/js/jquery.min.js')?&gt;

2、可以直接寫原生代碼引入，路徑是項目目錄/web/css 或者/js

<script></script>

3、可以使用assetBundle管理css樣式及js腳本

資源包定義：basic/assets/AppAsset.php

<?php /**  * @link http://www.yiiframework.com/  * @copyright Copyright (c) 2008 Yii Software LLC  * @license http://www.yiiframework.com/license/  */  namespace appassets;  use yiiwebAssetBundle;  /**  * @author Qiang Xue <qiang.xue@gmail.com> ?*?@since?2.0 ?*/ ?class?AppAsset?extends?AssetBundle{ ?????public?$basePath?=?'@webroot';???? ?????public?$baseUrl?=?'@web';???? ?????public?$css?=?[???????? ?????'css/site.css',???????? ?????'css/base.css' ????];???? ????public?$js?=?[???????? ????'js/sliders.js' ????];???? ????public?$depends?=?[?//依賴包，沒有可以不寫 ????????'yiiwebYiiAsset',???????? ????????'yiibootstrapBootstrapAsset',?? ????];? ????//定義按需加載JS方法，注意加載順序在最后?? ????public?static?function?addScript($view,?$jsfile)?{?? ????????$view-&gt;registerJsFile($jsfile,?[AppAsset::className(),?'depends'?=&gt;?'apiassetsAppAsset']);?? ????}?? ?????? ???//定義按需加載css方法，注意加載順序在最后?? ????public?static?function?addCss($view,?$cssfile)?{?? ????????$view-&gt;registerCssFile($cssfile,?[AppAsset::className(),?'depends'?=&gt;?'apiassetsAppAsset']);?? ????}?? }

在視圖文件開頭寫入：

立即學習“前端免費學習筆記（深入）”；

<?php use yiihelpersHtml;use appassetsAppAsset; AppAsset::register($this);  ?>

到現在為止，我們可以在瀏覽器上測試，發現并沒有引入css和js文件，這里要注意了，我們還需要最后一步：

在視圖文件中我們要加入一下代碼（注：如果我們使用公共視圖文件，可以加入到公共視圖文件，如果沒有使用，可以放到單獨頁面中）

<?php $this->beginPage()??&gt;? <?php  $this->head()??&gt; <?php  $this->beginBody()??&gt;? <?php  $this->endBody()??&gt; <?php  $this->endPage()??&gt;

4、不需要在資源包管理器中定義方法，只要在視圖頁面中直接引入即可

AppAsset::register($this);?? //css定義一樣?? $this-&gt;registerCssFile('@web/css/font-awesome.min.css',['depends'=&gt;['apiassetsAppAsset']]);?? ?? ?$this-&gt;registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=&gt;['apiassetsAppAsset']]);?? //$this-&gt;registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=&gt;['apiassetsAppAsset'], 'position'=&gt;$this::POS_HEAD]);

相關文章教程推薦：yii教程

以上就是yii2怎么引入

? 版權聲明
THE END
PHP框架
# php# css# JS# YII
喜歡就支持一下吧
點贊15 分享