CodeIgniter 實作 Layout 庫豐富 View 層佈局

前言

CodeIgniter（CI）核心輕量，不內建 Layout 機制。但在實務專案中，網站通常擁有共同的 Header、Footer、Menu 等版面結構，僅 Content 區塊隨頁面變化。本文介紹如何自建 Layout Library 實現「雙層視圖」架構，提升開發效率與維護性。

建立 Layout Library

將以下程式碼儲存為 application/libraries/Layout.php：

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Layout {
    protected $ci;
    protected $layout = 'layout_main'; // 預設版面檔案名（不含 .php）

    public function __construct($layout = 'layout_main') {
        $this->ci =& get_instance();
        $this->layout = $layout;
    }

    public function setLayout($layout) {
        $this->layout = $layout;
    }

    /**
     * 載入視圖並嵌入版面
     * @param string $view 內容視圖名稱
     * @param array $data 傳遞資料
     * @param bool $return 是否回傳字串而非直接輸出
     */
    public function view($view, $data = null, $return = false) {
        // 先渲染內容視圖，回傳字串存入 $data['content_for_layout']
        $data['content_for_layout'] = $this->ci->load->view($view, $data, true);

        if ($return) {
            return $this->ci->load->view($this->layout, $data, true);
        } else {
            $this->ci->load->view($this->layout, $data, false);
        }
    }
}
?>

版面模板（layout_main.php）

放置於 application/views/layout_main.php，包含共同結構：

<html>
<head>
    <title><?= isset($page_title) ? $page_title : '預設標題' ?></title>
    <meta name="keywords" content="<?= isset($Keywords) ? $Keywords : '' ?>" />
    <meta name="description" content="<?= isset($Description) ? $Description : '' ?>" />
</head>
<body>
    <header>網站標頭區塊</header>
    <nav>導覽選單</nav>
    <main>
        <?= $content_for_layout ?> 
        <!-- 若不習慣短標籤，可用 <?php echo $content_for_layout; ?> -->
    </main>
    <footer>網站底部版權資訊</footer>
</body>
</html>

控制器使用範例

<?php
class Welcome extends CI_Controller {
    public function index() {
        // 載入 library，第二個參數可指定版面檔案（不含 .php）
        $this->load->library('layout'); // 預設 layout_main
        // $this->load->library('layout', 'template'); // 使用 views/template.php

        $data['page_title'] = '幫客之家';
        $data['Keywords'] = '互聯網,技術';
        $data['Description'] = '專注於互聯網技術';

        // 呼叫 layout->view() 而非 $this->load->view()
        $this->layout->view('support', $data); // 載入 views/support.php
    }
}
?>

進階應用：動態切換版面

// 後台管理頁面使用不同版面
public function admin_dashboard() {
    $this->load->library('layout', 'layout_admin');
    $this->layout->view('admin/dashboard', $data);
}

// AJAX 回傳 HTML 片段時，不套用版面
public function ajax_content() {
    $this->load->library('layout');
    // 直接輸出內容視圖，不包裝 layout
    $this->ci->load->view('ajax/partial', $data); 
}

總結

自建 Layout Library 只需短短幾十行程式碼，即可賦予 CI 強大的版面複用能力。核心概念是「先渲染內容視圖為字串，再傳入版面視圖輸出」，符合 CI 輕量彈性的設計哲學。