Dev.Front Summary.zh_cn

前端开发的主要工作是根据设计图进行页面制作。
Pi系统前端开发人员的主要工作包括了制作主题、模块模板等。根据具体需要，Pi系统有它自己的一套页面结构以及开发准则，接下来将会从主题制作、模块模板、前端API等几个方面带领读者学习Pi系统前端开发。

页面结构

Pi系统的页面分为四个部分，包括顶部、导航、页面主体和页脚，整体布局如下图所示。

 -------------------------------------------------------------------------------------
 |                                       header                                      |
 -------------------------------------------------------------------------------------
 |                                       menu                                        |
 |                                  ／                                               |
 |                     navigation                                                    |
 |                                  ﹨                                               |
 |                                       breadcrumbs                                 |
 -------------------------------------------------------------------------------------
 |   block    |                                                           |          |
 |   block    |                               2                           |          |
 |            |                                                           |          |
 |            |------------------------------------------------------------          |
 |            |                              |                            |          |
 |            |                3             |             4              |          |
 |            |                              |                            |          |
 |      1     |-----------------------------------------------------------|    7     |
 |            |                                                           |          |
 |            |                        module  content                    |          |
 |            |                                                           |          |
 |            |-----------------------------------------------------------|          |
 |            |                              |                            |          |
 |            |                5             |             6              |          |
 |            |                              |                            |          |
 |------------|-----------------------------------------------------------|----------|
 |                                                                                   |
 |                                        8                                          |
 |                                                                                   |
 -------------------------------------------------------------------------------------
 |                                       footer                                      |
 -------------------------------------------------------------------------------------

下面对页面的各个部分一一详细介绍。

1. 顶部
   一般采用写死的静态html代码。
2. 导航

• 菜单
  可以采用以下几种方式实现：
  • 程序定制$this->nav
  • 做成widget模块的区块
  • 静态html代码
• 面包屑
  通过程序判断是否在页面中输出面包屑。

3. 页面主体

• 模块内容
  模块程序ControllerAction通过$this->view()->setTemplate({name})设定其前台模板，生成模块内容。
• 区块内容
  （通过dress up功能拖拽到指定页面上显示或者通过程序$this->widget输出出来）
  • 通过后台widget模块定制静态区块。
  • 模块定制区块，模块通过配置block.php设置区块模板以及区块程序，生成区块内容。

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

4. 页脚
   一般是静态html代码。如果需要通过后台可编辑，可以做成静态的区块。