Symfony2 框架專案建立與 Twig 模板三層繼承架構實戰

Symfony2 以 Bundle 為核心單元，採 Twig 模板引擎。本文從環境準備、Bundle 建立、路由/控制器/模板三層繼承架構、到首頁與關於頁面實作，完整示範 Symfony2 專案啟動流程。

環境準備

• Windows + NetBeans + VirtualBox CentOS (Nginx/PHP-FPM/MySQL)
• 修改 hosts 綁定 symfony 網域
• 下載 Symfony2 或 Composer 安裝，設定 app/cache、app/logs 777 權限
• Web 伺服器指向 web/ 目錄
• 存取 https://symfony/app_dev.php 確認安裝，開發工具列僅開發環境顯示
• 資料庫配置於 app_dev.php「Configure」或 parameters.yml

建立 BlogBundle

php app/console generate:bundle --namespace=Blogger/BlogBundle --format=yml

採預設值自動產生控制器、路由、模板等基礎結構。

Bundle 註冊

// app/AppKernel.php
$bundles = array(
    // ...
    new Blogger\BlogBundle\BloggerBlogBundle(),
);

路由掛載

# app/config/routing.yml
BloggerBlogBundle:
    resource: "@BloggerBlogBundle/Resources/config/routing.yml"
    prefix: /

prefix 可調整為 /blog 等子路徑。

預設控制器驗證

存取 https://symfony/app_dev.php/hello/world 顯示問候。流程：

1. 路由 src/Blogger/BlogBundle/Resources/config/routing.yml 比對 /hello/{name}
2. 導向 DefaultController::indexAction($name)
3. 渲染 Resources/views/Default/index.html.twig：Hello {{ name }}!

清理預設內容，建立三層模板繼承

移除 DefaultController、views/Default/、routing.yml 內容。

Layer 1：基底模板 app/Resources/views/base.html.twig

定義完整 HTML 骨架、區塊 (title, stylesheets, navigation, blog_title, blog_tagline, body, sidebar, footer, javascripts)、引入 Google Fonts、asset() 函數處理靜態資源路徑。

Layer 2：Bundle 版型 src/Blogger/BlogBundle/Resources/views/layout.html.twig

{% extends '::base.html.twig' %}
{% block sidebar %}Sidebar content{% endblock %}

繼承基底並客製化側邊欄。

Layer 3：具體頁面模板

建立 PageController：

namespace Blogger\BlogBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
class PageController extends Controller {
    public function indexAction() {
        return $this->render('BloggerBlogBundle:Page:index.html.twig');
    }
    public function aboutAction() {
        return $this->render('BloggerBlogBundle:Page:about.html.twig');
    }
}

首頁模板 Resources/views/Page/index.html.twig：

{% extends 'BloggerBlogBundle::layout.html.twig' %}
{% block body %}Blog homepage{% endblock %}

關於頁模板 Resources/views/Page/about.html.twig：

{% extends 'BloggerBlogBundle::layout.html.twig' %}
{% block body %}about page{% endblock %}

路由配置

# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_homepage:
    pattern: /
    defaults: { _controller: BloggerBlogBundle:Page:index }
    requirements: { _method: GET }
BloggerBlogBundle_about:
    pattern: /about
    defaults: { _controller: BloggerBlogBundle:Page:about }
    requirements: { _method: GET }

Twig 優勢與語法重點

• 快：編譯為 PHP 類別，資源佔用少
• 簡潔：無需 <?php ?> 標籤
• 可繼承：{% extends %} / {% block %} 三層架構靈活客製
• 安全：預設啟用輸出轉義，支援沙盒模式
• 可擴充：自訂過濾器、函數、標籤

語法：{% ... %} 執行邏輯、{{ ... }} 輸出變數/運算式 (可接過濾器 |date("d-m-Y"))、{# ... #} 註解。

CSS 版型

於 web/css/screen.css 定義完整樣式：重置、排版、導覽列、標題字體 (Google Fonts)、欄位佈局、頁尾等。

完成上述步驟，存取 https://symfony/app_dev.php 見首頁，/about 見關於頁，三層繼承架構運作正常。