Yii2에서 CSS, js 및 정적 리소스를 로드하는 방법에 대한 자세한 소개

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

애플리케이션 시나리오

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

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

assetsAppAsset.php를 열고 정적 페이지에 도입할 addJs() 및 addCss() 정의 외부 js, css 파일

1. AppAsset.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. 정적 페이지에서

<?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 시간 프로세스의 실행을 방지하여 페이지가 비어 있게 하고 사용자 경험을 저하시킵니다. 일반적으로 웹페이지 하단의 다음에 위치합니다.

옵션 1

아아앙

옵션 2

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

Yii2를 해결하여 페이지 하단에 JS를 로드하면 구문 프롬프트가 실패합니다

스크립트 태그만 추가하세요. 옵션 2만 유효합니다. 다른 방법을 알고 계시다면 알려주세요. 감사합니다!

아아앙

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