Joomla - T3模板（非常好用的4屏響應式模板）

一、下載 T3 模板

 下載地址（需要注冊登錄才能下載）：https://www.joomlart.com/member/downloads/joomlart/t3-framework/t3-blank

下載完得到兩個壓縮包

 

二、安裝 T3 模板

 進入后台，點擊頂欄菜單 擴展管理->擴展安裝->把壓縮包拉到框內安裝：

安裝成功：

進入模板管理可查看已安裝的模板

三、設置 T3 模板為默認模板

來到模板風格管理，設置T3為默認模板

 

 

四、T3 模板多屏響應設置

 進入模板

來到最好玩的布局設置（因為安裝了漢化包，所以后台顯示為中文，可自行上網搜索T3漢化包下載），T3模板的布局設置自由度非常高，可自由設置模塊顯示的位置，所有模塊都可以設置在哪種屏幕（大、中、小、手機屏幕等4種）顯示，各模塊占位多少也可以自由設置，以下圖為例子，mainmenu主要用來放置頂欄主菜單、full-1是一種自定義的模塊，模塊寬度為網頁寬度，可放置全屏輪播之類的模塊等

響應式布局設置可以根據網站需求，分別設置每個模塊在4種屏幕中占位多少或是否顯示

大屏（1200px以上）

中屏（992px - 1200px）

小屏（768px - 992px ）

特小屏（768px 以下 ）

在模塊位置中，點擊“齒輪”按鈕，可選擇這此模塊位置顯示哪個種類的模塊

在響應式布局設置中，點擊“眼睛”按鈕，可以設置此模塊位置在當前屏幕是否顯示

 

五、T3 模板超級菜單設置

進入超級菜單

 

點擊菜單項可設置是否顯示子菜單、子菜單項是否分組、位置移動、菜單項圖標等

點擊菜單外框可設置添加行、折疊時是否顯示、子菜單的寬度、對其方式等

點擊子菜單外框可添加或刪除列、是否折疊時不顯示、列的寬度、引入模塊、是否選項卡樣式等

點擊子菜單內框可設置是否再嵌套子菜單、子菜單項是否分組、排序、圖標、說明等

 

六、T3 模板自定義代碼設置

 T3模塊的自定義代碼功能可以設置在頁面引用的文件、如js、css等類庫或者額外添加的樣式等，以下例子可把css都合並成一個以減少請求量，還有一點需要注意，在T3自定義代碼中引入的文件都是全局所有頁面生效的，所以必須做好命名空間，免得污染全局

另外如果引入類似JQ等有$函數的，最好用以下方法做個命名空間，以確保jQuery不與其他類庫或變量有沖突，這樣就不用把每個$都改成jQuery了

代碼如下：

(function($){
    // do something
})(jQuery);

 

七、T3 模板菜單分配

在菜單分配中，可選擇當前模板樣式在哪些菜單項使用，選中的菜單項在網站前段將應用此樣式顯示

 

 

八、T3 模板基礎設置

簡單介紹下模板基礎設置

 

九、T3 模板主題設置

 

十、T3 模板附加設置

 

十一、T3 自定義模塊

 T3 模板在使用了一段時間后覺得各方面都做得不錯，但如果還是有模塊位置不夠或者模塊類型沒達到自己要的的問題，下面記錄一下擴充多個模塊位置和新建一些自定義的模塊類型

22各種復制

1、網站目錄： {root}\templates\t3_bs3_blank\tpls 中找到 default.php；

2、把 default.php 復制一份並重命名（自己隨意命名，例子中命名為 newsite-content-1.php）；

3、網站目錄： {root}\templates\t3_bs3_blank\tpls\blocks 中找到 spotlight-1，復制多份並分別重命名為spotlight-2、spotlight-3、spotlight-4、spotlight-5...；

 

以下分別為spotlight-1、spotlight-2、spotlight-3、spotlight-4、spotlight-5的圖片與關鍵代碼：

spotlight-1圖片：

spotlight-1關鍵代碼：

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

spotlight-2圖片：

spotlight-2關鍵代碼：

<?php if ($this->checkSpotlight('spotlight-2', 'position-7, position-8, position-9, position-10, position-11, position-12')) : ?>
    <!-- SPOTLIGHT 2 -->
    <div class="container t3-sl t3-sl-2">
        <?php $this->spotlight('spotlight-2', 'position-7, position-8, position-9, position-10, position-11, position-12') ?>
    </div>
    <!-- SPOTLIGHT 2 -->
<?php endif ?>

 

spotlight-3圖片：

spotlight-3關鍵代碼：

<?php if ($this->checkSpotlight('spotlight-3', 'position-13, position-14, position-15, position-16, position-17, position-18')) : ?>
    <!-- SPOTLIGHT 3 -->
    <div class="container t3-sl t3-sl-3">
        <?php $this->spotlight('spotlight-3', 'position-13, position-14, position-15, position-16, position-17, position-18') ?>
    </div>
    <!-- SPOTLIGHT 3 -->
<?php endif ?>

spotlight-4圖片：

spotlight-4關鍵代碼：

<?php if ($this->checkSpotlight('spotlight-4', 'position-19, position-20, position-21, position-22, position-23, position-24')) : ?>
    <!-- SPOTLIGHT 4 -->
    <div class="container t3-sl t3-sl-4">
        <?php $this->spotlight('spotlight-4', 'position-19, position-20, position-21, position-22, position-23, position-24') ?>
    </div>
    <!-- SPOTLIGHT 4 -->
<?php endif ?>

spotlight-5圖片：

spotlight-5關鍵代碼：

<?php if ($this->checkSpotlight('spotlight-5', 'position-25, position-26, position-27, position-28, position-29, position-30')) : ?>
    <!-- SPOTLIGHT 5 -->
    <div class="container t3-sl t3-sl-5">
        <?php $this->spotlight('spotlight-5', 'position-25, position-26, position-27, position-28, position-29, position-30') ?>
    </div>
    <!-- SPOTLIGHT 5 -->
<?php endif ?>

擴充到position-30，一下子多了二十多個位置，應該很夠用了^_^

下面自定義一個模塊布局，這里仿照 spotlight 做一個滿寬度的模塊位置：

與上面擴展多個 spotlight 一樣，進入網站目錄： {root}\templates\t3_bs3_blank\tpls\blocks 中找到 spotlight-1，復制並重命名為 full-block-1.php

full-block-1.php圖片：

full-block-1.php關鍵代碼：

<?php if ($this->checkSpotlight('full-block-1', 'full-1, full-2, full-3, full-4, full-5, full-6')) : ?>
    <!-- FullBlock 1 -->
    <div class="container-fiuled"><?php $this->spotlight('full-block-1', 'full-1, full-2, full-3, full-4, full-5, full-6') ?></div>
    <!-- FullBlock 1 -->
<?php endif ?>

注意class由"container t3-sl t3-sl-1"改成了"container-fiuled"，再在全局css添加一個關於container-fiuled的樣式即可，例如：

.container-fiuled {
  width: 100%;
  /*border:10px solid red;*/
}
.container-fiuled .t3-full-block-1,
.container-fiuled .t3-full-block-2,
.container-fiuled .t3-full-block-3,
.container-fiuled .t3-full-block-4,
.container-fiuled .t3-full-block-5,
.container-fiuled .t3-full-block-6 {
  width: 100%;
  /*border:10px solid yellow;*/
}

 

然后修改一下剛才復制 default.php 並重命名成 newsite-content-1.php 的內容：

再進入后台選擇使用新的布局，然后保存即可

 

 

十二、參考資料

https://ninghao.net 搜索 T3 相關的文章或視頻

https://ninghao.net/video/944 到 https://ninghao.net/video/958