Yii - 資產

資產是指可能在網頁中引用的檔案（css、js、影片、音訊或影像等）。Yii 在**資產包**中管理資產。資產包的目的是將一組相關的**JS**或**CSS**檔案放在程式碼庫中，並能夠透過單個 PHP 呼叫註冊它們。資產包還可以依賴於其他資產包。

在 assets 資料夾中，您將找到基本應用程式模板的資產包：

<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   /**
   * @author Qiang Xue <qiang.xue@gmail.com>
   * @since 2.0
   */
   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',
      ];
   }
?>

上面的類指定資產檔案位於**@webroot**資料夾內，對應於 URL **@web**。該包不包含任何**JS**檔案，而只包含一個**CSS**檔案。該包依賴於其他包：

yii\web\YiiAsset 和 yii\bootstrap\BootstrapAsset。

AssetBundle 的屬性

以下是 AssetBundle 的屬性。

basePath - 定義一個包含此包中資產檔案的 Web 可訪問目錄。
baseUrl - 指定與 basePath 屬性對應的 URL。
js - 定義此包中包含的 JS 檔案的陣列。
css - 定義此包中包含的 CSS 檔案的陣列。
depends - 定義此包依賴的資產包的陣列。這意味著當前資產包的 CSS 和 JS 檔案將在聲明瞭depends屬性的包之後包含。
sourcePath - 定義包含資產檔案的根目錄。如果根目錄不可透過 Web 訪問，則應設定此屬性。否則，應設定basePath和baseUrl屬性。
cssOptions - 定義將傳遞給yii\web\View∷registerCssFile函式的選項。
jsOptions - 定義將傳遞給yii\web\View::registerJsFile函式的選項。
publishOptions: 指定將傳遞給yii\web\AssetManager::publish函式的選項。

資產的分類

根據位置，資產可以分類為：

源資產 - 資產位於無法透過 Web 直接訪問的目錄中。為了在頁面中使用源資產，應將其複製到 Web 目錄。此過程稱為**資產釋出**。
已釋出資產 - 資產位於 Web 可訪問目錄中
外部資產 - 資產位於另一個 Web 伺服器上。

使用資產包

步驟 1 - 在assets資料夾中，建立一個名為DemoAsset.php的新檔案，內容如下。

<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   class DemoAsset extends AssetBundle {
      public $basePath = ‘@webroot’;
      public $baseUrl = ‘@web’;
      public $js = [‘js/demo.js’];
   }
?>

步驟 2 - 我們剛剛聲明瞭一個新的資產包，其中包含一個 demo.js 檔案。現在，在 web/js 資料夾中，建立一個名為 demo.js 的檔案，其中包含以下程式碼。

console.log("hello from demo asset");

步驟 3 - 要註冊新建立的資產包，請轉到 views/layouts 目錄，並在 main.php 檔案的頂部新增以下行。

\app\assets\DemoAsset::register($this);

步驟 4 - 如果將您的 Web 瀏覽器指向https://:8080/index.php，您應該會看到以下 chrome 控制檯輸出。

您還可以定義jsOptions和cssOptions屬性來自定義 CSS 和 JS 檔案在頁面中包含的方式。預設情況下，JS 檔案在結束 body 標記之前包含。

步驟 5 - 要在 head 部分包含 JS 檔案，請按以下方式修改DemoAsset.php檔案。

<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   use yii\web\View;
   class DemoAsset extends AssetBundle {
      public $basePath = '@webroot';
      public $baseUrl = '@web';
      public $js = ['js/demo.js'];
      public  $jsOptions = ['position' => View::POS_HEAD];
   }
?>

步驟 6 - 現在轉到https://:8080/index.php，您應該會看到demo.js指令碼包含在頁面的 head 部分。

對於在生產模式下執行的 Web 應用程式，啟用資產的 HTTP 快取是一種常見做法。這樣做，最後修改時間戳將附加到所有已釋出的資產。

步驟 7 - 轉到config資料夾並修改web.php檔案，如以下程式碼所示。

<?php
   $params = require(__DIR__ . '/params.php');
   $config = [
      'id' => 'basic',
      'basePath' => dirname(__DIR__),
      'bootstrap' => ['log'],
      'components' => [
         'assetManager' => [
            'appendTimestamp' => true,
         ],
         'request' => [
            // !!! insert a secret key in the following (if it is empty) - this is
               //required by cookie validation
            'cookieValidationKey' => 'ymoaYrebZHa8gURuolioHGlK8fLXCKjO',
         ],
         'cache' => [
            'class' => 'yii\caching\FileCache',
         ],
         'user' => [
            'identityClass' => 'app\models\User',
            'enableAutoLogin' => true,
         ],
         'errorHandler' => [
            'errorAction' => 'site/error',
         ],
         'mailer' => [
            'class' => 'yii\swiftmailer\Mailer',
            // send all mails to a file by default. You have to set
            // 'useFileTransport' to false and configure a transport
            // for the mailer to send real emails.
            'useFileTransport' => true,
         ],
         'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
               [
                  'class' => 'yii\log\FileTarget',
                  'levels' => ['error', 'warning'],
               ],
            ],
         ],
         'db' => require(__DIR__ . '/db.php'),
      ],
      'modules' => [
         'hello' => [
            'class' => 'app\modules\hello\Hello',
         ],
      ],
      'params' => $params,
   ];
   if (YII_ENV_DEV) {
      // configuration adjustments for 'dev' environment
      $config['bootstrap'][] = 'debug';
      $config['modules']['debug'] = [
         'class' => 'yii\debug\Module',
      ];
      $config['bootstrap'][] = 'gii';
      $config['modules']['gii'] = [
         'class' => 'yii\gii\Module',
      ];
   }
   return $config;
?>

我們添加了AssetManager元件並設定了appendTimestamp屬性。

步驟 8 - 現在在 Web 瀏覽器的位址列中鍵入https://:8080/index.php。您會注意到所有資產現在都具有時間戳，如以下影像所示。

核心 Yii 資產包

以下是核心 Yii 資產包。

yii\web\JqueryAsset - 包含 jquery.js 檔案。
yii\web\YiiAsset - 包含 yii.js 檔案，該檔案實現了在模組中組織 JS 程式碼的機制。
yii\bootstrap\BootstrapAsset - 包含來自 Twitter Bootstrap 框架的 CSS 檔案。
yii\bootstrap\BootstrapPluginAsset - 包含來自 Twitter Bootstrap 框架的 JS 檔案。
yii\jui\JuiAsset - 包含來自 jQuery UI 庫的 CSS 和 JS 檔案。

列印頁面