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

Yii2 開始使用 composer 來做項(xiàng)目的依賴管理，這貨是類似于 NodeJS 里面 npm 的東東，可以自動(dòng)獲取 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', ];}

四、注冊(cè)文件，引入資源

有兩種方法。第一種，當(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)引入了對(duì)應(yīng)的 css、js 資源。

php技術(shù)：Yii2使用小技巧之通過 Composer 添加 FontAwesome 字體資源，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。