在 Yii 框架中包含 CSS、javascript 文件答案

【问题标题】：Include CSS,javascript file in Yii Framework在 Yii 框架中包含 CSS、javascript 文件
【发布时间】：2011-01-01 04:34:58
【问题描述】：

如何在 Yii 框架中包含 Javascript 或 CSS 文件？

我想在我的网站上创建一个运行一个小的 Javascript 应用程序的页面，因此我想在特定视图中包含 .js 和 .css 文件。

【问题讨论】：

标签： javascript php css yii

【解决方案1】：

类似这样的：

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

【讨论】：

我应该从视图的控制器调用这个吗？
你应该从一个视图中调用它
@user1077220 没有区别。
CSS 和 JS 注册与视图相关。所以更合乎逻辑地从视图中调用它。
这应该每页添加一次（无论您将在 sn-p 上方添加哪个视图）

【解决方案2】：

你可以通过添加来做到这一点

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

【讨论】：

【解决方案3】：

我喜欢回答这个问题。

我们在很多地方都有 css 和 javascript 文件，例如在受保护文件夹之外的 css 文件夹中，扩展名和小部件的 css 和 js 文件，有时我们需要在外部包含大量使用 ajax、js 和 css核心框架的文件，我们有时也需要在外部包含这些文件。所以他们有一些方法可以做到这一点。

包含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 调用接收的渲染视图中使用 zii 小部件或扩展的 js 文件时，我们需要在外部包含它们，因为每次加载新的 ajax 文件都会在调用 js 函数时产生冲突。

更多详情Look at my blog article

【讨论】：

【解决方案4】：

在你的 conf/main.php 中很容易。这是我的引导程序示例。可以看到here

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

【讨论】：

那么你将如何“调用”你需要实现的javascript？
你可以这样使用：Yii::app()->clientScript->registerCoreScript('bootstrap');

【解决方案5】：

在视图中，添加以下内容：

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

注册js文件的时候注意第二个参数，是脚本的位置，设置CClientScript::POS_END的时候，就是让html在javascript加载之前渲染出来。

【讨论】：

【解决方案6】：

有很多方法我们可以include javascript, css into your Yii App。今天我将演示三种简单实用的方法。

通过编辑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/

【讨论】：

@Christian 这不是一个论坛，如果您提供新和有用信息，我们鼓励您添加问题。跨度>
@Truongnq 如果我将此块 $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css'); 放在控制器中，我应该在哪里分配 $cs 之后？此外，在我的控制器中的actionView 中，我有这行$this -> render('view', array('model' => $this -> loadModel($id), ));，我应该把它放在这里吗？

【解决方案7】：

要在特定视图中包含 JS 和 CSS 文件，您可以通过控制器通过传递参数 false, true 来实现，其中将包含 CSS 和 JS，例如：

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

【讨论】：

【解决方案8】：

这里有一个很好的使用 CDN 和离线脚本的解决方案

我在我构建的每个应用程序中都使用此代码，因此您可以在任何应用程序中使用它。

包含的脚本：

main.css
main.js
jQuery
jQuery / CD
引导程序 3.1
引导 3.1/CDN
Fancybox 2
Fancybox 2 / CDN
FontAwesome 4
FontAwesome 4 / CDN
谷歌分析脚本

第 1 步：

将此代码放在 config/main.php 中

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

第二步：

在根应用文件夹中创建 resoreses 文件夹并将您的脚本放在那里

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

第三步：

将此代码放在 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 文件有冲突。这是最好的方法
不错的解决方案。我会在我的应用程序中尝试一下

【解决方案9】：

通过将这些行添加到您的视图文件中来做这样的事情；

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

【讨论】：

【解决方案10】：

另外，如果要同时添加 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 应用程序。

【讨论】：

【解决方案11】：

您还可以从控制器操作中添加脚本。只需在操作方法中添加这一行，然后该脚本将仅出现在该视图中：

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

POS_HEAD 告诉框架将脚本放在头部的位置

【讨论】：

【解决方案12】：

在 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，而不是在视图模板中指定。

【讨论】：

【解决方案13】：

在布局文件夹中添加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>

【讨论】：

【解决方案14】：

<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 标记上输入

【讨论】：

【解决方案15】：

使用引导扩展

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

【讨论】：

【解决方案16】：

这也是在 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">

【讨论】：

【解决方案17】：

如果您使用的是主题，那么您可以使用以下语法

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>

【讨论】：

【解决方案18】：

在 Yii 中，资产在 engine/assets/Appassets.php 中声明更容易管理所有 css 和 js 文件

【讨论】：