Dev.Front Theme File.zh_cn

1 File Structure

主题包主要包含asset、template、locale、module、config.php，目录结构如下：

  {theme name}/
  ├── asset/            （资源文件）
  │   ├── css/
  │   ├── image/
  │   ├── js/
  │   └── locale/
  ├── locale/           （翻译文件）
  │   ├── en/
  │   └── zh-cn/
  ├── module/           （模块主题文件）
  ├── template/         （模板文件）
  └── config.php        （主题配置文件）

2 File Description

对于一个主题包，至少要包含以下文件。

template/layout-front.phtml       （区块功能，配合后台实现拖拽功能）
template/layout-simple.phtml      （只有模块内容，没有区块功能）
template/layout-style.phtml       （带有样式的简单内容输出模板）
template/layout-content.phtml     （不带样式的简单内容输出模板）
template/paginator.phtml          （分页显示模板）
template/error.phtml              （错误模板）
template/error-404.phtml          （404模板）
template/error-denied.phtml       （拒绝访问模板）
asset/css/style.css               （主题风格样式文件）

下面具体介绍主题包中的部分文件。

config.php

config.php文件放置在主题包的根目录下，配置了主题包的一系列属性，相关属性简介可参考如下文件。

<? php
return array(
    // 版本号
    'version'       => '0.0.0',

    // 当前主题类型(front/admin/both)
    'type'          => 'front',

    // 主题标题
    'title'         => 'PI Theme',

    // 作者信息
    'author'        => 'Taiwen Jiang',

    //截图，相对于asset路径。如果注释掉这段代码，使用系统默认的static/image/screenshot.png
    'screenshot'    => 'image/screenshot.png',

    // License or theme images and scripts
    'license'       => 'Creative Common License http://creativecommons.org/licenses/by/3.0/',

    // 描述
    'description'   => 'PI Engine official theme',

    //指定当前主题继承哪个主题，实现模板的继承，比如（err-404,err-exception, paginator模板继承）
    //当一个系统下建了多个主题，很有用。默认值为当前主题。
    //该属性可以被注释掉。
    'parent'        => '{theme name}',

    //描述浏览器兼容性
    'browser'       => 'Internet Explorer: 6+; Chrome: 17+; Firefox: 10+; Safari: 5.1+; Opera: 9.8+;'
);

page-zone.phtml

Pi系统的页面使用table布局，前台页面需要根据page-zone.phtml写layout-front.phtml模板代码。

使用
管理员可以在后台 Setting->Page->Pages->Dress up 拖拽区块到page-zone.phtml定义的table格中用以布局前台页面。
一个区块区域内可放任意多个区块或者不放。
原理
利用table布局，实现一个主题下的layout，后台操作时读取这个layout，程序通过Controller和Action找到对应的页面进行拖拽操作。
在学习过程中，可以修改这个文件，调整区域位置和模块区域的位置，刷新后台dress up页查看新布局。
注意

一个主题下面的layout-front和page-zone.phtml需要对应上
在Pi系统中，只有前台页面能进行dress up
模板代码中的{num}和{content}分别代表区块区域和模块区域

<table>
    <tr>
        <td>{1}</td>
        <td>
        <table>
            <tr>
                <td colspan="2">{2}</td>
            </tr>
            <tr>
                <td>{3}</td>
                <td>{4}</td>
            </tr>
            <tr>
                <td colspan="2">{content}</td>
            </tr>
            <tr>
                <td>{5}</td>
                <td>{6}</td>
            </tr>
        </table></td>
        <td>{7}</td>
    </tr>
    <tr>
        <td colspan="3">{8}</td>
    </tr>
</table>

根据以上page-zone模板代码，产生的后台dress up页效果如下图所示。

layout-front.phtml

在Summary中介绍过Pi系统的前台页面结构，layout-front.phtml模板就是用来生成前台页面的模板。
前台页面主要分为顶部、导航、页面主体、底部四个部分。

顶部
一般采用静态html方式写死
导航

菜单
- 代码：$navigation = $this->nav('front')，echo $navigation->menu()
- 后台操作： Operation->System->Navigations ，导航可在后台维护
面包屑
- 代码：$navigation->breadcrumbs()
- 实现方式：后端控制，前台判断是否输出，有则输出，没有就不输出。

页面主体

模块内容
- 后台Controller和Action控制程序中通过以下语句设定前台模块模板，$this->view()->setTemplate({name})
- 模块程序通过以下语句给模板设置值$this->view()->assign(array('title' => $title))。前台模板可以调用$title这个变量，调试这个变量使用d($title);
- 模块模板文件路径：{module name}/template/front/{controller}-{action}.phtml。如果模块的模板名字是{controller}-{action}.phtml规范的话，则可以不用调用setTemplate这个方法，程序自动去调用指定的模块。
区块内容
- 代码：$blocks = $this->blocks();，$blocks就是这个页面所有的区块数组。
- 区块模板文件路径：{theme name}/template/block.phtml。通过循环$blocks，block.phmtl每次引入，区块模板里面的$block变量就能读出当前区块的数据，并渲染内容。

底部
底部一般采用静态html写死。如果想动态维护，也可以做成静态区块。

<?php
  <!-- load translate file --> 
  $this->i18nTheme('main');

  <!-- load theme css -->
  $this->css($this->assetTheme('css/style.css'), 'prepend'); 
?>
<!DOCTYPE HTML>
<html lang="<?php echo $locale; ?>">
<head>
    <!-- Charset -->
    <meta charset="<?php echo $charset; ?>">
</head>
<body id="pi-<?php echo Pi::service('module')->current(); ?>" class="<?php echo $locale; ?>">
  <!-- header -->
  <div class="header">
  </div>

  <!-- naviagtion -->
  <div class="container nav">
    <?php 
      $navigation = $this->nav('front');
      echo $navigation->menu(); 
    ?>
  </div>
  <?php
    /* breadcrumbs */
    $breadcrumbs = $navigation->breadcrumbs()->setSeparator('>')->render();
    if ($breadcrumbs) {
      echo "<div class='breadcrumb'>$breadcrumbs</div>";
    } 
  ?>
  <!-- page content -->
  <?php
      $blocks = $this->blocks();
  ?>
  <div class="container">
    <div class="row">
      <?php if (isset($blocks['1'])) {?>
      <div class="pi-zone-1">
          <?php foreach ($blocks['1'] as $key => $block) {
              include 'block.phtml';
          } ?>
      </div>
      <?php } ?>
      <div>
          <?php if(isset($blocks['2'])) { ?>
          <div class="pi-zone-2">
              <?php foreach ($blocks['2'] as $key => $block) {
                  include 'block.phtml';
              } ?>
          </div>
          <?php } ?>
          <?php if(isset($blocks['3'])) { ?>
          <div class="pi-zone-3">
              <?php foreach ($blocks['3'] as $key => $block) {
                  include 'block.phtml';
              } ?>
          </div>
          <?php } ?>
          <?php if (isset($blocks['4'])) { ?>
          <div class="pi-zone-4">
          <?php foreach ($blocks['4'] as $key => $block) {
              include 'block.phtml';
          } ?>
          </div>
          <?php } ?>
      </div>
    </div>
  </div>
  ...

  <!-- footer -->
  <div class="container footer">
  </div>
</body>
</html>

block.phtml

Pi系统的页面布局是模块+区块的形式，模块主要负责主体内容的显示，区块用于展示跟这个模块相关的或者其他信息。
block.phtml是区块的模板，可以在主题下进行定制，根据实际项目需求，实现不同的区块。
下面展示的是一个默认的区块样式。

 <!-- Block structure --> 
 ----------------------------------------------
 |  title                    subline1,subline2 |            --> block header
 ----------------------------------------------
 |                                             |
 |                                             |
 |                                             |
 |            ／  module custom render         |
 |    content                                  |
 |            ﹨  widget module render         |            --> block body
 |                                             |
 |                                             |
 |                                             |
 -----------------------------------------------

<div id="block-<?php echo $block['name']; ?>" class="block">
  <div class="block-header">
    <?php if ($block['subline']) { ?>
    <div class="block-header-subline"></div>
    <?php } ?>
    <h4 class="block-header-title"><?php echo $block['title']; ?></h4>
  <div>
  <div class="block-body">
    <?php echo $block['content']; ?>
  </div>
</div>

注意：一个主题可同时存在多个block模板，如block-noheader.phtml，block-tab.phtml，然后针对不同的区域引用不同的区块模板，以实现样式多样性。下面是引用不同区块模板的示例代码。

<?php if(isset($blocks['2'])) { ?>
<div class="pi-zone-2">
<?php foreach ($blocks['2'] as $key => $block) {
    include 'block.phtml';
} ?>
</div>
<?php } ?>
<?php if(isset($blocks['3'])) { ?>
<div class="pi-zone-3">
<?php foreach ($blocks['3'] as $key => $block) {
    include 'block-noheader.phtml';
} ?>
</div>
<?php } ?>

paginator.phtml

paginator.phtml是分页显示模板。

<?php if ($this->pageCount <= 1) { return; } ?>
<div class="pagination<?php if (!empty($class)) { echo ' ' . $class; } ?>">
    <ul>
      <!-- First page link -->
      <?php if ($this->previous) { ?>
      <li><a href="<?php echo $this->first->url; ?>"><?php _e('First'); ?></a>
      <?php } ?>

      <!-- Previous page link -->
      <?php if ($this->previous) { ?>
      <li><a href="<?php echo $this->previous->url; ?>"><?php _e('< Previous'); ?></a>
      <?php } ?>

      <!-- Numbered page links -->
      <?php foreach ($this->pagesInRange as $page): ?>
      <li class="<?php echo ($page->number == $this->current) ? 'active' : ''; ?>">
        <a href="<?php echo $page->url; ?>"><?php echo $page->number; ?></a>
      <?php endforeach; ?>

      <!-- Next page link -->
      <?php if ($this->next) { ?>
      <li><a href="<?php echo $this->next->url; ?>"><?php _e('Next >'); ?></a>
      <?php } ?>

      <!-- Last page link -->
      <?php if ($this->next) { ?>
       <li><a href="<?php echo $this->last->url; ?>"><?php _e('Last1'); ?></a>
      <?php } ?>
    </ul>
</div>

引用方法：$this->paginationControl($paginator, 'sliding', 'paginator.phtml', array('class' => 'pagination-centered'))
第四个参数可选，如果有值，就是给模板赋值一个类。

layout-simple.phtml

如果一个页面不需要拖拽功能，或者说没有区块概念，则可以使用这个模板。
在后端程序中使用$this->view()->setLayout('layout-simple')设置layout模板。

error-404.phtml

error-denied.phtml

error-exception.phtml

提示：可以使用以下代码控制在不同模式下生成不同的模板内容。例如，网站实际使用过程中不需要输出详细的错误信息，但调试时会需要这些信息，使用如下代码则可以在两种模式之间切换。

<div> production </div>
<?php if ('production' == Pi::environment()) return; ?>
<div> development... </div>

layout-admin.phtml

一般开发者开发的都是前台主题，如果后台主题想定制，可以增加这个模板，然后在后台设置。

asset/css/style.css

每个主题必须有个样式文件，控制一个主题下的风格。详细介绍参照css。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly