快捷導(dǎo)航

Yii2使用小技巧之通過 Composer 添加 FontAwesome 字體資源

更新時(shí)間：2014年06月22日 10:40:04 投稿：hebedich

前天幫同事改個(gè)十年前的網(wǎng)站 bug，頁面上一堆 include require 不禁讓人抱頭痛哭?？吹?V2EX 上的討論說，寫 PHP 不用框架等同于耍流氓。Yii Framework 是我使用了 2 年多的 PHP 框架，器大活好，皮實(shí)耐操。 Yii2 還在 Beta 中，不過不影響拿來預(yù)研。

這回要說的是，如何給 Yii2 項(xiàng)目添加外部資源（external assets），以 FontAwesome 為例子。

Yii2 開始使用 composer 來做項(xiàng)目的依賴管理，這貨是類似于 NodeJS 里面 npm 的東東，可以自動獲取 Github 上最新版本的第三方庫（比如 Bootstrap 啦，F(xiàn)ontAwesome 啦之類的）。按官方教程裝好后，就可以開始初始化項(xiàng)目了。

一、初始化項(xiàng)目

通過 Composer 來初始化

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

然后開始碼代碼，Model Controller View 神馬的，此處按下不表。

二、安裝 FontAwesome

終于，你的項(xiàng)目發(fā)展到需要引用第三方庫了，我們?nèi)匀煌ㄟ^ Composer 來安裝。搜索packagist.org官方的包列表，我們找到了 FontAwesome 的配置。將 FortAwesome/Font-Awesome": "*" 添加到項(xiàng)目的 composer.json 配置文件里。

// ...
"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": "*"
},
// ...

然后運(yùn)行

php composer.phar update

從 Github 上拉取 FontAwesome 的包到項(xiàng)目本地。

三、創(chuàng)建 FontAwesome 資源包（asset bundle）

為了使用這些庫，我們需要在項(xiàng)目的 /assets 目錄下創(chuàng)建一個(gè) FontAwesomeAsset.php

namespace assets;
use yii\web\AssetBundle;
class FontAwesomeAsset extends AssetBundle
{
 // 下面這些資源文件并不在 web 目錄下，瀏覽器無法直接訪問。所以我們需要
 // 指定 sourcePath 屬性。注意 @vendor 這個(gè) alias，表示 vender 目錄
 public $sourcePath = '@vendor/fortawesome/font-awesome';
 public $css = [
  'css/font-awesome.css',
 ];
}

四、注冊文件，引入資源

有兩種方法。第一種，當(dāng)你想在某一個(gè)特定頁面引入這個(gè)資源包

// 這兩句直接寫在那一頁的 view 里
use assets\FontAwesomeAsset;
FontAwesomeAsset::register($this);

第二種，在你的網(wǎng)站全局引入，或者將其作為另一個(gè)資源的依賴引用。在項(xiàng)目的 asset/AppAsset.php 中加上它：

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'
 ];
}

刷新頁面，看看是不是已經(jīng)引入了對應(yīng)的 css、js 資源。

您可能感興趣的文章: