Yii Framework에 CSS, javascript 파일 포함

Yii Framework에 Javascript 또는 CSS 파일을 포함하는 방법은 무엇입니까?

내 사이트에 약간의 Javascript 응용 프로그램이 실행되는 페이지를 만들고 싶으므로 특정보기에 .js및 .css파일 을 포함 하고 싶습니다 .

이 같은:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>

다음을 추가하여 수행 할 수 있습니다.

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');

이 질문에 대답하고 싶었습니다.

보호 된 폴더 외부에있는 css 폴더, ajax를 많이 사용할 때 외부에 포함해야하는 CSS 및 위젯 파일, 코어의 js 및 css 파일과 같이 css 및 javascript 파일이있는 곳이 많습니다. 또한 언젠가 외부 적으로 포함해야하는 프레임 워크입니다. 그래서 그들은 이것을하는 몇 가지 방법입니다.

jquery.js, jquery.ui.js와 같은 프레임 워크의 핵심 js 파일 포함

<?php 
Yii::app()->clientScript->registerCoreScript('jquery');     
Yii::app()->clientScript->registerCoreScript('jquery.ui'); 
?>

보호 된 폴더 외부에있는 css 폴더의 파일을 포함합니다.

<?php 
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.js');
?>

확장 또는 위젯의 CSS 및 JS 파일을 포함합니다.

여기서 fancybox는 보호 된 폴더 아래에있는 확장입니다. 포함 된 파일의 경로는 다음과 같습니다. / protected / extensions / fancybox / assets /

<?php
// Fancybox stuff.
$assetUrl = Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('ext.fancybox.assets'));
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.fancybox-1.3.4.pack.js'); 
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.mousewheel-3.0.4.pack.js'); 
?>  

또한 핵심 프레임 워크 파일을 포함 할 수 있습니다. 예 : CListView js 파일을 포함하고 있습니다.

<?php
$baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets'));
Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END);  
?>

• 새로운 ajax 파일을로드 할 때마다 js 함수를 호출 할 때 충돌이 발생하기 때문에 zii 위젯 또는 확장의 js 파일을 때때로 외부 적으로 포함해야합니다.

자세한 내용 은 내 블로그 기사를 참조하십시오.

conf / main.php에서 쉽습니다. 이것은 부트 스트랩을 사용한 나의 예입니다. 여기에서 볼 수 있습니다

'components'=>array(
    'clientScript' => array(
        'scriptMap' => array(
            'jquery.js'=>false,  //disable default implementation of jquery
            'jquery.min.js'=>false,  //desable any others default implementation
            'core.css'=>false, //disable
            'styles.css'=>false,  //disable
            'pager.css'=>false,   //disable
            'default.css'=>false,  //disable
        ),
        'packages'=>array(
            'jquery'=>array(                             // set the new jquery
                'baseUrl'=>'bootstrap/',
                'js'=>array('js/jquery-1.7.2.min.js'),
            ),
            'bootstrap'=>array(                       //set others js libraries
                'baseUrl'=>'bootstrap/',
                'js'=>array('js/bootstrap.min.js'),
                'css'=>array(                        // and css
                    'css/bootstrap.min.css',
                    'css/custom.css',
                    'css/bootstrap-responsive.min.css',
                ),
                'depends'=>array('jquery'),         // cause load jquery before load this.
            ),
        ),
    ),
),

보기에서 다음을 추가하십시오.

<?php  
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile('/js/yourscript.js', CClientScript::POS_END);
  $cs->registerCssFile('/css/yourcss.css');
?>

js 파일을 등록 할 때 두 번째 매개 변수는 스크립트의 위치입니다. CClientScript :: POS_END를 설정하면 javascript가로드되기 전에 HTML이 렌더링되도록합니다.

Yii 앱에 javascript, css를 포함 할 수있는 많은 방법이 있습니다 . 오늘은 간단하고 도움이되는 세 가지 방법을 보여 드리겠습니다.

config / main.php를 편집하여 js, css를 추가하는 간단한 방법

// application components
  'components'=>array(
         // ...
        'clientScript'=>array(
            'packages'=>array(
                'jquery'=>array(
                    'baseUrl'=>'//ajax.googleapis.com/ajax/libs/jquery/1/',
                    'js'=>array('jquery.min.js'),
                )
            ),
        ),
        // ...
  ),

getClientScript 사용

일반적으로 컨트롤러 또는 테마 레이아웃에 코드 블록을 추가합니다.

$baseUrl = Yii::app()->baseUrl; 
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/yourscript.js');
$cs->registerCssFile($baseUrl.'/css/yourcss.css');

또는 더 짧게 :

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/javascript/file',CClientScript::POS_END);
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');

핵심 js 파일 포함

Yii::app()->clientScript->registerCoreScript('jquery');     
Yii::app()->clientScript->registerCoreScript('jquery.ui');

더 빠른 Yii API 문서 : http://yii.codexamples.com/

특정보기에 JS 및 CSS 파일을 포함하려면 컨트롤러를 통해 매개 변수를 전달하여 수행 할 수 있습니다. false, true여기에는 CSS 및 JS가 포함됩니다. 예 :

$this->renderPartial(
    'yourviewname',
    array(
        'model' => $model,
        false,
        true
    )
);

여기에 CDN 및 오프라인 스크립트를 사용하는 좋은 솔루션이 있습니다.

이 코드는 내가 빌드하는 모든 애플리케이션에서 사용하므로 모든 앱에서 사용할 수 있습니다.

포함 된 스크립트 :

• main.css
• main.js
• jQuery
• jQuery / CD
• 부트 스트랩 3.1
• 부트 스트랩 3.1 / CDN
• 팬시 박스 2
• Fancybox 2 / CDN
• FontAwesome 4
• FontAwesome 4 / CDN
• Google Analytics 스크립트

1 단계:

이 코드를 config / main.php에 넣으십시오.

        'params'=>array(
            'cdn'=>true, // or false
...

2 단계:

루트 앱 폴더에 resoreses 폴더를 만들고 거기에 스크립트를 넣으십시오.

res/
--js
--css
--img
--lib
--style
..

3 단계 :

이 코드를 components / controller.php에 넣으십시오.

public function registerDefaults() 
{
    $cs = Yii::app()->clientScript;

    if (Yii::app()->params['cdn']){
        $cs->scriptMap = array(
            'jquery.js' => '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
            'jquery.min.js' => '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
        );
        $cs->packages = array(
            'bootstrap' => array(
                'basePath' => 'application.res',
                'baseUrl' => '//netdna.bootstrapcdn.com/bootstrap/3.1.1/',
                'js' => array('js/bootstrap.min.js'),
                'css' => array('css/bootstrap.min.css'),
                'depends' => array('jquery')
            ),
        );
    } else {
        $cs->packages = array(
            'bootstrap' => array(
                'basePath' => 'application.res',
                'baseUrl' => Yii::app()->baseUrl . '/res/lib/bootstrap/',
                'js' => array('js/bootstrap.js'),
                'css' => array('css/bootstrap.css'),
                'depends' => array('jquery')
            ),
        );
    }

    $cs->registerPackage('bootstrap');

    $cs->registerCSSFile(Yii::app()->baseUrl . '/res/style/main.css');
    $cs->registerScriptFile(Yii::app()->baseUrl . '/res/js/main.js');
}

public function registerFancybox($buttons = false, $thumbs = false) 
{
    $cs = Yii::app()->clientScript;

    $cs->packages = array(
        'fancybox' => array(
            'basePath' => 'application.res',
            'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/',
            'js' => array('lib/jquery.mousewheel-3.0.6.pack.js', 'source/jquery.fancybox.pack.js'),
            'css' => array('source/jquery.fancybox.css'),
            'depends' => array('jquery')
        ),
        'fancybox-buttons' => array(
            'basePath' => 'application.res',
            'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/source/helpers/',
            'js' => array('jquery.fancybox-buttons.js'),
            'css' => array('jquery.fancybox-buttons.css'),
        ),
        'fancybox-thumbs' => array(
            'basePath' => 'application.res',
            'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/source/helpers/',
            'js' => array('jquery.fancybox-thumbs.js'),
            'css' => array('jquery.fancybox-thumbs.css'),
        )
    );

    $cs->registerPackage('fancybox');
    if ($buttons)
        $cs->registerPackage('fancybox-buttons');
    if ($thumbs)
        $cs->registerPackage('fancybox-thumbs');
}

public function registerFontAwesome(){

    $cs = Yii::app()->clientScript;

    if (Yii::app()->params['cdn']):
        $cs->packages = array(
            'fontAwesome' => array(
                'basePath' => 'application.res',
                'baseUrl' => '//netdna.bootstrapcdn.com/font-awesome/4.0.0/',
                'css' => array('css/font-awesome.min.css'),
            )
        );
    else:
        $cs->packages = array(
            'fontAwesome' => array(
                'basePath' => 'application.res',
                'baseUrl' => Yii::app()->baseUrl . '/res/lib/font-awesome/',
                'css' => array('/css/font-awesome.min.css'),
            )
        );
    endif;

    $cs->registerPackage('fontAwesome');
}

public function registerGoogleAnalytics()
{
    if($this->config('settings_google_analytics_id')){
        Yii::app()->clientScript->registerScript('GA',"
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', '".Yii::app()->params['cdn']."', '{$_SERVER['SERVER_NAME']}');
            ga('send', 'pageview');
        ");
    }
}

4 단계 :

//layouts/main.php에서 이와 같은 함수를 호출하십시오.

Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();

보기 파일에 다음 줄을 추가하여 이와 같은 작업을 수행하십시오.

Yii :: app ()-> clientScript-> registerScriptFile (Yii :: app ()-> baseUrl. '/ path / to / your / javascript / file');
Yii :: app ()-> clientScript-> registerCssFile (Yii :: app ()-> baseUrl. '/ path / to / css / file');

또한 CSS와 JS 모두에 모듈 자산을 추가하려는 경우 다음 로직을 사용할 수 있습니다. getPathOfAlias에 대한 올바른 경로를 표시하는 방법을 참조하십시오 .

public static function register($file)
{
    $url = Yii::app()->getAssetManager()->publish(
    Yii::getPathOfAlias('application.modules.shop.assets.css'));

    $path = $url . '/' . $file;
    if(strpos($file, 'js') !== false)
        return Yii::app()->clientScript->registerScriptFile($path);
    else if(strpos($file, 'css') !== false)
        return Yii::app()->clientScript->registerCssFile($path);

    return $path;
}

위의 코드는 GPLed Yii 기반 Webshop 앱 에서 가져온 것입니다 .

컨트롤러 작업에서 스크립트를 추가 할 수도 있습니다. 액션 메서드에 다음 줄을 추가하면 해당 스크립트가 해당 뷰에만 나타납니다.

Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/custom.js', CClientScript::POS_HEAD);

POS_HEAD는 프레임 워크가 헤드 섹션에 스크립트를 넣도록 지시합니다.

Yii 프레임 워크에서는 아래 방법을 사용하여 js 및 css를 포함 할 수 있습니다.

CSS 포함 :

{Yii::app()->request->baseUrl}/css/styles.css

JS 포함 :

{Yii::app()->request->baseUrl}/js/script.js

이미지 포함 :

{Yii::app()->request->baseUrl}/images/logo.jpg

참고 : yii에서 레이아웃 개념을 사용하면보기 템플릿에서 지정하는 대신 css 및 js를 추가 할 수 있습니다.

The Layout Folder에 CSS와 JS를 추가하세요.

  <!--// Stylesheets //-->
    <?php
        $themepath=Yii::app()->theme->baseUrl;
        Yii::app()->clientScript->registerCoreScript("jquery");
    ?>

        <link href="<?php echo $themepath."/css/custom.css"; ?>" rel="stylesheet" media="all" />


<!--// Javascript //-->
<?php Yii::app()->clientScript->registerCoreScript("jquery"); ?>
</script> -->
<script type="text/javascript" src="<?php echo $themepath; ?>/js/video.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="/news/js/popup.js"></script>

링크는 뷰 페이지의 첫 번째 PHP 태그 위에 입력해야합니다.

부트 스트랩 확장 사용

내 CSS 파일 : themes / bootstrap / css / style.css

내 js 파일 : root / js / script.js

에서 테마 / 부트 스트랩 / 뷰 / 레이아웃 / main.php

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/styles.css" />

<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/script.js"></script>

이것은 또한 main.php에 스크립트와 CSS를 추가하는 쉬운 방법이었습니다.

<script src="<?=Yii::app()->theme->baseUrl; ?>/js/bootstrap.min.js"></script>
<link href="<?=Yii::app()->theme->baseUrl; ?>/css/bootstrap.css" rel="stylesheet" type="text/css">

Theme를 사용하는 경우 아래 구문을 사용할 수 있습니다.

Yii::app()->theme->baseUrl

CSS 파일 포함 :

<link href="<?php echo Yii::app()->theme->baseUrl;?>/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">

JS 파일 포함

<script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery-2.2.3.min.js"></script>

테마를 사용하지 않는 경우

Yii::app()->request->baseUrl

이렇게 사용

<link href="<?php echo Yii::app()->request->baseUrl; ?>/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-2.2.3.min.js"></script>

• Yii에서 자산은 engine / assets / Appassets.php에 선언되어 있습니다. 이렇게하면 모든 CSS 및 JS 파일을 더 쉽게 관리 할 수 ​​있습니다.