-
Notifications
You must be signed in to change notification settings - Fork 0
Dev.Front Theme Step By Step.zh_cn
首先，开发者可以尝试修改default theme中的部分代码并查看效果，来了解主题包内各个文件的作用范围。Default theme存放在usr/theme/default目录下。
需要了解主题包内的目录结构，请点击这里。
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后，进入系统前台首页，就能看到相应的效果。
进入后台 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。
一旦修改了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 } ?>
调整完代码后，可以在前台主页查看相应的变化。
可以尝试注释部分代码后查看页面效果，例如，注释区块标题，刷新前台主页查看效果。
// 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'
在了解了主题包内各个文件的作用之后，可以尝试自己制作一个主题。
在此我们尝试制作一个名为twelve的主题包。首先，需要创建主题包所必须的目录及文件。文件目录及必须文件请参考这里。
创建好目录结构之后，可以开始创建各个必须的文件。
注意： 文件夹名只能包含字母和数字。
创建配置文件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'
);
创建样式文件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 {
}
创建该主题下的页面架子文件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>
创建这个主题下前台页面的布局架子文件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 } ?>
创建区块模板，完全可以直接复制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布局的稳定性。
熟悉了主题制作方法之后，还可以尝试以下方法进一步修改主题，使主题更加适合自己的网站。
之前创建的twelve主题是没有继承任何主题的，现在可以在twelve/config.php中添加以下内容使twelve继承default主题。
'parent' => 'default'
或者也可以让twelve主题继承theme文件夹中的另一个主题pi
'parent' => 'pi'
接下来我们在twelve主题内创建模块主题文件覆盖widget模块内的主题文件。
- 创建模块主题目录结构
创建twelve/module/widget目录，目录下文件结构如下。
widget/ ├── asset/ │ └── css/ │ └── slideshow.css ├── template/ │ └── block/ ` └── carousel-bootstrap.phtml
- 修改模块主题文件
根据需要添加样式文件和模板覆盖模块内主题文件，注意修改完成后需要重新发布并清空缓存。
- 在
twleve/template路径下根据需要创建新的区块模板 - 在
twleve/template/layout-front.phtml中引入区块模板应用