介紹T3框架布局

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

布局配置

在布局部分，將有2個(gè)部分進(jìn)行配置：布局結(jié)構(gòu)和布局配置。

在哪里保存布局設(shè)置？

當(dāng)你配置布局，設(shè)置將被保存到INI文件，該文件位于模板templates/t3_bs3_blank/etc/layout/

當(dāng)我改變默認(rèn)的布局設(shè)置，該設(shè)置將被保存到default.ini文件。

設(shè)置保存在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"

當(dāng)你刪除INI文件，你的布局文件將被設(shè)置為默認(rèn)值（在你采取任何改變?cè)瓉淼牟季郑?/p>

創(chuàng)建新布局

有2種方法來創(chuàng)建新的布局。

保存副本

從后端配置布局時(shí)，可以復(fù)制任何布局。

拷貝的布局文件將存儲(chǔ)在templates/t3_bs3_blank/tpls/

添加新的布局文件

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

創(chuàng)建新的布局，你要拷貝一個(gè)布局文件是最簡潔明了的創(chuàng)建。

定義布局中的塊

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

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

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

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

創(chuàng)建新的塊 創(chuàng)建新的塊，拷貝新的塊文件：templates/t3_bs3_blank/tpls/blocks

分配模塊位置

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

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：定義新創(chuàng)建的模塊位置

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

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

加載特定的樣式表

你能為一個(gè)布局樣式表加載，這樣做，創(chuàng)建一個(gè)文件。在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/）你想負(fù)荷較少的文件創(chuàng)建。

使用格式

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

例子:

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

布局定制的代碼格式

在特定的布局中加載一個(gè)塊layout/tpls

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

加載一個(gè)聚光燈

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') ?>" />

改變塊中的位置大小

您可以調(diào)整特定布局中的任何塊，也可以在響應(yīng)布局中設(shè)置塊大小。

在這個(gè)教程中，我們將調(diào)整主體塊。主體有3塊：主要內(nèi)容，1欄2欄。每個(gè)塊的大小：側(cè)邊欄1跨3、主要內(nèi)容6跨，2跨3欄。

如何步驟：

定義在布局中調(diào)整大小的塊

所有的塊文件位于templates/t3_bs3_blank/tpls/blocks/。打開要改變大小的塊。在這個(gè)例子中，我們將打開文件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. }

主體塊負(fù)荷兩欄或左或右一個(gè)邊欄或基于側(cè)邊欄位置是否活躍或不是側(cè)邊塊。所以現(xiàn)在要調(diào)整塊的主體，我們需要調(diào)整主體塊。

調(diào)整塊

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

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 -->