前天帮同事改个十年前的网站 bug，页面上一堆 include require 不禁让人抱头痛哭。看到 V2EX 上的讨论说，写 PHP 不用框架等同于耍流氓。Yii Framework 是我使用了 2 年多的 PHP 框架，器大活好，皮实耐操。 Yii2 还在 Beta 中，不过不影响拿来预研。

这回要说的是，如何给 Yii2 项目添加外部资源（external assets），以 FontAwesome 为例子。

Yii2 开始使用 composer 来做项目的依赖管理，这货是类似于 NodeJS 里面 npm 的东东，可以自动获取 Github 上最新版本的第三方库（比如 Bootstrap 啦，FontAwesome 啦之类的）。按官方教程装好后，就可以开始初始化项目了。

一、初始化项目

通过 Composer 来初始化

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. "require": { 
3.  "php": ">=5.4.0", 
4.  "hybridauth/hybridauth": "dev-master", 
5.  "FortAwesome/Font-Awesome": "*", // <- 这里 
6.  "yiisoft/yii2": "*", 
7.  "yiisoft/yii2-swiftmailer": "*", 
8.  "yiisoft/yii2-bootstrap": "*", 
9.  "yiisoft/yii2-debug": "*", 
10.  "yiisoft/yii2-gii": "*" 
11. }, 
12. // ... 

然后运行

php composer.phar update

从 Github 上拉取 FontAwesome 的包到项目本地。

三、创建 FontAwesome 资源包（asset bundle）

为了使用这些库，我们需要在项目的 /assets 目录下创建一个 FontAwesomeAsset.php

1. namespace assets; 
2. use yii\web\AssetBundle; 
3. class FontAwesomeAsset extends AssetBundle 
4. { 
5.  // 下面这些资源文件并不在 web 目录下，浏览器无法直接访问。所以我们需要 
6.  // 指定 sourcePath 属性。注意 @vendor 这个 alias，表示 vender 目录 
7.  public $sourcePath = '@vendor/fortawesome/font-awesome'; 
8.  public $css = [ 
9.   'css/font-awesome.css', 
10.  ]; 
11. } 

四、注册文件，引入资源

有两种方法。第一种，当你想在某一个特定页面引入这个资源包

1. // 这两句直接写在那一页的 view 里 
2. use assets\FontAwesomeAsset; 
3. FontAwesomeAsset::register($this); 

第二种，在你的网站全局引入，或者将其作为另一个资源的依赖引用。在项目的 asset/AppAsset.php 中加上它：

1. class AppAsset extends AssetBundle 
2. { 
3.  public $basePath = '@webroot'; 
4.  public $baseUrl = '@web'; 
5.  public $css = [ 
6.   'css/site.css', 
7.  ]; 
8.  public $js = [ 
9.  ]; 
10.  public $depends = [ 
11.   'yii\web\YiiAsset', 
12.   'yii\bootstrap\BootstrapAsset', 
13.   // 在这里加上我们的 FontAwesomeAsset 包类 
14.   'assets\FontAwesomeAsset' 
15.  ]; 
16. } 

刷新页面，看看是不是已经引入了对应的 css、js 资源。

Tags: Yii2 Composer FontAwesome

分享到：