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

前端技术 2023/09/07 PHP

这回要说的是，如何给 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 配置文件里。

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

然后运行

php composer.phar update

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

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

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

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

四、注册文件，引入资源

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

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

第二种，在你的网站全局引入，或者将其作为另一个资源的依赖引用。在项目的 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\'
 ];
}

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

本文地址：https://www.stayed.cn/item/19299

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案