Detaillierte Einführung in die Methode zum Laden von CSS, JS und statischen Ressourcen in Yii2

黄舟
Freigeben: 2023-03-06 14:00:02
Original
1492 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zum Laden statischer Ressourcen in Yii2 vorgestellt. Interessierte Freunde können sich darauf beziehen.

Anwendungsszenarien

Yii2 stellt die AppAsset-Klasse zum Verwalten statischer Ressourcen bereit. Wenn Sie die Yii2-Layoutvorlage verwenden, möchten Sie einen Teil von js darin schreiben Eine Seite und am Ende der Seite ist es nicht möglich, Skript-Tags direkt zu verwenden.

Verwenden Sie die AppAsset-Klasse, um statische Ressourcen zu verwalten

Öffnen Sie assetAppAsset.php und definieren Sie addJs() und addCss() für die Einführung in statischen Seiten bzw. Externe JS- und CSS-Dateien

1. AppAsset.php-Dateicode ändern

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"
      ]
    ); 
  } 
}
Nach dem Login kopieren

2 eine statische Seite .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");
?>
Nach dem Login kopieren

Laden Sie den Javascript-Code unten auf der Website-Seite

js-Datei innerhalb der Webseite Oder Code entsprechend der Reihenfolge beim Laden der Seite, um zu vermeiden, dass der js-Zeitprozess ausgeführt wird und die Seite leer ist, was zu einer schlechten Benutzererfahrung führt. Wird im Allgemeinen unten auf der Webseite nach platziert.


Option 1

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

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); ?>
Nach dem Login kopieren

Lösung für das Problem, dass Yii2 JS unten auf der Seite lädt und Die Syntax-Eingabeaufforderung schlägt fehl

Fügen Sie einfach das Skript-Tag hinzu. Wenn Sie andere Methoden kennen, teilen Sie uns dies bitte mit. Vielen Dank!


<script type="text/javascript">
<?php $this->beginBlock(&#39;js&#39;) ?> 
  //js代码
<?php $this->endBlock() ?> 
<?php $this->registerJs($this->blocks[&#39;js&#39;], \yii\web\View::POS_END); ?> 
</script>
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Methode zum Laden von CSS, JS und statischen Ressourcen in Yii2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!