How to introduce css and js files into yii framework

1. You can import it directly on the view page

2. You can directly write native code to import it. The path is the project directory/ web/css or /js

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

Recommended tutorials: yii framework

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;]);  
    }  }

Write at the beginning of the view file:

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

Up to now, we can test on the browser and find that the css and js files are not introduced , please note 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, we can put to a separate page)

#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('@web/css/font-awesome.min.css',['depends'=>['api\assets\AppAsset']]);  
  
 $this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['api\assets\AppAsset']]);  
 //$this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['api\assets\AppAsset'],'position'=>$this::POS_HEAD]);

Update To learn more programming-related content, please visit the Programming Tutorial column of the PHP Chinese website!

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