Codeigniter View Library

一個彈性的 Codeigniter View 函式庫

說明

Codeigniter 是我最喜歡的 PHP 框架, 它不但快速輕巧, 完整又易讀的說明文件讓新手非常容易就可以上手. 但是它 ‘view’ 的部份讓我覺得功能上有點太薄弱了. Symfony 用 yaml 所達成彈性的 layout, view 還有 css 及 js 管理辦法. 一直讓我無法忘懷.

所以我寫了這個 codeigniter 的 view 函式庫. 當你在寫大型專案或是有非常多相似但又不同的頁面的時候, 與用這個函式庫會讓你更輕鬆的去管理你個 layout, view, css, js 等等的相關檔案

特色

用 YAML 檔管理 layouts, page title, metas, css and js 檔案並讓你的 controllers 更乾淨輕量.
controller configs 可以覆寫 Default configs. 讓你可以更彈性的切分你的 css 及 js.
在 production 狀態下會合併及壓縮 css 和 js 檔案. 減少 request 及加速 page loading

Demo

原始碼裡包含了範例網站. 請看 github 上 example_site 資料夾.
下載後將 example_site 資料夾放入你的 web root 並前往 http://localhost/example_site/ .

下載

從 Github 下載原始碼

原始碼

從 Github 檢視原始碼

需求

安裝

下載 Codeigniter View Library.
複製 libraries 資料夾裡面所有檔案到你的 application libraries 資料夾. 包括 carabiner.php, cssmin, curl, jsmin, view, Yaml.php, 還有 Yaml 資料夾及裡面所有的檔案.
複製 config 資料夾裡 carabiner.php 檔案到你的 application config 資料夾.
複製 helpers 資料夾裡 application_helper.php 檔案到你的 application helpers 資料夾.
在 views 資料夾裡新增加一個 common 資料夾. 複製 examples/config/common/config.yml 到 application/views/common/.

設定

在 application/config/carabiner.php 裡設定 css, js 還有 cache 資料夾( 這個資料夾存放壓縮及合併後的 css 和 js 檔案)路徑. 通常你只需要在和 index.php 同一個資料夾下新這些資料夾就可以了.
在 application/config/autoload.php 裡設定自動載入 libraries yaml, carabiner, view 還有 helpers application, html, url.
參照以下說明來放置 partials, views 和 layouts.
- 將共通的 partials 和 default configs 放在 application/views/common 資料夾.
- 對應 資料夾名稱 到 controller 名稱; 檔案名稱 對應到 action 名稱.
- 如果想覆寫或是增加 configs, 新增一個 config.yml 到 application/views/[controller 名稱] 資料夾.
- 請注意 title 和 metas 可以被新增或覆寫但是 css 和 js 只可以新增但不能被覆寫.
- 你也可以用 $this->view->config();在 controller 裡設定 configs. 更多說明請看 Public Methods 部分.
- Partial 的名稱應該要以底線開頭. 這不是強制的規定但是這樣做可以讓我們更容易區分這個檔案是 action views 還是 partials.

- [views]
  - [common] // common partials
    - _nav.php // partial 的名稱以底線開頭
    - _sub_nav.php
    - config.yml // view common configs

  - [layouts] // layout 檔案放這裡
    - default.php
    - admin.php

  - [stores] // 將資料夾名稱對應到 controller 名稱
    - edit.php // 將檔案名稱 names 對應到 action 名稱
    - index.php 
    - new.php
    - show.php
    - _sidebar.php // 只在這個 controller 用的 partial
    - config.yml // 你可以在這個檔案裡新增或是覆寫 css, js, page title 還有 metas

YAML Configs

在 application/views/common/config.yml 裡設定 default configs

# 如果你不想用 layout 的話設定為 false
has_layout: true

# default layout 名稱
layout:
  default

#layouts
default: # <-- 這個對應到 layout 檔案名稱
  title: default title for the entire application

  metas:
    # http metas goes here
    https:
      content-type: text/html; charset=utf-8
      content-language: en-US

    name:
      keywords: default, keywords, about, this, site
      說明: default 說明 about this site
      robots: index, follow

  css:
    # 如果你有 css 放在 cdn 上請將它們列在這裡
    cdn:

    # 在 production 模式這些檔案會被壓縮並且合併
    site:
      - common/reset
      - common/util
      - common/header
      - common/main

  # 使用方法同上
  js:
    cdn:
      - https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min   

    site:
      - common/lang
      - common/tabs

# 你可以依照上面的格式增加更多的 layout 設定

你可以在不同的 controller 和 action configs application/views/[controller name]/config.yml 裡新增更多的 css 及 js.

# actions
# 對這個 controller 裡所有 actions 的通用設定
common:
  # 如果設為 false 所有 action 都不會使用 layout
  has_layout: true

  # 你也可以設定在這個 controller 裡所有 actions 都使用另一個 layout
  layout: admin

  title: some different title for all actions in this controller

  metas:
    # add as many metas as you wish
    https:

    name:
      keywords: keywords, for, all, actions, in, this, controller
      說明: 說明 for all actions in this controller

  css:
    cdn:
      - some css on cdn for all actions in this controller
    site:
      - local css for all actions in this controller

  js:
    cdn:
      - some js on cdn for all actions in this controller
    site:
      - local js for all actions in this controller

# 為每一個 action 做個別設定
index:
  title:
    some different title for this action 

  metas:
    https:

    name:
      keywords: keywords, for, this, actions, only
      說明: 說明 for this action only

  css:
    cdn:
      - some css on cdn for this action only
    site:
      - local css for this action only

  js:
    cdn:
      - some js on cdn for this action only
    site:
      - local js for this action only

some_other_action:
  # 如果設為 false 這個 action 就不會使用 layout
  has_layout: false

# 你可以依照上面格式來為每一個 action 做個別設定

重要!!!

如果你在 application/views/common/config.yml 裡有 4 個 js 檔案, 在 application/views/[controller name]/config.yml 的 common 設定裡有 3 js 檔案, 在 [action 名稱] 裡有 2 個 js 檔案. 在 production 模式 下你總共會有 3 檔案在assets/cacje/ 目錄裡. 第一個檔案在 整個 application 裡都會被使用, 第二個檔案在 這個 controller 裡所有的 action 都會被使用. 而最後一個檔案只有在 這個 action 會被使用.

Layouts

一個簡單的 layout 範例

<?php echo doctype('xhtml1-trans'); ?>
  <head>
    <?php $this->view->metas(); ?>
    <?php $this->view->title(); ?>
    <?php $this->view->asset('css'); ?>
    <?php echo link_tag( base_url().'favicon.png', 'shortcut icon', 'image/ico'); ?>
  </head>
  <body>
    <div id="wrap">
      <div id="header">
        <h1><?php echo $title; ?></h1>
        <p>A real simple layout example</p>
      </div>
      <div id="content">
        <!-- yield this block for action view -->
        <?php echo $yield; ?>
      </div>
      <div id="footer">
        Your footer goes here
      </div>
    </div>
    <!-- js file at the bottom for faster loading page -->
    <?php $this->view->asset('js'); ?>
  </body>
</html>

Public Methods

asset($type)

說明: 輸出所有 css 或 js 標籤
argument 資料型別: string
預設值: 沒有預設值
可能的值: ‘css’, ‘js’
範例程式碼

在 layout 檔案裡的 head 標籤中

// 輸出所有 css 標籤
<?php $this->view->asset('css'); ?>

// 輸出所有 js 標籤
// 放在頁尾 </body> 標籤之前可以加快頁面載入
<?php $this->view->asset('js'); ?>

config($configs)

說明: 在 controller 裡增加或修改 config
argument 資料型別: array
範例程式碼

在 controller 裡

public function index()
{
  // 在這個 action view 中新增更多 js 和 css 檔案然後輸出這個頁面
  $this->view->config(array(
    'js' => array(
      'cdn' => array(
        'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min'
      ),
      'site' => array('example', 'another_example')
    ),
    'css' => array(
      'site' => array('example', 'another_example')
    )
  ))->render();
}

另一個比較常用的範例

public function show()
{ 
  // 載入 database 和 helper
  $this->load->helper('url');
  $this->load->database();

  // 從網址擷取product id
  $product_id = $this->uri->segment(3, 0);

  // 在 db 查詢資料
  $product = $this->db
                  ->get_where('products', array('id' => $product_id))
                  ->first_row();

  // 給每一個 product 頁面不同的 title, metas 
  $this->view->config(array(
    'title' => $product->title,
    'metas' => array(
      'name' => array(
        keywords => $product->keywords,
        description => $product->description
      )
    )
  ))->render();
}

metas()

說明: print out all meta tags
範例程式碼

在 layout 檔案裡的 head 標籤中

// 輸出所有 meta 標籤
<?php $this->view->metas(); ?>

parse($data=null)

說明: 用 codeigniter Template Parser Class 來 parse action view.
重要!!!: 用 parse 話, 只能在 controller 裡傳送資料
argument 資料型別: array, string, integer, bool
預設值: null
可能的值: 任何你想要傳給 action view 的資料
範例程式碼

在 controller 裡

public function index()
{
  $data['nav_selected'] = 'about';
  $this->view->parse($data);
}

partial($partial_path, $data=null)

說明: 在 action view 裡輸出 partial
Arguments:

$partial_path

說明: partial 檔案的路徑
資料型別: string
預設值: 沒有預設值
可能的值: common/_nav, about/_lang …

$data

說明: 要傳入 partial 裡的資料
資料型別: array, string, integer, bool
預設值: null
可能的值: 任何你想要傳給 partial 的資料
範例程式碼

在 layout 或是 action view 裡. ex. about/index.php

// 在 'about/index.php' 裡輸出 partial 'common/_sub_nav.php'
<?php
  $this->view->partial('common/_sub_nav', array(
    'sub_nav' => array(
      array('title' => lang('works.apps'), 'href' => 'apps'),
      array('title' => lang('works.open_source'), 'href' => 'open-source')
  )));
?>

render($data=null)

說明: 輸出 action views
argument 資料型別: array, string, integer, bool
預設值: null
可能的值: 任何你想要傳給 action view 的資料
範例程式碼

在 controller 裡

public function index()
{
  $data['nav_selected'] = 'about';
  $this->view->render($data);
}

set($prop, $val)

說明: 設定 library configs
Arguments:

$prop

說明: 要被設定的 property
資料型別: string
可能的值: ‘lang’, ‘controller’, ‘action’, ‘layout’, ‘uni_title’

$val

說明: 要被設定 property 的值
資料型別: string
可能的值:
- 當 $prop = 'lang':
  - 可能的值: ‘en’, ‘tw’….
- 當 $prop = 'controller':
  - 說明: what controller config you want to apply to the current action
  - 可能的值: ‘shops’, ‘carts’ …
- 當 $prop = 'action':
  - 說明: what action config you want to apply to the current action
  - 可能的值: ‘index’, ‘show’ …
- 當 $prop = 'layout':
  - 說明: what layout you want to use
  - 可能的值: ‘admin’, ‘shops’ …
- 當 $prop = 'uni_title':
  - 說明: generate a unique title using title plus meta 說明
  - 預設值: true
  - 可能的值: true, false
範例程式碼

在 controller 裡

// 在 'send' action 裡用 'sent' action 的 asset 檔案
public function send()
{
  $this->view->set('action', 'sent')->render();
}

title()

說明: 輸出 title 標籤
範例程式碼

在 layout 檔案裡的 head 標籤中

// 輸出 title 標籤
<?php $this->view->title(); ?>

Development

在 application/config/carabiner.php (line 63 附近) 裡設定 $config['dev'] = TRUE;
在 development 模式所有的 css 和 js 都不會被壓縮合併

Production

在 application/config/carabiner.php (line 63 附近) 裡設定 $config['dev'] = FALSE;
在 production 模式所有的 css 和 js 都會被壓縮合併
*請確認你的 assets/cache 資料夾權限被設為可以寫入的

TODO

Cache YAML file look up result in the next version.

Codeigniter View Library

ÈóúÊñºÊàëÂÄë

‰ΩúÂìÅ

ËÅØÁµ°ÊàëÂÄë

ÈÉ®ËêΩÊ†º

Codeigniter View Library

一個彈性的 Codeigniter View 函式庫

說明

特色

Demo

下載

原始碼

需求

安裝

設定

YAML Configs

重要!!!

Layouts

Public Methods

asset($type)

config($configs)

metas()

parse($data=null)

partial($partial_path, $data=null)

render($data=null)

set($prop, $val)

title()

Development

Production

TODO