Comment importer des fichiers CSS et JS dans Yii2-YII-php.cn

Comment importer des fichiers CSS et JS dans Yii2

王林

Libérer： 2019-12-17 16:19:48

original

2736 Les gens l'ont consulté

Comment importer des fichiers CSS et JS dans Yii2

Il existe de nombreuses façons de le présenter :

1 Vous pouvez le présenter directement sur la page de visualisation

<?php use yii\helpers\Html;?><?=Html::cssFile(&#39;@web/css/index.css&#39;)?><?=Html::jsFile(&#39;@web/js/jquery.min.js&#39;)?>

Copier après la connexion

. 2 , vous pouvez écrire directement du code natif à importer, le chemin est le répertoire du projet /web/css ou /js

<script src="js/nav.js"></script>

Copier après la connexion

3 Vous pouvez utiliser AssetBundle pour gérer les styles CSS. et scripts js

Définition du package de ressources : basic/assets/AppAsset.php

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */
 namespace app\assets; 
use yii\web\AssetBundle; 
/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
 class AppAsset extends AssetBundle{
     public $basePath = &#39;@webroot&#39;;    
     public $baseUrl = &#39;@web&#39;;    
     public $css = [        
     &#39;css/site.css&#39;,        
     &#39;css/base.css&#39;
    ];    
    public $js = [        
    &#39;js/sliders.js&#39;
    ];    
    public $depends = [ //依赖包，没有可以不写
        &#39;yii\web\YiiAsset&#39;,        
        &#39;yii\bootstrap\BootstrapAsset&#39;,  
    ]; 
    //定义按需加载JS方法，注意加载顺序在最后  
    public static function addScript($view, $jsfile) {  
        $view->registerJsFile($jsfile, [AppAsset::className(), &#39;depends&#39; => &#39;api\assets\AppAsset&#39;]);  
    }  
      
   //定义按需加载css方法，注意加载顺序在最后  
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile($cssfile, [AppAsset::className(), &#39;depends&#39; => &#39;api\assets\AppAsset&#39;]);  
    }  
}

Copier après la connexion

Écrire au début du fichier de vue :

<?php
use yii\helpers\Html;use app\assets\AppAsset;
AppAsset::register($this); 
?>

Copier après la connexion

Jusqu'à présent, nous pouvons tester sur le navigateur et constater qu'il n'est pas introduit de fichiers css et js, nous devons faire attention ici, nous avons encore besoin de la dernière étape :

Nous devons ajouter du code au fichier de vue (note : si nous utilisons le fichier de vue publique, nous pouvons l'ajouter au fichier de vue publique, sinon Utiliser, peut être placé dans une page séparée)

<?php$this->beginPage() ?> 
<?php $this->head() ?>
<?php $this->beginBody() ?> 
<?php $this->endBody() ?>
<?php $this->endPage() ?>

Copier après la connexion

4 Il n'est pas nécessaire de définir la méthode dans le fichier de vue publique. gestionnaire de packages de ressources, introduisez-le simplement directement dans la page d'affichage

AppAsset::register($this);  
//css定义一样  
$this->registerCssFile(&#39;@web/css/font-awesome.min.css&#39;,[&#39;depends&#39;=>[&#39;api\assets\AppAsset&#39;]]);  
  
 $this->registerJsFile(&#39;@web/js/jquery-ui.custom.min.js&#39;,[&#39;depends&#39;=>[&#39;api\assets\AppAsset&#39;]]);  
//$this->registerJsFile(&#39;@web/js/jquery-ui.custom.min.js&#39;,[&#39;depends&#39;=>[&#39;api\assets\AppAsset&#39;],
&#39;position&#39;=>$this::POS_HEAD]);

Copier après la connexion

Tutoriels d'articles connexes recommandés : tutoriel yii

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!