I want to include my js script specific.js for a specific view having action id specific-action-id. I don't want the specific.js to be included in every page.
For including a js script for the whole site I normally have to edit AppAsset.php. For this purpose, what should I do?
You should simply register this js file in your view, e.g. :
$this->registerJsFile('#web/js/specific.js');
Read more : http://www.yiiframework.com/doc-2.0/guide-output-client-scripts.html#registering-scripts
It is highly recommended to use asset bundles to register external JS files rather than registerJsFile() because these allow better flexibility and more granular dependency configuration. Also using asset bundles allows you to combine and compress multiple JS files, which is desirable for high traffic websites.
So you can create a new AppAsset file and put your css and javascript files in it.
Create the Asset Bundle
In the \assets directory, we create StatusAsset.php:
<?php
/**
* #link http://www.yiiframework.com/
* #copyright Copyright (c) 2008 Yii Software LLC
* #license http://www.yiiframework.com/license/
*/
namespace app\assets;
use yii\web\AssetBundle;
/**
* #author Qiang Xue <qiang.xue#gmail.com>
* #since 2.0
*/
class StatusAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [];
public $js = [
'/js/jquery.simplyCountable.js',
'/js/twitter-text.js',
'/js/twitter_count.js',
'/js/status-counter.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
In your view file
use app\assets\StatusAsset;
StatusAsset::register($this);
Resources
http://www.yiiframework.com/doc-2.0/guide-output-client-scripts.html
https://code.tutsplus.com/tutorials/how-to-program-with-yii2-working-with-asset-bundles--cms-23226
#soju is right. But you also can create specific asset bundles for use specific views. Your specific js files can be a file group on this situation you can use asset bundles and can use any views which you want.
Related
I've follow this video tutorial to enable pretty URL.
https://www.youtube.com/watch?v=suIx8nyDBKk
Everything works fine, until I use custom css.
If I'm at homepage, css link is abc.com/css/main.css.
But when i go to another page, ex: post/index, the link change to abc.com/post/css/main.css. So there is no css there, the page is broken.
Please help me how to solve this problem.
Thank you.
You have to use AppAsset to define your css and js files. Also this is related to not using a "/" before the css url, because you not getting a root directory. If you define a css in layout file and not set to be like "/css/main.css", then every time it will break the style while your go out of your root directory. Here is the example:
/**
* #author Qiang Xue <qiang.xue#gmail.com>
* #since 2.0
*/
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/main.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
I'm trying to register a CSS file in this way
$this->registerCssFile('../node_modules/fullcalendar/dist/fullcalendar.css', [
'depends' => [\yii\web\JqueryAsset::className()]
]);
But I get the error:
Failed to load a resource.
For instance, I know that I am standing at web folder, so that's why I wrote the above code in that way.
I tried without the registerCssFile and I achieved it writing directly this in the view file:
<link href="../node_modules/fullcalendar/dist/fullcalendar.css" rel="stylesheet">
Therefore I think the error is in the registerCssFile cause when I inspect in the browser this method add a slash (/) before all the relative path:
<link href="/../node_modules/fullcalendar/dist/fullcalendar.css" rel="stylesheet">
Anyway, THE QUESTION is how can I do to achieve it with regiserCssFile(the correct way)?
Or how can I remove that slash?
Just in case:
/yii2app
|_/views
|_/whatever
|_myview.php
|_/web
|_/node_modules
|_/fullcalendar
|_/dist
|_fullcalendar.css
The first thing that I would advise you is to move the folder inside the web directory and remove the trailing ../ from the URL.
Like below
$this->registerCssFile('node_modules/fullcalendar/dist/fullcalendar.css', [
'depends' => [\yii\web\JqueryAsset::className()]
]);
The /yii2app/web directory is where your application Entry script is running from so you do not need to provide a path relative to the view file, but the web directory.
Otherwise, use AssetManager to load assets from outside the web directory and use the $sourcePath option to use the directory outside the web.
see below a demo for Asset manager.
namespace app\assets;
use Yii;
use yii\web\AssetBundle;
use yii\web\View;
// set #themes alias so we do not have to update baseUrl every time we change themes
Yii::setAlias('#themes', Yii::$app->view->theme->baseUrl);
/**
* Main frontend application asset bundle.
*/
class FullCalendarAsset extends AssetBundle
{
public $sourcePath = '#app/node_modules/';
public $css = [
'fullcalendar/dist/_fullcalendar.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
];
}
place the above file inside the app/assets directory and then inside your view
use app\assets\FullCalendarAsset;
FullCalendarAsset::register($this);
you should learn about the application LIFE CYCLE.
I'm developing an Yii2 extension that uses an AssetBundle for some js/css files:
namespace myExtension/assets;
class ResourcesAsset extends AssetBundle {
public $sourcePath = '#app/assets/resources';
public $css = ['resources.css'];
public $js = ['resources.js'];
public $depends = ['yii\bootstrap\BootstrapPluginAsset'];
}
Structure in extension:
my-extension
|-assets
| |-resources
| |-resources.css
| |-resources.js
| ResourceAsset.php
|-controllers
|-models
|-views
|-Module.php
This doesn't seem to work when I install the extension in another project because of the $sourcePath. There the alias #app points to the application base path, not to the extension root folder in vendor.
Currently, I use #myExtension/assets/resources, which works as I know it gets that alias in extionsions.php when it gets installed. But I think this is not optimal. So what is the optimal way to declare $sourcePath? Should I create an own alias (in Module.php?)? Should I use __DIR__?
The alias you are using (#myExtension) is the way to go.
From the Guide:
When the extension is installed in an application, Yii will create for each listed root namespace an alias that refers to the directory corresponding to the namespace.
Alternatively you can use alias for vendor folder so something like:
public $sourcePath = '#vendor/my-extension/assets/resources';
I have added fullcalendar js/css in vendor/bower folder. I want to add this into just one page.
I read abt AssestBundle on this link - http://www.yiiframework.com/doc-2.0/guide-structure-assets.html
But this add in all the pages.
In Yii 2 framework asset bundles is recommended way of working with js / css. It's not limited to just adding to all pages. You can use it only in specific view.
Example of asset bundle for JsTree plugin:
<?php
namespace backend\assets;
use yii\web\AssetBundle;
class JsTreeAsset extends AssetBundle
{
public $sourcePath = '#bower_components/jstree/dist';
public $js = [
'jstree.min.js',
];
public $css = [
'themes/default/style.min.css',
];
public $depends = [
'yii\web\JqueryAsset',
];
}
In this example, #bower_components alias is used, in order to get it working you also need to register it in application bootstrap file (in advanced application template this file is common/config/bootstrap.php):
Yii::setAlias('bower_components', dirname(dirname(__DIR__)) . '/bower_components');
Then, in view where you need to use it, call register() method of this asset bundle and pass current view:
use backend\assets\JsTreeAsset;
...
JsTreeAsset::register($this);
The files in default asset bundle (AppAsset) which included in application templates are loaded in every view because it's registered in application layout and layout is applied to all views.
I have a module named social with the directories like this :
frontend
-- modules
-- social
-- assets
-- SocialAsset.php
-- controllers
-- views
-- default
-- layouts
-- main.php
-- web
-- css
-- js
-- img
Module.php
I want my module have an own layout. Because of that, i add file SocialAsset, main.php for layout, css, js and img. But, unfortunatelly i can't access my css/js/img files.
SocialAsset file :
<?php
namespace frontend\modules\social\assets;
use yii\web\AssetBundle;
class SocialAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $sourcePath = '#app/modules/social/web';
public $css = [
'css/social.css',
'css/toolkit.css'
];
public $js = [
'js/jquery.min.js',
'js/social.js',
'js/toolkit.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
in main.php i use the SocialAssetfiles like this :
use frontend\modules\social\assets\SocialAsset;
SocialAsset::register($this);
Could someone to help me to solve this problem ?
You should only set sourcePath in your asset bundle :
sourcePath specifies the root directory that contains the asset
files in this bundle. This property should be set if the root
directory is not Web accessible. Otherwise, you should set the
basePath property and baseUrl, instead.
This means you should simply remove $basePath and $baseUrl in your assset bundle, Yii will then publish your files.
Read more : http://www.yiiframework.com/doc-2.0/guide-structure-assets.html