Theme 简介 - 类別

简介

Theme 类别为你的应用程序提供主题。

一个主题会集合主题样板（检视）和资产， 并且允许你透过切换活跃主题来变更应用程序的外表与感觉。

就像模组和套件，主题可以被储存在多个位置。你可以在配置档案中定义到这些位置的路径， 或在执行阶段把他们添加到主题实例。一个主题是透过它的名称来识别，必须等于在主题位置中使用的主题文件夹名称。 如果该主题在多个位置被定义， 第一个找到的会被使用。

Theme 资讯

你可以透过主题资讯档案来为你的主题提供设置。 所有你的主题的该档案有一个固定名称，它可以透过全域配置档案来配置。 它也有一个让该档案为必要的选项。

资讯档案的格式遵循相同的规则做为正常的配置档案，并支援相同的档案类型。 资讯档案可以包含一个称为 'options' 的特别段落。选项可以从你的程式码被取得或设定， 可以用来控制你的主题的某些特性，例如使用的颜色，或自订的 css 档案名称来选择一个颜色方案。

在这个时候，资讯档案是唯读。你可以在执行阶段改变，但你不能写回。

Theme 资产

You theme is likely to have assets (images, javascript or css files). Assets have to be installed inside the DOCROOT so that the browser can load them. You can elect to install the assets inside the theme directory, which implies this has to be inside the DOCROOT, or have the theme files outside the DOCROOT, and the theme assets in a separate folder inside the DOCROOT. Alternatively, you can specify a base URL for your assets, for example if you use a CDN.

以下逻辑是用来检测主题资产档案的位置：

• If your asset folder is a URL, it is suffixed by the theme name, and used as the base URL for your assets.
• If the theme folder is inside the DOCROOT, and it contains a folder with the name of the configured assets_folder, this will be the URL for all your theme assets.
• If the theme folder is inside the DOCROOT, and it does NOT contains a folder with the name of the configured assets_folder, the assets_folder will be assumed to be the root of all your theme assets, to which the name of the theme will be appended.
• If the theme folder is outside the DOCROOT, the assets_folder will be assumed to be the root of all your theme assets, to which the name of the theme will be appended.

如果你想用内建的 Asset 类别支援，你的资产文件夹必须有相容的文件夹结构：/css、/img 和 /js 子文件夹。

Theme 样板或布局

Theme 与主题样板或布局协作，他们是定义你页面布局的检视档案。

Theme 样板局部

The variable sections of the template can be defined using template partials, which are separate views build to provide a section of the page. In larger application designs, partials are often generated by separate code, accessed via HMVC calls.

The contents of a partials section can be accessed through a view variable $partial, an array with an entry for each of the partial sections defined. You access a section using it's name. So for a partial section called 'sidebar', you would use echo $partial['sidebar']; in your page template.

局部 chrome

'Chrome' 是 UI 介面设计的术语，用来描述视窗边框的风格及设计。在 Theme 类别的情境中， it is a view that can be used to encapsulate a template partial section, which allows you to style that section independent of the template itself and of the partial output. Chrome will only be generated if there are partials to render. A chrome template will encapsulate a partial section, which may contain multiple partials.

For example, if you have a UI with windows, some of which can be opened and closed, some of which can be moved, and some are static, you can use different chrome templates assigned to each of the template sections representing such a window. Each chrome template contains the HTML and javascript code to achieve the desired functionality. From your application code, you can control the window behaviour by simply assigning the correct chrome template. This can be particularly useful in CMS type applications, where the user can control the behaviour of the UI.

範例：

<?php
class Homepage extends \Controller
{
	/**
	 * 载入主题样板，设定页面标题及选单
	 */
	public function before()
	{
		// 载入主题样板
		$this->theme = \Theme::instance();

		// 设定页面样板
		$this->theme->set_template('layouts/homepage');

		// 设定页面标题（也可以被鍊结到 set_template()）
		$this->theme->get_template()->set('title', 'My homepage');

		// 设定 homepage 导览选单
		$this->theme->set_partial('navbar', 'homepage/navbar');

		// 为 sidebar 部份定义有圆角窗框的 chrome
		$this->theme->set_chrome('sidebar', 'chrome/borders/rounded', 'partial');

		// 为 homepage sidebar 内容设定局部
		$this->theme->set_partial('sidebar', 'homepage/widgets/login');
		$this->theme->set_partial('sidebar', 'homepage/widgets/news')->set('news', Model_News::latest(5));

		// 呼叫 user 模型来取得登入的使用者列表，传给 users sidebar 局部
		$this->theme->set_partial('sidebar', 'homepage/widgets/users')->set('users', Model_User::logged_in_users());
	}

	/**
	 * A simple example. A normal action method would probably have code to
	 * retrieve data from models and pass this to a partial view...
	 */
	public function action_index()
	{
		// the homepage has a flash image banner
		$this->theme->set_partial('banner', 'homepage/banner');

		// a block of static content
		$this->theme->set_partial('content', 'homepage/content');

		// and two link lists and a copyright block
		$this->theme->set_partial('footerleft', 'homepage/shortcuts');
		$this->theme->set_partial('footercenter', 'homepage/links');
		$this->theme->set_partial('footerright', 'homepage/copyright');
	}

	/**
	 * keep the after() as standard as possible to allow custom responses from actions
	 */
	public function after($response)
	{
		// 如果该 action 没有回传 response 物件，
		if (empty($response) or  ! $response instanceof Response)
		{
// 呈现定义的样板
$response = \Response::forge(\Theme::instance()->render());
		}

		return parent::after($response);
	}
}
	

配置

Theme 类别是透过 app/config/theme.php 配置档案进行配置。 一个有以下提及配置的预设配置档案已经存在 fuel/core/config 中。 你可以藉由複製此配置档案到你的应用程序 config 目录，并根据需求修改该档案。

'default'

'default'

array()

'assets'

'.html'

'theme.info'

false

'php'

false

配置範例：

// 在 app/config/theme.php 里

return array(
	'active' => 'default',
	'fallback' => 'default',
	'paths' => array(			// 在这里主题档案在 DOCROOT 之外
		APPPATH.'themes',
	),
	'assets_folder' => 'themes',	// 所以这意味着 <localpath>/public/themes/<themename>……
	'view_ext' => '.html',
	'info_file_name' => 'theme.info',
	'require_info_file' => false,
	'info_file_type' => 'php',
	'use_modules' => true,
);
	

一旦你的设定到位，你可以开始使用 Theme 类别。