Yii2 に CSS、JS、静的リソースをロードする方法

この記事は主に Yii2 に静的リソースをロードするための CSS と JS をロードする方法を紹介します。興味のある方は参考にしてください。

アプリケーションシナリオ

Yii2 レイアウトテンプレートを使用する場合、ページ内およびページの下部に js を記述したい場合、Yii2 は静的リソースを管理するための 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. 静的ページで 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");
?>

Web ページの下部にある JavaScript コードを読み込みます

js ファイルまたは Web ページ内のコード、ページの読み込み順序に従って、実行を回避します。js 時間のプロセスによりページが空白になり、ユーザー エクスペリエンスが低下します。通常、Web ページの下部、36cc49f0c466276486e50c850b7e4956 の後ろに配置されます。

オプション1

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

オプション2

Yii2ロードJの解決策ページ下部の S、構文 プロンプトが無効です

というスクリプトタグを追加します。ただし、オプション 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 アセットのキャッシュをクリアする方法

以上がYii2 に CSS、JS、静的リソースをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。