Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体

在前不久，我有幸为一位同事修复了一个十年前的网站bug。这个网站页面上的代码充满了各种include和require语句，简直让人眼花缭乱，头疼不已。在V2EX社区，有人直言不讳地说，写PHP如果不使用框架，简直就像耍流氓一样。我曾经使用了两年多的Yii Framework，它功能强大，易于使用，稳定耐用。虽然Yii2还在Beta阶段，但我已经开始预研了。

今天我想分享的是如何在Yii2项目中添加外部资源，比如常用的前端库FontAwesome。

Yii2使用poser来进行项目依赖管理，类似于NodeJS中的npm，能够自动获取Github上的版本的第三方库。安装好poser后，就可以开始初始化Yii2项目了。

一、初始化项目

通过Composer来初始化项目，命令如下：

```bash

php poser.phar create-project --prefer-dist --stability=dev yiisoft/yii2-app-basic basic

```

接下来，我们开始进行项目的开发，包括Model、Controller、View等。

二、安装FontAwesome

随着项目的发展，可能需要引用第三方库。我们仍然通过Composer来安装。在packagist.官方的包列表中找到FontAwesome的配置，然后将"FortAwesome/Font-Awesome": ""添加到项目的poser.json配置文件中。

```json

// ...

"require": {

"php": ">=5.4.0",

"hybridauth/hybridauth": "dev-master",

"FortAwesome/Font-Awesome": "", // 标记为这里添加的位置

"yiisoft/yii2": "",

// ...其他依赖项...

},

// ...

```

然后运行命令更新依赖：

```bash

php poser.phar update

```

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

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

为了使用这些库，我们需要在项目的/assets目录下创建一个FontAwesomeAsset.php文件。这个文件将定义我们的资源包。资源文件并不在web目录下，浏览器无法直接访问，因此需要指定sourcePath属性。同时要注意@vendor这个alias，它表示vender目录。

四、注册资源包并引入资源文件

有两种方法可以注册资源包并引入资源文件。第一种方法是在特定的页面引入资源包，直接在那一页的view文件中使用以下代码：

```php

use assets\FontAwesomeAsset; // 引入资源包类

FontAwesomeAsset::register($this); // 注册资源包，使其在页面中可用。这个$this指代当前的页面对象（view实例）。通过register方法将资源包注册到当前页面生命周期中，以便页面可以加载并使用该资源包中的资源文件（如CSS、JS等）。这样你就可以在该页面中正常使用FontAwesome的样式和功能了。如果你想要在整个网站全局引入这个资源包或者将其作为另一个资源的依赖引用，你可以在你的主入口文件（通常是web入口文件或者某个全局的配置文件中）注册这个资源包即可。这样所有页面都会加载并使用这个资源包中的资源文件。具体的注册方式可以参考Yii框架的文档或者相关教程。在项目的深处，位于 asset 目录下的 AppAsset.php 文件中，我们开始构建一项重要的资产捆绑。这不仅是对项目资源的整合，更是对页面展现的精致雕琢。

class AppAsset 继承自 AssetBundle 类，承载着项目资源的核心配置。在这里，我们看到了一些关键属性的声明：

定义基础路径 `$basePath` 为 '@webroot'，这是资源的根目录，承载着网站的静态资源。接着，设置基础 URL `$baseUrl` 为 '@web'，这代表着资源的在线访问地址。

然后，我们注意到 `$css` 数组内包含 'css/site.css'，这意味着我们将引入此 CSS 文件来美化我们的页面。至于 `$js` 数组目前为空，可能意味着当前项目尚未引入任何 JavaScript 资源。

接下来是 `$depends` 数组，这里列出了此资产捆绑所依赖的其他资源。可以看到已经包含了 'yii\web\YiiAsset' 和 'yii\bootstrap\BootstrapAsset'，这是 Yii 框架的基础资源包。此刻，我们的焦点在于在这里添加的 'assets\FontAwesomeAsset'，这表明我们的项目还引入了 FontAwesome 这一强大的图标库。

完成上述配置后，只需刷新页面，就能看到对应的 CSS 和 JS 资源已经被自动引入。此刻，我们的页面不仅继承了 Yii 和 Bootstrap 的基础样式，还添加了 FontAwesome 图标的魅力。

我们看到了一句 `cambrian.render('body')`。这可能是项目特定的代码，用于渲染页面的主体部分，展现项目的核心内容和功能。通过精细的资源捆绑配置，我们的项目页面已经准备好向世界展现其独特的魅力和功能了。