介紹T3框架布局

T3默認支持多種布局。在每一個布局，這是與多個模塊建立（頁眉、主體、聚光燈…）。每個塊包含一個或多個模塊位置。可以將特定模塊位置分配給塊。

布局配置

在布局部分，將有2個部分進行配置：布局結構和布局配置。

在哪里保存布局設置？

當你配置布局，設置將被保存到INI文件，該文件位于模板templates/t3_bs3_blank/etc/layout/

當我改變默認的布局設置，該設置將被保存到default.ini文件。

設置保存在INI文件的格式：

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

當你刪除INI文件，你的布局文件將被設置為默認值（在你采取任何改變原來的布局）

創建新布局

有2種方法來創建新的布局。

保存副本

從后端配置布局時，可以復制任何布局。

拷貝的布局文件將存儲在templates/t3_bs3_blank/tpls/

添加新的布局文件

每個布局都有自己的文件。該文件位于：templates/t3_bs3_blank/tpls

創建新的布局，你要拷貝一個布局文件是最簡潔明了的創建。

定義布局中的塊

現在，打開拷貝文件并自定義。如果你想自定義模板設置面板，只需打開它，一旦你添加新的布局文件，它將被加載到布局列表中的模板設置面板。

打開此文件時，您會看到，有一些塊的布局包括。可以添加新塊或移除塊。

若要在布局中添加新塊，請使用下面的格式。

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

創建新的塊 創建新的塊，拷貝新的塊文件：templates/t3_bs3_blank/tpls/blocks

分配模塊位置

每個塊有一個分配給的模塊位置，您可以使用下面的代碼格式定義塊的分配模塊位置：

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

添加新的模塊位置

步驟1：添加模塊位置塊

打開要添加新模塊位置的塊文件

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

步驟2：定義新創建的模塊位置

完成后，需要在文件中定義新創建的模塊位置:TemplateDetail.xml

1. <positions>
2. <position>your_module_position_name</position>
3. </positions>

加載特定的樣式表

你能為一個布局樣式表加載，這樣做，創建一個文件。在templates/t3_bs3_blank/layouts。將樣式添加到文件中。

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

接下來打開PHP的布局文件（templates/t3_bs3_blank/tpls/）你想負荷較少的文件創建。

使用格式

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')) : ?>
3. <!-- SPOTLIGHT 1 -->
5. <div class="container t3-sl t3-sl-1">
7. <?php $this->spotlight('spotlight-1', 'position-1, position-2, position-3, position-4') ?>
9. </div>
11. <!-- //SPOTLIGHT 1 -->
13. <?php endif ?>

向塊中添加新的位置

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

改變塊中的位置大小

您可以調整特定布局中的任何塊，也可以在響應布局中設置塊大小。

在這個教程中，我們將調整主體塊。主體有3塊：主要內容，1欄2欄。每個塊的大小：側邊欄1跨3、主要內容6跨，2跨3欄。

如何步驟：

定義在布局中調整大小的塊

所有的塊文件位于templates/t3_bs3_blank/tpls/blocks/。打開要改變大小的塊。在這個例子中，我們將打開文件mainbody.php。

1. // positions configuration
3. $sidebar1 = 'sidebar-1';
5. $sidebar2 = 'sidebar-2';
9. $sidebar1 = $this->countModules($sidebar1) ? $sidebar1 : false;
11. $sidebar2 = $this->countModules($sidebar2) ? $sidebar2 : false;
15. // detect layout
17. if ($sidebar1 && $sidebar2) {
19. $this->loadBlock('mainbody/two-sidebar', array('sidebar1' => $sidebar1, 'sidebar2' => $sidebar2));
21. } elseif ($sidebar1) {
23. $this->loadBlock('mainbody/one-sidebar-left', array('sidebar' => $sidebar1));
25. } elseif ($sidebar2) {
27. $this->loadBlock('mainbody/one-sidebar-right', array('sidebar' => $sidebar2));
29. } else {
31. $this->loadBlock('mainbody/no-sidebar');
33. }

主體塊負荷兩欄或左或右一個邊欄或基于側邊欄位置是否活躍或不是側邊塊。所以現在要調整塊的主體，我們需要調整主體塊。

調整塊

打開塊文件并自定義每個位置的大小。

1. <!-- MAIN CONTENT -->
3. <div id="t3-content" class="t3-content col-xs-12 col-md-8 col-md-push-2">
5. <?php if($this->hasMessage()) : ?>
7. <jdoc:include type="message" />
9. <?php endif ?>
11. <jdoc:include type="component" />
13. </div>
15. <!-- //MAIN CONTENT -->
19. <!-- SIDEBAR 1 -->
21. <div class="t3-sidebar t3-sidebar-1 col-xs-6 col-md-2 col-md-pull-8 <?php $this->_c($vars['sidebar1']) ?>">
23. <jdoc:include type="modules" name="<?php $this->_p($vars['sidebar1']) ?>" style="T3Xhtml" />
25. </div>
27. <!-- //SIDEBAR 1 -->
31. <!-- SIDEBAR 2 -->
33. <div class="t3-sidebar t3-sidebar-2 col-xs-6 col-md-2 <?php $this->_c($vars['sidebar2']) ?>">
35. <jdoc:include type="modules" name="<?php $this->_p($vars['sidebar2']) ?>" style="T3Xhtml" />
37. </div>
39. <!-- //SIDEBAR 2 -->