How to import css and js files into yii2-YII-php.cn

How to import css and js files into yii2

王林

Release： 2019-12-17 16:19:48

Original

2724 people have browsed it

How to import css and js files into yii2

There are many ways to introduce it:

1. You can introduce it directly on the view page

<?php use yii\helpers\Html;?><?=Html::cssFile(&#39;@web/css/index.css&#39;)?><?=Html::jsFile(&#39;@web/js/jquery.min.js&#39;)?>

Copy after login

2 , you can directly write native code to import, the path is the project directory /web/css or /js

<script src="js/nav.js"></script>

Copy after login

3, you can use assetBundle to manage css styles and js scripts

Resource package definition: basic/assets/AppAsset.php

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */
 namespace app\assets; 
use yii\web\AssetBundle; 
/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
 class AppAsset extends AssetBundle{
     public $basePath = &#39;@webroot&#39;;    
     public $baseUrl = &#39;@web&#39;;    
     public $css = [        
     &#39;css/site.css&#39;,        
     &#39;css/base.css&#39;
    ];    
    public $js = [        
    &#39;js/sliders.js&#39;
    ];    
    public $depends = [ //依赖包，没有可以不写
        &#39;yii\web\YiiAsset&#39;,        
        &#39;yii\bootstrap\BootstrapAsset&#39;,  
    ]; 
    //定义按需加载JS方法，注意加载顺序在最后  
    public static function addScript($view, $jsfile) {  
        $view->registerJsFile($jsfile, [AppAsset::className(), &#39;depends&#39; => &#39;api\assets\AppAsset&#39;]);  
    }  
      
   //定义按需加载css方法，注意加载顺序在最后  
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile($cssfile, [AppAsset::className(), &#39;depends&#39; => &#39;api\assets\AppAsset&#39;]);  
    }  
}

Copy after login

Write at the beginning of the view file:

<?php
use yii\helpers\Html;use app\assets\AppAsset;
AppAsset::register($this); 
?>

Copy after login

Up to now, we can test on the browser and find that it is not introduced css and js files, we need to pay attention here, we still need the last step:

We need to add some code to the view file (note: if we use the public view file, we can add it to the public view file, if not Use, can be placed in a separate page)

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

Copy after login

4. There is no need to define the method in the resource package manager, just introduce it directly in the view page

AppAsset::register($this);  
//css定义一样  
$this->registerCssFile(&#39;@web/css/font-awesome.min.css&#39;,[&#39;depends&#39;=>[&#39;api\assets\AppAsset&#39;]]);  
  
 $this->registerJsFile(&#39;@web/js/jquery-ui.custom.min.js&#39;,[&#39;depends&#39;=>[&#39;api\assets\AppAsset&#39;]]);  
//$this->registerJsFile(&#39;@web/js/jquery-ui.custom.min.js&#39;,[&#39;depends&#39;=>[&#39;api\assets\AppAsset&#39;],
&#39;position&#39;=>$this::POS_HEAD]);

Copy after login

Recommended related article tutorials: yii tutorial

The above is the detailed content of How to import css and js files into yii2. For more information, please follow other related articles on the PHP Chinese website!