Skip to content

Dev.Front Theme Advance.zh_cn

lavenderli edited this page Aug 12, 2013 · 8 revisions

1 主题继承

主题继承的目的就是实现多主题共存下模板的继承,相应的配置在{theme name}/config.phpparent属性。
如果不填写属性值,则默认继承default主题。如果配置文件中没有parent属性则不继承任何主题,这个主题就必须包含template/layout-content.phtmltemplate/paginator.phtmltemplate/error-exception等模板,如果缺少了必须的模板,在主题安装的时候会看到缺少必要文件的提示信息。
例如,创建两个主题a、b。

  1. 设置b主题的parent属性为a,则b主题的模板就都可以继承a里面相应的模板。
//  b/config.php
'parent' => 'a'
  1. 设置b主题的parent属性为空或者default,b主题就会继承default主题。
//  b/config.php
'parent' => ''
// or you can set it as default
'parent' => 'default'
  1. 删除b主题的parent属性,则b主题不继承任何主题,如果不在template文件夹中创建必须模板直接安装的话就会出现错误提示。

2 覆盖模块模板

Pi系统的模块存放在usr/module/{module name}目录下,模块目录下的asset和template文件夹内存放的是和主题相关的文件,如果在主题包内没有相应文件则会使用该目录下的主题文件。
开发者可以在主题内创建相应文件夹以覆盖模块内主题文件。
在此以widget模块为例,在default theme内覆盖widget模块的slideshow。

  1. 创建模块主题目录结构
    创建default/module/widget目录,widget文件夹内文件结构如下。
widget/
 ├── asset/
 │     └── css/
 │         └── slideshow.css
 ├── template/
 │     └── block/
 `         └── carousel-bootstrap.phtml
  1. 修改模块主题文件
    开发者可以根据需要在以上目录结构中添加样式和模板文件以覆盖模板内主题文件。
    注意:
    1. 要使修改生效的话,必须进入后台先重新发布相应主题,然后清除asset缓存即可以生效。具体如何操作可以参考这里
    2. 如果覆盖的是模块区块的模板,在引入css的时候,一定要在第二个参数里指明模块名字,例如上面的例子,需要在模板里添加如下语句。
<?php
  $this->css($this->assetModule('asset/css/slideshow.css', 'widget'));
  ...

3 区块模板

主题下一般都会有区块模板,有时候为了适应不同区域下区块的不同样式,会需要做多个区块模板。
例如,在主题包{theme name}/template路径下创建如下两个区块模板。

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

具体如何制作区块模板可以参考区块模板制作教程。
制作好区块模板后可以在主题下的{theme name}/template/layout-front.phtml根据需求,引入不同的区块模板。

4 主题style.css定制模块样式

Clone this wiki locally