(一)T3框架的整体结构及一些block的功能解释
下面的图片分为左右两个部分,展示了JA PurityJA Purity II中在组织结构方面的差别;我们可以看到,Purity II中包含两个新的文件夹路径,名为layoutslibs,他们包括了JA Purity II模板的布局、默认block、默认导航工具(JA Menus)和一些默认用户工具。
新模板框架结构中的block路径里面包括了构成页面模板的全部元素,它们是:
header:通常用来封装站点logo、站点标题、主导航、全局搜索、登录表单、广告、声明、最新消息等。
head:用来调用外部CSSJS库文件等。
footer:通常用来封装站点的版权声明、次级导航或广告等。
main:主要内容部分。
left:左侧边栏,用来封装菜单、内容条目分类链接等。
right:右侧边栏,用来封装广告、相关内容链接、购物车、高级搜索等。
top spotlightbottom spotlight:头尾信息焦点区。
user-tools:包含一些常用工具,使用户在使用站点时更轻松;例如颜切换、字号切换、窗口尺寸和导航切换等。
(二)Purity II模板的布局结构
首先呢,我们可以通过下面的示意图来了解一下P板默认布局中的模块位;其中红代表HTML标记代码中的id名称,蓝是class名称:
布局是由不同的页面区块,即“block”组成的;打开Purity II模板layouts文件夹中的blocks文件夹,会发现我们在前面一篇文档中提到的block在这里都有各自代码文件。举例说,左侧边栏区块的默认样式是矩形的,由left.php文件定义,而left-rounded.php则用来定义圆角矩形样式的左侧边栏区块;右侧边栏的默认样式是圆角矩形,通过right.php来定义,而right-xhtml.p
hp文件则定义了矩形样式的右侧边栏模块。有些拗口,但是关系必须梳理清楚:对于默认样式是矩形的block,带有“-rounded”的文件用来定义它们的圆角版本;而对于默认样式是圆角矩形的block,带有“-xhtml”的文件用来定义它们的矩形版本。
现在我们回退一层文件夹,在layouts文件夹里面,有些文件以“.round”为后缀,有些以“.square”为后缀;例如“und”文件定义的布局方式是左侧边-主内容-右侧边,并全部为圆角矩形样式;它调用到的block文件有left-rounded.phpmain-rounded.phpright.php“left-right-main.sqaure”定义的布局方式类似,但区块都以普通矩形的样式输出,它调用到的block文件有left.phpmain.phpright-xhtml.php;其他的几个布局样式同理。下图相对直观一些的展示了layoutblock文件之间的调用关系:
我们在基于Purity II模板进行自定义的时候,可以在layouts文件夹中使用对应自己设计需求的文件名称,对于block文件也是;只要保证他们的调用关系正确无误就OK
另外有几个block文件夹,如handheldiphoneie6,专门针对手持设备、iphoneIE6等进行特别的定义。
Purity II模板布局结构方面的总览大致就是这样,明天我们来剖析一下默认布局及其相关文件(default.php)
(三)Purity II 默认布局详解
P板的layouts文件 夹中,有两个默认布局文件:
default.php:很多用户使用这个文件来开发自己的模板布局。
default-joomla.phpjavascript是什么意思中文翻译:和 default.php类似,但是使用自己的一套block设定(相应的文件存放在layouts/blocks/joomla文件夹中)
下面图中所示的就 Purity II的默认布局,和在线演示中的页面是相同的。中间是 default.ph
p文件里的一小部分代码,它们分别对应着布局中的左、右侧边栏;正如前面一篇文档中提到的,默认布局中,左侧边栏的样式为普通矩形, 右侧边栏为圆角矩形。
接下来我们对default.php文件进行进一步的围观:
第十六行附近:
$this->_basewidth = 20;
这行代码使用百分比来根据当前窗口的尺寸设定列的宽度。
接下来的代码:
$positions = array (
  'left1'          =>'left',
  'left2'          =>'',
  'left-mass-top'      =>'',
  'left-mass-bottom'    =>'',
  'right1'        =>'right',
  'right2'        =>'',
  'right-mass-top'    =>'',
  'right-mass-bottom'    =>'',
  'content-mass-top'    =>'',
  'content-mass-bottom'  =>'',
  'content-top'      =>'',
  'content-bottom'    =>'',
  'inset1'        =>'',
  'inset2'        =>''
);
用来定义默认布局中的block位置。其中左侧边栏区块(left)拥有两个二级单位:left1left2blocks文件夹中的left.php 文件使用该区块位置进行输出;右侧边栏(right)同理。
需要注意的是,在这里将left2指向left并不会造成实际输出样式发生变化,除非模块使用了不同的class名称并在CSS中进行了单独的样式设置。
参考JA文档中文翻译 - JA模板框架指南 - Purity II的布局结构一文中的默认布局区块位置示意图,我们继续:
left-mass-top:位于左侧边栏区块(包括left1left2)的上方。
left-mass-bottom 位于左侧边栏区块的下方。
right-mass-top:位于右侧边栏区块(包括right1right2)的下方。