รวมไฟล์ CSS, javascript ใน Yii Framework

99

วิธีรวมไฟล์ Javascript หรือ CSS ใน Yii Framework

ฉันต้องการสร้างเพจบนไซต์ของฉันที่มีแอปพลิเคชัน Javascript ทำงานอยู่เล็กน้อยดังนั้นฉันจึงต้องการรวม.jsและ.cssไฟล์ในมุมมองที่เจาะจง

javascript  php  css  yii 
— วีจิ
แหล่งที่มา

คำตอบ:

168

สิ่งนี้:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
— Alexander Hramov
แหล่งที่มา
1
ฉันควรเรียกสิ่งนี้จากตัวควบคุมจากมุมมองหรือไม่
— user1077220
3
คุณควรเรียกสิ่งนี้จากมุมมอง
— Alexander Hramov
2
@ user1077220 มันไม่แตกต่าง
— Dzhuneyt
11
การลงทะเบียน CSS และ JS เกี่ยวข้องกับการดู มีเหตุผลมากกว่าที่จะเรียกมันจากมุมมอง
— Alexander Hramov
1
ควรเพิ่มหนึ่งครั้งต่อหน้า (ไม่ว่าคุณจะเพิ่มข้อมูลโค้ดด้านบนในมุมมองใด)
— Alexander Hramov
47

คุณสามารถทำได้โดยการเพิ่ม

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');
— ysing
แหล่งที่มา
33

ฉันชอบที่จะตอบคำถามนี้

มีหลายที่ที่เรามีไฟล์ css & javascript เช่นในโฟลเดอร์ css ซึ่งอยู่นอกโฟลเดอร์ที่ได้รับการป้องกันไฟล์ css & js ของส่วนขยายและวิดเจ็ตซึ่งเราจำเป็นต้องรวมไว้ภายนอกในบางครั้งเมื่อใช้ ajax มากไฟล์ js & css ของ core กรอบซึ่งเราจำเป็นต้องรวมไว้ภายนอกด้วยในบางครั้ง ดังนั้นจึงเป็นวิธีการบางอย่างในการทำเช่นนี้

รวมไฟล์ core js ของเฟรมเวิร์กเช่น jquery.js, jquery.ui.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 เป็นส่วนขยายที่อยู่ในโฟลเดอร์ที่มีการป้องกัน ไฟล์ที่เรารวมไว้มี path: / 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'); 
?>

นอกจากนี้เรายังสามารถรวมไฟล์ core framework: ตัวอย่าง: ฉันกำลังรวมไฟล์ 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);  
?>
  • เราจำเป็นต้องรวมไฟล์ js ของวิดเจ็ต zii หรือส่วนขยายไว้ภายนอกบางครั้งเมื่อเราใช้งานในมุมมองที่แสดงผลซึ่งได้รับจากการโทร ajax เนื่องจากการโหลดไฟล์ ajax ใหม่ทุกครั้งจะสร้างความขัดแย้งในการเรียกฟังก์ชัน js

สำหรับรายละเอียดเพิ่มเติมดูบทความในบล็อกของฉัน

— Onkar Janwa
แหล่งที่มา
21

ง่ายใน conf / main.php ของคุณ นี่คือตัวอย่างของฉันกับ bootstrap คุณสามารถดูได้ที่นี่

'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.
            ),
        ),
    ),
),
— Knito Auron
แหล่งที่มา
แล้วคุณจะ "เรียก" จาวาสคริปต์ที่คุณต้องการใช้งานได้อย่างไร?
— Novica89
4
คุณสามารถใช้วิธีนี้: Yii :: app () -> clientScript-> registerCoreScript ('bootstrap');
— Knito Auron
7

ในมุมมองให้เพิ่มสิ่งต่อไปนี้:

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

โปรดสังเกตพารามิเตอร์ที่สองเมื่อคุณลงทะเบียนไฟล์ js ซึ่งเป็นตำแหน่งของสคริปต์ของคุณเมื่อคุณตั้งค่า CClientScript :: POS_END คุณจะปล่อยให้ HTML แสดงผลก่อนที่จาวาสคริปต์จะโหลด

— โมฮัมหมัดอันนิ
แหล่งที่มา
6

มีหลายวิธีที่เราสามารถรวม javascript, css ลงใน Yii App ของคุณได้ได้ วันนี้ผมจะสาธิตวิธีง่ายๆสามวิธี

วิธีง่ายๆในการเพิ่ม js, css โดยแก้ไข 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'),
                )
            ),
        ),
        // ...
  ),

ใช้ 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');

รวมไฟล์ core js

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

เอกสาร Yii API ที่เร็วขึ้น: http://yii.codexamples.com/

— Truongnq
แหล่งที่มา
4
@Christian นี้ไม่ได้เป็นฟอรั่มและคุณมีกำลังใจที่จะเพิ่มในคำถามถ้าคุณมีส่วนร่วมใหม่และมีประโยชน์ข้อมูล
— Samuel Liew
@Truongnq ถ้าฉันวางบล็อกนี้$baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css');ใน Controller ฉันจะกำหนด$csที่ไหน ยิ่งไปกว่านั้นในactionViewController ของฉันฉันมีบรรทัดนี้$this -> render('view', array('model' => $this -> loadModel($id), ));ฉันควรวางไว้ที่นี่หรือไม่?
— Compaq LE2202x
6

หากต้องการรวมไฟล์ JS และ CSS ในมุมมองเฉพาะคุณสามารถทำได้ผ่านคอนโทรลเลอร์โดยส่งผ่านพารามิเตอร์false, trueซึ่งจะรวม CSS และ JS สำหรับเช่น:

$this->renderPartial(
    'yourviewname',
    array(
        'model' => $model,
        false,
        true
    )
);
— วาสิมปาทาน
แหล่งที่มา
6

นี่คือทางออกที่ดีในการใช้สคริปต์ CDN และออฟไลน์

ฉันใช้รหัสนี้ในทุกแอปพลิเคชันที่ฉันสร้างดังนั้นคุณสามารถใช้รหัสนี้ในแอปใดก็ได้

สคริปต์ที่รวม:

  • main.css
  • main.js
  • jQuery
  • jQuery / ซีดี
  • Bootstrap 3.1
  • Bootstrap 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 ในโฟลเดอร์ root app และใส่สคริปต์ของคุณที่นั่น

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();
— อบูดายะห์
แหล่งที่มา
ฉันติดอยู่กับแนวทางที่ดีที่สุดเมื่อใช้การเรนเดอร์บางส่วน กำลังมีไฟล์ JS ของฉันขัดแย้งกัน ซึ่งเป็นแนวทางที่ดีที่สุดสำหรับสิ่งนี้
— chapskev
ทางออกที่ดี ฉันจะลองใช้ในแอปพลิเคชันของฉัน
— นักพัฒนา
6

ทำสิ่งนี้โดยเพิ่มบรรทัดเหล่านี้ในไฟล์มุมมองของคุณ

Yii :: app () -> clientScript-> registerScriptFile (Yii :: app () -> baseUrl. '/ path / to / your / javascript / file');
Yii :: app () -> clientScript-> registerCssFile (Yii :: app () -> baseUrl. '/ path / to / css / file');
— รามกฤษณะเชาลากัย
แหล่งที่มา
5

นอกจากนี้หากคุณต้องการเพิ่มเนื้อหาโมดูลทั้ง 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;
}

รหัสข้างต้นนำมาจากแอปWebshop ที่ใช้ GPLed Yii

— ตา
แหล่งที่มา
1

คุณยังสามารถเพิ่มสคริปต์จากการดำเนินการของคอนโทรลเลอร์ เพียงเพิ่มบรรทัดนี้ในวิธีการดำเนินการจากนั้นสคริปต์นั้นจะปรากฏในมุมมองนั้นเท่านั้น:

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

โดยที่ POS_HEAD บอกเฟรมเวิร์กให้ใส่สคริปต์ในส่วนหัว

— ก
แหล่งที่มา
1

ในกรอบ 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 แทนการระบุในเทมเพลตมุมมอง

— มือใหม่
แหล่งที่มา
0

เพิ่ม CSS และ JS ในโฟลเดอร์ Layout เข้าถึงได้ทุกที่ในโครงการ 

  <!--// 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>
— Elango Mani
แหล่งที่มา
0 
<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 แรกในหน้ามุมมอง

— trai bui
แหล่งที่มา
0

ใช้ส่วนขยาย bootstrap

ไฟล์ css ของฉัน: themes / bootstrap / css / style.css

ไฟล์ js ของฉัน: root / js / script.js

ที่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>
— วิกเตอร์อาเซเวโด
แหล่งที่มา
0

นี่เป็นวิธีง่ายๆในการเพิ่มสคริปต์และ css ใน 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">
— Rogin Thomas
แหล่งที่มา
0

หากคุณกำลังใช้ 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>
— นักพัฒนา
แหล่งที่มา
0
  • ใน Yii Assets จะประกาศไว้ใน engine / assets / Appassets.php ซึ่งทำให้จัดการไฟล์ css และ js ทั้งหมดของคุณได้ง่ายขึ้น ป้อนคำอธิบายภาพที่นี่
— Ahmed Mujtaba
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.