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',
];
}
Related
I have successfully installed npm-asset/socket.io package and its dependencies by using Asset Packagist in yii2. Now, I cannot include it in my pages. I tried in AppAsset.php like this:
public $js = ['#npm/socket.io/client-dist/socket.io.js'];
it did not work:
GET http://project.localhost/#npm/socket.io/client-dist/socket.io.js
net::ERR_ABORTED 404 (Not Found)
Then, I tried to include that file inside view file like this:
<script src="<?php echo Yii::getAlias('#npm').'/socket.io/client-dist/socket.io.js' ?>"></script>
it gave me this error :
Not allowed to load local resource:
file:///C:/Projects_folder/Php/Yii2/project/vendor/npm-asset/socket.io/client-dist/socket.io.js
I need help with how to use this js file inside view files.
The sources installed by composer are placed in vendor folder which is not directly accessible. You need to publish the assets and then include the published resources.
To do that you can make an asset bundle for socket.io for example like this
namespace app\assets;
use yii\web\AssetBundle;
class SocketIOAsset extends AssetBundle
{
//this is path where source files that needs publishing are located
public $sourcePath = "#npm/socket.io/client-dist";
public $css = [
];
public $js = [
'socket.io.js'
];
}
Then in your AppAsset bundle add the SocketIoAsset into $depends property
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $depends = [
SocketIOAsset::class,
// ... other dependencies ...
];
// ... other definitions ...
}
Now because your AppAsset depends on SocketIOAsset, the folder defined in SocketIOAsset::$sourcePath will be published when AppAsset is registered, and files in SocketIOAsset::$js array will be linked.
I am using the following configurations to add the timestamp in the assets path via asset manager.
'assetManager' => [
'appendTimestamp' => true,
appAsset.php
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'/css/style.css'
];
}
In view
AppAsset::register($this);
But in html I still see '/css/style.css' without timestamp.
I saw solution
https://github.com/yiisoft/yii2/issues/9101#issuecomment-267274327
$file = '/css/style.css';
$asset = new \yii\web\AssetBundle(
[
'js' => [ltrim($file, '/')],
'basePath' => '#webroot',
'baseUrl' => '/'
]
);
$this->getAssetManager()->bundles[$file] = $asset;
$this->registerAssetBundle($file);
This example is work. '/css/style.css?v=12557565'
Is there any method write registerAssetBundle() not in a view files?
First of all, what is public $sourcePath = '#frontend/assets';? it is not the correct path this path actually has your Asset.php files, not the source files. According to the documentation
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. Path aliases can be used here.
Just place your .css files under frontend/web/css and .js under frontend/web/js and remove the sourcePath you do not need it as looking at your code, only in case if you had your source files under frontend/themes/basic then you would use sourcePath like public $sourcePath = '#frontend/themes/basic/'; because this path isnt under the web accessable directory
And for adding the timestamp You do not have to do anything other than adding the appendTimestamp options under the components section in the assetManager, make sure you are adding assetManager under components. and it will automatically start adding ?v=125453612 with all CSS and js files
your AppAsset.php
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/style.css'
];
}
frontend/config/main.php
'components' => [
..........
..........
'assetManager' => [
'appendTimestamp' => true
]
..........
..........
],
and your file will start looking like this
I can show you a live example of the same site if you want to have a look into the view-source
EDIT
As you provided the source code screen grab and looking at your code I can tell that you are using trailing slash / with your files, remove the trailing slashes from your source files path, I also overlooked it the first glance but then looking the code i couldn't find any other thing than this one that could be wrong. they should be like this
'css/new.css',
'css/new2.css',
and same for the js files too.
Try write public $css and public $js without forst slash ("js/.." instead "/js/..").
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
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.