Skip to content

Dev.Front Theme Step By Step.zh_cn

Jump to bottom Edit New page
nothing edited this page Jul 19, 2013 · 31 revisions

Play with default

  1. 修改style.css和front.css
    default theme中asset包含style.css,admin.css,front.css。
style.css, front.css ===> layout-front.phtml
style.css, admin.css ===> layout-admin.phtml
// style.css包含了前后台公用的样式组件
// front.css前台模板样式
// admin.css后台模板样式

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

  1. 修改page-zone.phtml
    进入后台 Setting->Pages->Homepage dress up 就能看见当前主题下的一个架子
//调整区域的位置，如:1和8区域换位置。
<tr>
    <td>{8}</td>
     ...
    <td>{1}</td>
</tr>

刷新页面，就能发现页面架子的区域发生变化。可以在 System homepage 中多拖拽几个区块，以测试界面效果。

  1. 修改layout-front.phtml
<div></div>

一旦改了page-zone.phtml的模板，相应的layout-front.phtml也需要作出调整。调整完代码后，可以查看 System homepage ，就能发现对应的变化。

  1. 修改block.phtml
// Note block-header
<!-- <div class="clearfix pi-block-header">
    ...
</div> -->

// Debug $block
<?php
    d($block);
?>
  1. 修改开发模式
//var/config/engine.php
//production or development
'environment'   => 'development'

就能发现主题下面的调试模式的代码没了。有些模板可能在不同的开发模式想要不同的效果，你可以这样判断

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

Bulid your own theme

  1. 创建主题文件夹twelve文件
cd usr/theme
mkdir twelve     //创建twelve文件
vi config.php    //创建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'
);

Note: 文件夹名字只能包含字母和数字

  1. 进入Operation->System->Theme->Availables就能看见需要安装的主题，点击安装，则会提示缺少相应的文件，创建相应的文件,此时就能安装主题了。安装完主题过后，进入Theme in action,点击apply按钮，应用自己的主题。
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 
template/error-denied.phtml 
asset/css/style.css
  1. 编辑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 */      
.list {
}
.list-large {
}
.gutter {
}
.gutter-small {
}
  1. 编辑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>

以上代码不是固定的，写完代码后，可以在后台Setting->System->Page->dress up中看到生成的样式。原理就是使用table就行页面架子布局。位置的书写只要遵循table布局就行，区域支持0-99。

  1. 编辑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 } ?>

  1. 编辑block.phtml代码，创建区块的模板，完全可以直接复制defualt theme里面block的代码。因为这个区块模板代码支持的功能全面。
    修改完以上3个文件过后，就可以尝试对 System Module Homepage 进行dress up,查看相应的效果，以测试layout-front.phtml布局的稳定性。

  2. error, error-404, error-denied出错模板，都可以定制成自己的样式。

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

  3. 对于其他几个layout模板，在default theme的config.php都有对应的说明。

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