Skip to content

Dev.Front Theme Step By Step.zh_cn

Jump to bottom Edit New page
lavenderli edited this page Jul 25, 2013 · 31 revisions

1. Play with default

首先，开发者可以尝试修改default theme中的部分代码并查看效果，来了解主题包内各个文件的作用范围。Default theme存放在usr/theme/default目录下。
需要了解主题包内的目录结构，请点击这里。

修改CSS文件

Default theme的asset/css文件夹内包含了style.css，admin.css，front.css三个样式文件。
其中，style.css包含了前后台公用的样式组件；front.css是前台模板样式，admin.css是后台模板样式。

style.css, front.css ===> layout-front.phtml
style.css, admin.css ===> layout-admin.phtml

修改front.css中的类，如.pi-block，改完对应的css后，进入系统前台首页，就能看到相应的效果。

修改page-zone.phtml

进入后台 Setting->Page->Pages ，点击某项后的dress up就能看见当前主题下的架子。

//调整区域的位置，如:将1和8区域位置互换。
<tr>
    <td>{8}</td>
     ...
    <td>{1}</td>
</tr>

刷新页面，就能发现页面架子的区域发生变化。可以在后台 Setting->System->Pages，选择dress up，多拖拽几个区块，以测试界面效果。
page-zone.phtml的原理是使用table布局页面。位置的书写只要遵循table布局就行，区域支持0-99。

修改layout-front.phtml

一旦修改了page-zone.phtml的模板，相应的layout-front.phtml也需要做调整。根据在page-zone.phtml中修改的区域位置，在layout-front.phtml中找到对应位置修改。如：对应上例互换1和8区域位置。

<!-- Left zone //-->
<?php if (!empty($blocks['8'])) { ?>
<td class="pi-zone-8">
    <?php foreach ($blocks['8'] as $block) {
        include $blockTemplate;
    } ?>
<?php } ?>
...
<!-- Right zone -->
<?php if (!empty($blocks['1'])) { ?>
<td class="pi-zone-1">
    <?php foreach ($blocks['1'] as $block) {
        include $blockTemplate;
    } ?>
<?php } ?>

调整完代码后，可以在前台主页查看相应的变化。

修改block.phtml

可以尝试注释部分代码后查看页面效果，例如，注释区块标题，刷新前台主页查看效果。

// Note block-header
<!-- <div class="clearfix pi-block-header">
    ...
</div> -->

添加调试代码，刷新页面，可以在debug中看到调试信息。

// Debug $block
<?php
    d($block);
?>

切换开发模式

在开发过程中，开发人员可能需要看到调试信息，但是使用时却不需要看到这些信息，为了方便在这两种模式间切换，你可以使用以下方法。 在模板中添加以下代码判断属于何种模式。

if ('production' == Pi::environment()) {
    ...
} else {
    ...
}

打开var/config/engine.php文件，找到以下内容，修改environment变量的值。

//Run mode. Potential values: production - for production, debug - for users debugging, development - for developers, close - for maintenance
'environment'   => 'development'

2. Bulid your own theme

在了解了主题包内各个文件的作用之后，可以尝试自己制作一个主题。

创建主题包

在此我们尝试制作一个名为twelve的主题包。首先，需要创建主题包所必须的目录及文件。文件目录及必须文件请参考这里。
创建好目录结构之后，可以开始创建各个必须的文件。
注意： 文件夹名只能包含字母和数字。

创建config.php配置文件

创建配置文件twelve/config.php，添加以下内容。

<?php
return array(
    'version'       => '0.0.1',
    'type'          => 'front',
    'title'         => 'twelve',
    'author'        => 'author',
    'screenshot'    => 'image/screenshot.png',  // 主题截图可以在主题完成后再截图
    'description'   => '12 columns, making for a 940px wide container',
    'browser'       => 'ie8+ , firefox, chrome'
);

创建style.css样式文件

创建样式文件twelve/asset/css/style.css，添加以下内容。

/* Base */
/* Layout */
.container {
}

.pi-main {
}

.pi-side {
}

.span1 {
}
/* Header */
.pi-header {
}

.pi-header-user {
}
/* Navigation */
.pi-nav {
}

.pi-menu {
}
/* Block zones */
.pi-zone-1 {
}
/* Block */
.pi-block {
}
/* Footer */
.pi-footer {
}
/* Component:  To be determined */      
.pi-list {
}
.pi-list-large {
}
.pi-gutter {
}
.pi-gutter-small {
}

创建page-zone.phtml

创建该主题下的页面架子文件twleve/template/page-zone.phtml。

<table>
    <thead>
        <tr>
            <td colspan="3">{0}</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="3">{99}</td>
        </tr>
    </tfoot>
    <tbody>
        <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>
                    <tr>
                        <td colspan="2">{7}</td>
                    </tr>
                </table>
            </td>
            <td>{8}</td>
        </tr>
    </tbody>
</table>

创建layout-front.phtml

创建这个主题下前台页面的布局架子文件twleve/template/layout-front.phtml。

<?php
    $this->css()
?>
<!DOCTYPE HTML>
<html lang="<?php echo $locale; ?>">
    <head>...</head>
    <body>...</body>
</html>

具体如何书写这个页面的代码，可以参照theme/default/template/layout-front.phtml里的代码。
注意： layout-front.phtml与page-zone.phtml的代码一定要对应。例如:

//page-zone.phtml
<td>{99}</td>

//layout-front.phtml
$blocks = $this->blocks();
<?php if (!empty($blocks['99'])) { ?>
<div class="container pi-zone-99">
    <?php foreach ($blocks['99'] as $block) {
        include 'block.phtml';
    } ?>
</div>
<?php } ?>

创建block.phtml代码

创建区块模板，完全可以直接复制theme/defualt/template/block.phtml里面的代码。因为这个区块模板代码支持的功能全面。

创建出错模板

在template文件夹内创建error.phtml，error-404.phtml，error-denied.phtml文件。
都可以定制成自己需要的样式。

  • error模板在程序出错的时候会出现。
  • eror-404会url找不到的情况下出现。
  • error-denied会在拒绝访问的情况下出现。

其他

在template文件夹内创建layout-simple.phtml，layout-style.phtml，layout-content.phtml，paginator.phtml文件。
对于这几个layout模板，在theme/defualt/config.php都有对应的简单说明，或查看这里。

安装主题

创建完以上文件之后，就可以安装应用该主题查看效果了。
进入 Operation->System->Themes->Availables 就能看见刚刚制作的主题twelve，点击安装。成功安装后，切换到Theme in action标签页，在 Themes available to use 中找到该主题，点击apply按钮，应用自己的主题。
接下来可以尝试进入 Setting->System->Pages->Homepage->Dress up 进行dress up，查看前台显示效果，以测试layout-front.phtml布局的稳定性。

3. Advanced

主题继承

主题继承的目的就是实现多主题共存下，模板的继承。相应的配置在{theme name}/config.php的parent属性，如果不填，默认继承default主题。如果为空的话，这个主题就必须包含template/layout-content.phtml template/paginator.phtml template/error-exception等等模板，在主题安装的时候能看到相应的提示信息。 比如，创建2个主题a，b。然后设置b主题的parent属性为a,b主题的模板就都可以继承a里面相应的模板。主题config.php

'parent' => 'a' 或者
去掉'parent'属性

主题覆盖模块开发者模板及 asset 文件

主题开发者可以在主题下面覆盖模块的模板，特别是widget模块，以覆盖widget模块的slideshow为demo。

  1. 在当前theme下面创建module widget。
├── asset/
│     └── css/
│         └── slideshow.css
├── template/
│     ├── block/
│         └── carousel-bootstrap.phtml
  1. 修改主题下的模块代码。
<?php
  $this->css($this->assetModule('asset/css/slideshow.css', 'widget'));
  ...

注意：

  1. 要生效的话，必须先asset操作，然后清除后台的asset缓存即可以生效。
  2. 如果覆盖的是模块区块的模板，比如上面这个demo，在引入css的时候，一定要指明第二个参数模块名字。

区块模板

一个主题下一般都会有区块模板，或者为了适应不同区域下，区块的不同样式，也可以做多个区块模板。

//block.phtml
<div class="block">
   <div class="block-header"></div>
</div>

//block-noheader.phtml
<div class="block-noheader"></div>

如何制作主题block模板可以参考theme教程。然后在主题下的layout-front.phtml根据需求，引入不同的block模板。

主题style.css定制模块样式

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