Bao gồm CSS, tệp javascript trong Yii Framework

Làm cách nào để đưa tệp Javascript hoặc CSS vào Yii Framework?

Tôi muốn tạo một trang trên trang web của mình có một ứng dụng Javascript nhỏ đang chạy, vì vậy tôi muốn bao gồm .jsvà .csscác tệp trong một chế độ xem cụ thể.

Một cái gì đó như thế này:

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

Bạn có thể làm như vậy bằng cách thêm

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

Tôi thích trả lời câu hỏi này.

Đó là nhiều nơi mà chúng ta có các tệp css & javascript, như trong thư mục css nằm ngoài thư mục được bảo vệ, các tệp css & js của tiện ích mở rộng & tiện ích mà chúng ta cần đưa ra bên ngoài đôi khi sử dụng ajax nhiều, tệp js & css của lõi mà đôi khi chúng ta cũng cần đưa vào bên ngoài. Vì vậy, họ là một số cách để làm điều này.

Bao gồm các tệp js cốt lõi của khung như jquery.js, jquery.ui.js

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

Bao gồm các tệp từ thư mục css bên ngoài thư mục được bảo vệ.

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

Bao gồm các tệp css & js từ tiện ích mở rộng hoặc widget.

Đây là một phần mở rộng được đặt trong thư mục được bảo vệ. Tệp chúng tôi đưa vào có đường dẫn: / protected / extensions / favourite / asset /

<?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'); 
?>  

Ngoài ra, chúng ta có thể bao gồm các tệp khung chính: Ví dụ: Tôi đang bao gồm tệp js CListView.

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

• Đôi khi chúng ta cần bao gồm các tệp js của các widget hoặc tiện ích mở rộng zii khi chúng ta sử dụng chúng trong chế độ xem kết xuất nhận được từ lệnh gọi ajax, bởi vì tải mỗi lần tệp ajax mới sẽ tạo ra xung đột khi gọi các hàm js.

Để biết thêm chi tiết Xem bài viết blog của tôi

Dễ dàng trong conf / main.php của bạn. Đây là ví dụ của tôi với bootstrap. Bạn có thể thấy điều đó ở đây

'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.
            ),
        ),
    ),
),

Trong dạng xem, hãy thêm những thứ sau:

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

Vui lòng lưu ý tham số thứ hai khi bạn đăng ký tệp js, đó là vị trí của tập lệnh của bạn, khi bạn đặt nó CClientScript :: POS_END, bạn để HTML hiển thị trước khi javascript được tải.

Có nhiều phương pháp mà chúng tôi có thể đưa javascript, css vào Ứng dụng Yii của bạn . Hôm nay tôi sẽ trình bày ba phương pháp đơn giản và hữu ích.

Một cách đơn giản để thêm js, css bằng cách chỉnh sửa config / main.php

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

Sử dụng getClientScript

Thông thường, Chúng tôi thêm khối mã vào Bộ điều khiển hoặc bố cục của chủ đề của bạn

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

Hoặc ngắn hơn:

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

Bao gồm các tệp js lõi

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

Tài liệu API Yii nhanh hơn: http://yii.codexamples.com/

Để bao gồm các tệp JS và CSS trong một chế độ xem cụ thể, bạn có thể thực hiện thông qua bộ điều khiển bằng cách chuyển các tham số false, true, các tham số này sẽ bao gồm CSS và JS, ví dụ:

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

đây là một giải pháp tốt để sử dụng CDN và các tập lệnh ngoại tuyến

Tôi sử dụng mã này trong mọi ứng dụng tôi tạo, vì vậy bạn có thể sử dụng mã này trong bất kỳ ứng dụng nào.

Tập lệnh bao gồm:

• main.css
• main.js
• jQuery
• jQuery / CD
• Bootstrap 3.1
• Bootstrap 3.1 / CDN
• Fancybox 2
• Fancybox 2 / CDN
• FontAwesome 4
• FontAwesome 4 / CDN
• Tập lệnh Google Analytics

BƯỚC 1:

đặt mã này trong config / main.php

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

BƯỚC 2:

tạo thư mục echoreses trong thư mục ứng dụng gốc và đặt tập lệnh của bạn ở đó

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

BƯỚC 3:

đặt mã này trong các thành phần / 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');
        ");
    }
}

BƯỚC 4:

gọi các hàm như thế này trong //layouts/main.php

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

Làm điều gì đó giống như vậy bằng cách thêm dòng này vào tệp xem của bạn;

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

Ngoài ra, nếu bạn muốn thêm nội dung mô-đun cả CSS và JS, bạn có thể sử dụng logic sau. Xem cách bạn cần chỉ ra đường dẫn chính xác đến 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;
}

Đoạn mã trên được lấy từ ứng dụng Webshop dựa trên GPLed Yii .

Bạn cũng có thể thêm các tập lệnh từ hành động của bộ điều khiển. Chỉ cần thêm dòng này trong một phương thức hành động thì tập lệnh đó sẽ chỉ xuất hiện trong chế độ xem đó:

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

nơi POS_HEAD yêu cầu khung công tác đưa tập lệnh vào phần đầu

Trong khung Yii, Bạn có thể bao gồm js và css bằng phương pháp dưới đây.

Bao gồm CSS:

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

Bao gồm JS:

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

Bao gồm Hình ảnh:

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

Lưu ý: Bằng cách sử dụng khái niệm bố cục trong yii, Bạn có thể thêm css và js thay vì chỉ định trong mẫu chế độ xem.

Thêm CSS và JS vào Thư mục Bố cục. Truy cập vào bất kỳ đâu trong dự án

  <!--// 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>

liên kết phải nhập qua thẻ php đầu tiên trong trang xem

Sử dụng tiện ích mở rộng bootstrap

tệp css của tôi: themes / bootstrap / css / style.css

tệp js của tôi: root / js / script.js

tại theme / bootstrap / views / layouts / 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>

Đây cũng là một cách dễ dàng để thêm script và css trong main.php

<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">

Nếu bạn đang sử dụng Theme thì bạn có thể Cú pháp bên dưới

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

bao gồm Tệp CSS:

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

Bao gồm tệp JS

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

Nếu bạn không sử dụng chủ đề

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

Sử dụng như thế này

<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>

• Trong Yii Nội dung được khai báo trong engine / asset / Appassets.php Điều này giúp quản lý tất cả các tệp css và js của bạn dễ dàng hơn