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

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

javascript php css yii

在Yii框架中包含CSS、javascript文件,javascript,php,css,yii,Javascript,Php,Css,Yii,如何在Yii框架中包含Javascript或CSS文件我想在我的网站上创建一个运行着一点Javascript应用程序的页面，因此我想在特定视图中包含.js和.css文件。您可以通过添加 Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script'); 大概是这样的： <?php $baseUrl = Yii::app()->baseUrl;

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

我想在我的网站上创建一个运行着一点Javascript应用程序的页面，因此我想在特定视图中包含

.js

和

.css

文件。

您可以通过添加

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

大概是这样的：

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

此外，如果您想同时添加CSS和JS模块资产，可以使用以下逻辑。查看您需要如何指示正确的路径：

以上代码取自基于GPLed Yii的应用程序。

我喜欢回答这个问题

它们是我们有css和javascript文件的很多地方，比如css文件夹，它在受保护的文件夹之外，扩展和小部件的css和js文件，当我们经常使用ajax时，我们需要在外部包括这些文件，核心框架的js和css文件，我们也需要在外部包括这些文件。所以他们有一些方法可以做到这一点

包括框架的核心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文件。

<?php 
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.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函数时产生冲突

有关更多详细信息，请访问conf/main.php。这是我的引导示例。你可以看到

通过将这些行添加到视图文件来执行类似操作

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

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

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

如果POS_HEAD告诉框架将脚本放入视图的HEAD部分，请添加以下内容：

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

请注意注册js文件时的第二个参数，它是脚本的位置，当您将其设置为CClientScript:：POS_END时，您让HTML在加载javascript之前呈现。

在Yii框架中，您可以使用以下方法包含js和css

包括CSS:

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

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

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

包括JS:

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

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

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

包括图像：

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

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

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

注意：通过在yii中使用布局概念，您可以添加css和js，而不是在视图中指定模板

在布局文件夹中添加CSS和JS。访问项目中的任意位置


要在特定视图中包含JS和CSS文件，您可以通过控制器传递参数false、true
，这将包括CSS和JS，例如：
$this->renderPartial(
    'yourviewname',
    array(
        'model' => $model,
        false,
        true
    )
);

我们可以用很多方法。今天我将演示三种简单而有用的方法
通过编辑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'),
                )
            ),
        ),
        // ...
  ),

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

使用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文档：


链接必须使用引导扩展在视图pag的第一个php标记上输入
我的css文件：themes/bootstrap/css/style.css
我的js文件：root/js/script.js
在theme/bootstrap/views/layouts/main.php
这是一个使用CDN和脱机脚本的好解决方案
我在构建的每个应用程序中都使用此代码，因此您可以在任何应用程序中使用此代码
包含的脚本：

main.css
main.js
jQuery
jQuery/CD
引导3.1
Bootstrap 3.1/CDN
Fancybox 2
Fancybox 2/CDN
Font4
Font4/CDN
谷歌分析脚本

步骤1:
将此代码放在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'),
                )
            ),
        ),
        // ...
  ),

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

第二步：
{Yii::app()->request->baseUrl}/css/styles.css

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

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

在根应用程序文件夹中创建resoreses文件夹，并将脚本放在那里
res/
--js
--css
--img
--lib
--style
..

第三步：
{Yii::app()->request->baseUrl}/css/styles.css

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

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

将此代码放在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:
{Yii::app()->request->baseUrl}/css/styles.css

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

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

在//layouts/main.php中调用如下函数
Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();

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

如果使用的是主题，则可以使用以下语法
Yii::app()->theme->baseUrl

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

像这样使用
<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文件

我应该从视图的控制器调用此功能吗？您应该从view@user1077220CSS和JS注册与视图相关。因此，从视图调用它更符合逻辑。这应该每页添加一次（无论您将在哪个视图中添加上述代码段），那么您将如何“调用”需要实现的javascript？您可以使用以下方式：Yii:：app（）->clientScript->registerCoreScript（'bootstrap'）@Christian这不是一个论坛，如果您正在提供新的有用信息，我们鼓励您添加问题。@trungnq如果我放置此块$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）），寿