这回要说的是,如何给 Yii2 项目添加外部资源(external assets),以 FontAwesome 为例子。
Yii2 开始使用 composer 来做项目的依赖管理,这货是类似于 NodeJS 里面 npm 的东东,可以自动获取 Github 上最新版本的第三方库(比如 Bootstrap 啦,FontAwesome 啦之类的)。按官方教程装好后,就可以开始初始化项目了。
一、初始化项目
通过 Composer 来初始化
1
|
php composer.phar create-project --prefer-dist --stability=dev yiisoft /yii2-app-basic basic |
然后开始码代码,Model Controller View 神马的,此处按下不表。
二、安装 FontAwesome
终于,你的项目发展到需要引用第三方库了,我们仍然通过 Composer 来安装。搜索packagist.org官方的包列表,我们找到了 FontAwesome 的配置。将 FortAwesome/Font-Awesome": "*" 添加到项目的 composer.json 配置文件里。
1
2
3
4
5
6
7
8
9
10
11
12
|
// ... "require" : { "php" : ">=5.4.0" , "hybridauth/hybridauth" : "dev-master" , "FortAwesome/Font-Awesome" : "*" , // <- 这里 "yiisoft/yii2" : "*" , "yiisoft/yii2-swiftmailer" : "*" , "yiisoft/yii2-bootstrap" : "*" , "yiisoft/yii2-debug" : "*" , "yiisoft/yii2-gii" : "*" }, // ... |
然后运行
1
|
php composer.phar update |
从 Github 上拉取 FontAwesome 的包到项目本地。
三、创建 FontAwesome 资源包(asset bundle)
为了使用这些库,我们需要在项目的 /assets 目录下创建一个 FontAwesomeAsset.php
1
2
3
4
5
6
7
8
9
10
11
|
namespace assets; use yii\web\AssetBundle; class FontAwesomeAsset extends AssetBundle { // 下面这些资源文件并不在 web 目录下,浏览器无法直接访问。所以我们需要 // 指定 sourcePath 属性。注意 @vendor 这个 alias,表示 vender 目录 public $sourcePath = '@vendor/fortawesome/font-awesome' ; public $css = [ 'css/font-awesome.css' , ]; } |
四、注册文件,引入资源
有两种方法。第一种,当你想在某一个特定页面引入这个资源包
1
2
3
|
// 这两句直接写在那一页的 view 里 use assets\FontAwesomeAsset; FontAwesomeAsset::register( $this ); |
第二种,在你的网站全局引入,或者将其作为另一个资源的依赖引用。在项目的 asset/AppAsset.php 中加上它:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
class AppAsset extends AssetBundle { public $basePath = '@webroot' ; public $baseUrl = '@web' ; public $css = [ 'css/site.css' , ]; public $js = [ ]; public $depends = [ 'yii\web\YiiAsset' , 'yii\bootstrap\BootstrapAsset' , // 在这里加上我们的 FontAwesomeAsset 包类 'assets\FontAwesomeAsset' ]; } |
刷新页面,看看是不是已经引入了对应的 css、js 资源。