CSS 및 JS 파일을 yii2로 가져오는 방법-YII-php.cn

CSS 및 JS 파일을 yii2로 가져오는 방법

王林

풀어 주다： 2019-12-17 16:19:48

원래의

2632명이 탐색했습니다.

CSS 및 JS 파일을 yii2로 가져오는 방법

소개하는 방법은 다양합니다.

1. 뷰 페이지에서 직접 소개할 수 있습니다

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

로그인 후 복사

2. 경로는 프로젝트 디렉터리 / web/css 또는 /js

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

로그인 후 복사

3.assetBundle을 사용하여 CSS 스타일 및 js 스크립트를 관리할 수 있습니다.

리소스 번들 정의: 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;]);  
    }  
}

로그인 후 복사

뷰 파일 시작 부분에 쓰기:

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

로그인 후 복사

지금까지 브라우저를 사용할 수 있습니다. 테스트 결과 CSS 및 js 파일이 도입되지 않은 것으로 나타났습니다. 여기에 주의하세요.

뷰에 몇 가지 코드를 추가해야 합니다. file (참고: 공개 보기 파일을 사용하면 공개 보기 파일에 추가할 수 있습니다. 사용하지 않으면 별도의 페이지에 배치할 수 있습니다.)

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

로그인 후 복사

4 메서드를 정의할 필요가 없습니다. 리소스 패키지 관리자에서 보기 페이지에 직접 소개해주세요

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

로그인 후 복사

관련 추천 튜토리얼: yii tutorial

위 내용은 CSS 및 JS 파일을 yii2로 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!