T3 FRAMEWORK教程

T3-Framework教程

T3布局系统

介绍T3框架布局——T3默认支持多种布局礼马差。在每一个布局兼泉铁,这是与多个模块建立(页眉软寄驰、主体软寄驰、聚光灯…)礼马差。每个块包含一个或多个模块位置礼马差。可以将特定模块位置分配给块礼马差。

 T3布局系统


布局配置

在布局部分兼泉铁,将有2个部分进行配置:布局结构和布局配置礼马差。

T3布局系统

在哪里保存布局设置?

当你配置布局兼泉铁,设置将被保存到INI文件兼泉铁,该文件位于模板templates/t3_bs3_blank/etc/layout/

当我改变默认的布局设置兼泉铁,该设置将被保存到default.ini文件礼马差。

T3布局系统

设置保存在INI文件的格式:

  1. [navhelper]
  2. position="navhelper"
  3. [footer]
  4. position="footer"
  5. [block1@spotlight-1]
  6. lg="col-lg-4"
  7. md="col-md-3"
  8. sm="col-sm-3"
  9. xs="col-xs-6"
  10. position="position-1"

当你删除INI文件兼泉铁,你的布局文件将被设置为默认值(在你采取任何改变原来的布局)


创建新布局

有2种方法来创建新的布局礼马差。

保存副本

从后端配置布局时兼泉铁,可以复制任何布局礼马差。

T3布局系统

拷贝的布局文件将存储在templates/t3_bs3_blank/tpls/

添加新的布局文件

每个布局都有自己的文件礼马差。该文件位于:templates/t3_bs3_blank/tpls

创建新的布局兼泉铁,你要拷贝一个布局文件是最简洁明了的创建礼马差。

T3布局系统


定义布局中的块

现在兼泉铁,打开拷贝文件并自定义礼马差。如果你想自定义模板设置面板兼泉铁,只需打开它兼泉铁,一旦你添加新的布局文件兼泉铁,它将被加载到布局列表中的模板设置面板礼马差。

打开此文件时兼泉铁,您会看到兼泉铁,有一些块的布局包括礼马差。可以添加新块或移除块礼马差。

若要在布局中添加新块兼泉铁,请使用下面的格式礼马差。

  1. <?php $this->loadBlock ("block_name") ?>

 

  1. <body>
  2. <?php $this->loadBlock ("header") ?>
  3. <?php $this->loadBlock ("mainnav") ?>
  4. <?php $this->loadBlock ("spotlight-1") ?>
  5. <?php $this->loadBlock ("mainbody") ?>
  6. <?php $this->loadBlock ("spotlight-2") ?>
  7. <?php $this->loadBlock ("navhelper") ?>
  8. <?php $this->loadBlock ("footer") ?>
  9. </body>

创建新的块 创建新的块兼泉铁,拷贝新的块文件:templates/t3_bs3_blank/tpls/blocks

T3布局系统

分配模块位置

每个块有一个分配给的模块位置兼泉铁,您可以使用下面的代码格式定义块的分配模块位置:

  1. <jdoc:include type="modules" name="<?php $this->_p("your_module_position_name") ?>" />

 

  1. <jdoc:include type="modules" name="<?php $this->_p($custom-position) ?>" style="JAxhtml" />

添加新的模块位置

步骤1:添加模块位置块

打开要添加新模块位置的块文件

  1. <jdoc:include type="modules" name="<?php $this->_p("your_module_position_name") ?>" />

 

  1. <!-- SIDEBAR 1 -->
  2. <div class="ja-sidebar ja-sidebar-1 <?php echo $this->getClass($layout, $col) ?><?php echo $this->getData ($layout, $col++) ?>>
  3. <jdoc:include type="modules" name="<?php $this->_p($sidebar1) ?>" style="JAxhtml" />
  4. </div>
  5. <!-- //SIDEBAR 1 -->

步骤2:定义新创建的模块位置

完成后兼泉铁,需要在文件中定义新创建的模块位置:TemplateDetail.xml

  1. <positions>
  2. <position>your_module_position_name</position>
  3. </positions>
  1. <positions>
  2. <position>position-14</position>
  3. <position>position-15</position>
  4. <position>custom-position</position> <! my created module position />
  5. </positions>

加载特定的样式表

你能为一个布局样式表加载兼泉铁,这样做兼泉铁,创建一个文件礼马差。在templates/t3_bs3_blank/layouts礼马差。将样式添加到文件中礼马差。

T3布局系统

  1. // VARIABLES & MIXINS
  2. // ------------------
  3. @import "../vars.less"; // Modify this for custom colors, font-sizes, etc
  4. // ---------------------------------------------------------
  5. // MAGAZINE LAYOUT
  6. // ---------------------------------------------------------
  7. // Clearfix
  8. // ----------------------------
  9. .magazine-item,
  10. .magazine-featured-leading,
  11. .magazine-featured-intro,
  12. .magazine-category {
  13. .clearfix();
  14. }
  15. //
  16. // Generic Magazine Elements
  17. // --------------------------------------------------------
  18. // Page Sub Header
  19. // ----------------------------
  20. .magazine .page-subheader {
  21. h2 {
  22. font-size: @font-size-h1;
  23. }
  24. }

接下来打开PHP的布局文件(templates/t3_bs3_blank/tpls/)你想负荷较少的文件创建礼马差。

T3布局系统

使用格式

  1. <?php $this->addCss("path-to-.less-file") ?>

例子:

  1. <?php $this->addCss("layouts/magazine") ?>

布局定制的代码格式

在特定的布局中加载一个块layout/tpls

  1. <?php $this->loadBlock ("blockname") ?>

加载一个聚光灯

  1. <?php if ($this->checkSpotlight("spotlight-1", "position-1, position-2, position-3, position-4")) : ?>
  2. <!-- SPOTLIGHT 1 -->
  3. <div class="container t3-sl t3-sl-1">
  4. <?php $this->spotlight("spotlight-1", "position-1, position-2, position-3, position-4") ?>
  5. </div>
  6. <!-- //SPOTLIGHT 1 -->
  7. <?php endif ?>

向块中添加新的位置

  1. <jdoc:include type="modules" name="<?php $this->_p("your_module_position_name") ?>" />

改变块中的位置大小

您可以调整特定布局中的任何块兼泉铁,也可以在响应布局中设置块大小礼马差。

在这个教程中兼泉铁,我们将调整主体块礼马差。主体有3块:主要内容兼泉铁,1栏2栏礼马差。每个块的大小:侧边栏1跨3软寄驰、主要内容6跨兼泉铁,2跨3栏礼马差。

T3布局系统

如何步骤:

定义在布局中调整大小的块

所有的块文件位于templates/t3_bs3_blank/tpls/blocks/礼马差。打开要改变大小的块礼马差。在这个例子中兼泉铁,我们将打开文件mainbody.htmp礼马差。

  1. // positions configuration
  2. $sidebar1 = "sidebar-1";
  3. $sidebar2 = "sidebar-2";
  4. $sidebar1 = $this->countModules($sidebar1) ? $sidebar1 : false;
  5. $sidebar2 = $this->countModules($sidebar2) ? $sidebar2 : false;
  6. // detect layout
  7. if ($sidebar1 && $sidebar2) {
  8. $this->loadBlock("mainbody/two-sidebar", array("sidebar1" => $sidebar1, "sidebar2" =>$sidebar2));
  9. } elseif ($sidebar1) {
  10. $this->loadBlock("mainbody/one-sidebar-left", array("sidebar" => $sidebar1));
  11. } elseif ($sidebar2) {
  12. $this->loadBlock("mainbody/one-sidebar-right", array("sidebar" => $sidebar2));
  13. } else {
  14. $this->loadBlock("mainbody/no-sidebar");
  15. }

主体块负荷两栏或左或右一个边栏或基于侧边栏位置是否活跃或不是侧边块礼马差。所以现在要调整块的主体兼泉铁,我们需要调整主体块礼马差。

T3布局系统调整块

打开块文件并自定义每个位置的大小礼马差。

T3布局系统

  1. <!-- MAIN CONTENT -->
  2. <div id="t3-content" class="t3-content col-xs-12 col-md-8 col-md-push-2">
  3. <?php if($this->hasMessage()) : ?>
  4. <jdoc:include type="message" />
  5. <?php endif ?>
  6. <jdoc:include type="component" />
  7. </div>
  8. <!-- //MAIN CONTENT -->
  9. <!-- SIDEBAR 1 -->
  10. <div class="t3-sidebar t3-sidebar-1 col-xs-6 col-md-2 col-md-pull-8 <?php $this->_c($vars["sidebar1"]) ?>">
  11. <jdoc:include type="modules" name="<?php $this->_p($vars["sidebar1"]) ?>" style="T3Xhtml" />
  12. </div>
  13. <!-- //SIDEBAR 1 -->
  14. <!-- SIDEBAR 2 -->
  15. <div class="t3-sidebar t3-sidebar-2 col-xs-6 col-md-2 <?php $this->_c($vars["sidebar2"]) ?>">
  16. <jdoc:include type="modules" name="<?php $this->_p($vars["sidebar2"]) ?>" style="T3Xhtml" />
  17. </div>
  18. <!-- //SIDEBAR 2 -->

T3布局系统

说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

joomlass-logo31.png

Search