Yii2에서 CSS, js 및 정적 리소스를 로드하는 방법

이 글에서는 Yii2에서 정적 리소스를 로드하기 위해 CSS와 JS를 로드하는 방법을 주로 소개합니다. 관심 있는 친구들은 참고할 수 있습니다.

애플리케이션 시나리오

Yii2는 정적 리소스를 관리하기 위한 AppAsset 클래스를 제공합니다. Yii2 레이아웃 템플릿을 사용할 때 페이지 내부와 페이지 하단에 js 조각을 작성하려는 경우 직접 사용할 수 없습니다. 스크립트 태그.

AppAsset 클래스를 사용하여 정적 리소스를 관리하세요

assetsAppAsset.php를 열고 addJs() 및 addCss()를 정의하여 외부 js 및 css 파일을 각각 정적 페이지에 도입하세요

1. php 파일 코드

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

2. 정적 페이지에서 AppAsset.php를 호출합니다

<?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");
?>

웹사이트 페이지 하단의 자바스크립트 코드

js 파일 또는 웹페이지 내부 코드를 로드합니다. 페이지 로딩 순서에 따라 실행을 피하십시오. js 시간 프로세스로 인해 페이지가 공백이 되어 사용자 경험이 저하됩니다. 일반적으로 웹페이지 하단 36cc49f0c466276486e50c850b7e4956 뒤에 위치합니다.

옵션 1

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

옵션 2

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

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

Yii2 로딩 JS에 대한 솔루션 페이지 하단에 구문이 있습니다. 프롬프트가 잘못되었습니다

다음과 같은 스크립트 태그를 추가하세요. 그러나 옵션 2만 유효하다는 점을 참고하세요. 다른 방법을 알고 계시다면 알려주세요.

관련 권장 사항:

Yii2 자산 캐시를 지우는 방법

위 내용은 Yii2에서 CSS, js 및 정적 리소스를 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!