Skip to content

Dev.Front Theme File.zh_cn

Jump to bottom Edit New page
lavenderli edited this page Aug 7, 2013 · 11 revisions

File Structure

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

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

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

<? 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

<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>
  • 后台操作： Setting->Page->Pages->Dress up
  • 作用：前台根据它写layout-front模板代码。选择一个前台页面进行dress up，程序通过Controller Action找到对应的页面就行页面拖拽。 注意：只有前台页面能进行dress up
  • 原理：利用table布局，实现一个主题下的layout，后台操作读取这个layout，进行拖拽操作。
  • 标识：{num}和{content}分别代表区块区域和模块区域，一个区块区域可放1个或者多个区块或者没有区块。
  • 实践：可以调整区域位置和模块区域的位置，修改这个文件后，后台读取这个文件重新生成布局。
    注意：一个主题下面的layout-front和page-zone.phtml需要对应上。
    根据以上page-zone模板代码，实际产生的后台效果 page-zone

layout-front.phtml

<?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>
  • 组成
    1. 顶部
    2. 导航
      • 菜单
      • 面包屑
    3. 页面内容
      • 模块内容
      • 区块内容
    4. 底部
  • 程序
    1. 顶部一般在一个主题下是写死的，静态html。
    2. 导航
      • 菜单
        • 代码：$navigation = $this->nav('front')，echo $navigation->menu()
        • 后台操作： Operation->System->Navigations ，导航可维护。
      • 面包屑：$navigation->breadcrumbs()，后台控制，前台判断是否输出，有则输出，没有就不输出。
    3. 页面内容
      • 模块
        • 后台ControllerAction控制程序中通过以下语句设定模块前台模板$this->view()->setTemplate({name})
          模块模板文件路径：{module name}/template/front/{controller}-{action}.phtml。如果模块的模板名字是{controller}-{action}.phtml规范的话，则可以不用调用setTemplate这个方法，程序自动去调用指定的模块。
        • 模块程序通过以下语句给模板设置值$this->view()->assign(array('title' => $title))
          前台模板就可以调用$title这个变量，调试这个变量使用d($title);。
        • 最后模块所使用的模板生成了模块内容。
      • 区块
        • 代码：$blocks = $this->blocks();，$blocks就是这个页面所有的区块数组。
        • 模板路径：{theme name}/template/block.phtml。通过循环$blocks，block.phmtl每次引入，区块模板里面的$block变量就能读出当前区块的数据，并渲染内容。
      • 拖拽 （dress up）
        • 后台： Setting->Page->Pages->Dress up
        • 如果没有找到相应的页面的话，可以通过新增页面，输入ControllerAction指定需要拖拽控制的页面。
    4. 底部一般写死，静态html，当然如果想动态维护，也可以做成静态区块。

block.phtml

<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 structure --> 
 ----------------------------------------------
 |  title                    subline1,subline2 |            --> block header
 ----------------------------------------------
 |                                             |
 |                                             |
 |                                             |
 |            ／  module custom render         |
 |    content                                  |
 |            ﹨  widget module render         |            --> block body
 |                                             |
 |                                             |
 |                                             |
 -----------------------------------------------
  • 代码：区块模板代码，在不同的主题下可以进行定制，可以根据项目需求，实现不同的区块。
  • 多个：一个主题可同时存在多个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

<?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。

Add a custom footer
Add a custom sidebar
Clone this wiki locally