教程5: 定制INVO · Phalcon3中文文檔

# 教程5: 定制INVO(Tutorial 5: Customizing INVO) 要完成 INVO 的詳細說明, 我們將會解釋如何自定義 INVO 添加 UI 元素和根據控制器的執行從而改變標題. ## 用戶組件(User Components) 所有的UI元素和應用的視覺效果大部分都是通過[Bootstrap](http://getbootstrap.com/)實現的. 有些元素, 比如根據應用程序的狀態而發生的導航條的變化. 例如, 右上角, 如果用戶已經登錄到應用程序, 鏈接”Log in / Sign Up” 變為 “Log out”. 應用程序的這部分是用的組件 “Elements” (app/library/Elements.php) 來實現的. ~~~ <?php use Phalcon\Mvc\User\Component; class Elements extends Component { public function getMenu() { // ... } public function getTabs() { // ... } } ~~~ 這個類繼承[Phalcon\\Mvc\\User\\Component](http://docs.iphalcon.cn/api/Phalcon_Mvc_User_Component.html). 這不是強加的去繼承這個類的組件, 但是它會幫助我們更加快速的訪問呢應用的服務. 現在, 我們將在服務容器中注冊沃恩的第一個用戶組件: ~~~ <?php // 注冊用戶組件 $di->set( "elements", function () { return new Elements(); } ); ~~~ 作為控制器, 在視圖中的插件或者組件, 這個組件還可以已在容器中注冊的服務和通過訪問一個相同名字的屬性作為一個預先注冊的服務: ~~~ <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">INVO</a> {{ elements.getMenu() }} </div> </div> </div> <div class="container"> {{ content() }} <hr> <footer> <p>© Company 2015</p> </footer> </div> ~~~ 重要的部分是: ~~~ {{ elements.getMenu() }} ~~~ ## 動態改變標題(Changing the Title Dynamically) 當你在不同的選項中瀏覽的時候就會看到標題在動態的改變. 在每個控制器初始化的時候實現: ~~~ <?php class ProductsController extends ControllerBase { public function initialize() { // 設置文檔標題 $this->tag->setTitle( "Manage your product types" ); parent::initialize(); } // ... } ~~~ 注意, 這個方法`parent::initialize()`也被調用, 它添加更多的數據到標題: ~~~ <?php use Phalcon\Mvc\Controller; class ControllerBase extends Controller { protected function initialize() { // 在標題的前面加上應用名稱 $this->tag->prependTitle( "INVO | " ); } // ... } ~~~ 最后, 標題在 main 視圖 (app/views/index.volt) 輸出了 : ~~~ <!DOCTYPE html> <html> <head> <?php echo $this->tag->getTitle(); ?> </head>  </html> ~~~