How to load css, js and static resources in Yii2

不言
Release: 2023-03-25 09:56:01
Original
1343 people have browsed it

This article mainly introduces the method of loading css and js to load static resources in Yii2. It has certain reference value. Interested friends can refer to it.

Application scenarios

Yii2 provides the AppAsset class to manage static resources. When using the Yii2 layout template, if you want to write a piece of js inside a page and At the bottom of the page, it is not possible to use script tags directly.

Use the AppAsset class to manage static resources

Open assetsAppAsset.php and define addJs() and addCss() for introduction in static pages respectively External js, css files

1. Modify the AppAsset.php file code

namespace backend\assets;
use yii\web\AssetBundle;
/**
 * @author Qiang Xue 
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
  public $basePath = "@webroot";
  public $baseUrl = "@web";
  //默认自动加载样式
  public $css = [
    "css/site.css",
  ];
  //默认自动加载js
  public $js = [
  ];
  //依赖关系管理
  public $depends = [
    "yii\web\YiiAsset",
    "yii\bootstrap\BootstrapAsset",
  ];  
  //定义按需加载JS方法,注意加载顺序在最后 
  public static function addJs($view, $jsfile) { 
    $view->registerJsFile(
      $jsfile, 
      [
        AppAsset::className(), 
        "depends" => "backend\assets\AppAsset"
      ]
    ); 
  } 
  //定义按需加载css方法,注意加载顺序在最后 
  public static function addCss($view, $cssfile) { 
    $view->registerCssFile(
      $cssfile, 
      [
       AppAsset::className(), 
       "depends" => "backend\assets\AppAsset"
      ]
    ); 
  } 
}
Copy after login

2. Call AppAsset.php on the static page

<?php

use backend\assets\AppAsset;
AppAsset::register($this);
AppAsset::addJs($this,Yii::$app->request->baseUrl."/js/a.js");
AppAsset::addCss($this,Yii::$app->request->baseUrl."/css/b.css");
?>
Copy after login

Load the javascript code at the bottom of the website page

The js file or code inside the web page, according to The page loading sequence avoids the execution of js time process causing the page to be blank and causing poor user experience. Generally placed at the bottom of the web page behind .

Option 1

<?php
$this->registerJs("
  $(function () {
  //为所欲为的写你想要写的js代码吧
  
  });
", \yii\web\View::POS_END);
Copy after login

Option 2

##

<?php $this->beginBlock(&#39;js&#39;) ?> 

  //js代码
  
<?php $this->endBlock() ?> 
<?php $this->registerJs($this->blocks[&#39;js&#39;], \yii\web\View::POS_END); ?>
Copy after login

##Solution to the problem that Yii2 loads JS at the bottom of the page and the syntax prompt fails


Just add the script tag. Note that only option 2 is valid. If you know of other methods, please let us know. Thank you!


Copy after login

Related recommendations:

Yii2 assets clear cache method


The above is the detailed content of How to load css, js and static resources in Yii2. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template