選單
GSS 技術部落格
在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗,希望大家不管是喜歡或是有意見,都可以回饋給我們,讓我們有機會和大家對話並一起成長!
若有任何問題請來信:gss_crm@gss.com.tw
3 分鐘閱讀時間 (652 個字)

Joomla! 官網的CMS,模版基礎開發知識

mockuuups-cropped-view-of-macbook-pro-mockup-on-wooden-table

 Joomla原生的template有相當高的彈性,概念上基本上是自己設計積木,自己規劃積木的顏色,在一個房間外,隨意往外堆疊出整棟大樓。

這是一個基本的模版資料夾內含的檔案結構,
其中最重要的當屬index.php
一切的版面邏輯都在這個檔案中被規劃出來。 

templateDetails.xml則用來定義此模版的名稱、位置、安裝內容等。

而error.php則是當網頁出現任何錯誤404、500等狀況時使用的頁面。

html資料夾則是包含了各種元件、模組複寫的樣板與module.php跟message.php

首先我們解釋幾個一般網頁設計中我們都會知道的基本html結構 head中會有各種要引入的js與css
在joomla的index.php中,我們會在最前面的php區段中引入要用的js與css
而這些有幾種寫法,新舊寫法都支援

 寫法1

<?php
JHtml::_('script', 'global.js', array('version' => 'auto', 'relative' => true));
//引入js且自動產生版本號,路徑為相對於這個目錄並且自動選擇於js資料夾中
JHtml::_('script', 'html5shiv.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));
//同上但是加入了IE版本判斷
JHtml::_('stylesheet', 'basic.css', array('version' => 'auto', 'relative' => true));
//讀取需要的CSS
JHtml::_('script', 'https://use.fontawesome.com/6590db7d3b.js', array('relative' => false));
//載入外部CDN連結
JHtml::_('bootstrap.framework');
//載入bootsrap
?> 

進一步其他可以讀取的js framework,可以從以下網址看到 https://docs.joomla.org/J3.x:Javascript_Frameworks

 寫法2

<?php
$doc->addScript('templates/' .$this->template. '/js/global.js');
$doc->addStyleSheet('templates/'.$this->template.'/css/basic.css');
?> 

也要記得先定義

<?php
$doc = JFactory::getDocument();
?> 

才能開始使用

 頁面相關變數

<?php
$app = JFactory::getApplication(); 
//透過變數簡寫 讓後續可以直接用$app取得 getApplication的參數
$doc = JFactory::getDocument(); 
//透過變數簡寫 讓後續可以直接用$app取得 getDocument的參數
$user = JFactory::getUser(); 
//透過變數簡寫 讓後續可以直接用$app取得 getUser使用者資料的參數
$tplparams = JFactory::getApplication()->getTemplate(true)->params; 
//取得當前模版的參數
$itemid = JRequest::getVar('Itemid'); //
$menu = JFactory::getApplication()->getMenu(); 
//先從app中取得選單
$active = $menu->getItem($itemid); 
//拿到當前頁面是選單中的哪個,並印出這個選單的id
$params = $menu->getParams( $active->id ); 
//拿到這個選單的選單設定參數
$pageclass = $params->get( 'pageclass_sfx' );  
//從上面參數中取得頁面自定義classname
$anchor_title = htmlspecialchars($params->get('menu-anchor_title', ''), ENT_COMPAT, 'UTF-8', false); 
//取得選單變數中的anchor_title
$page_title = htmlspecialchars($params->get('page_heading', ''), ENT_COMPAT, 'UTF-8', false);

$itemid   = $app->input->getCmd('Itemid', '');
$sitename = $app->get('sitename'); 
//取得網站名稱
?> 

 Position

index模版中最重要的就屬position的概念,position可以無限制的加入版面中,透過判段式你可以決定一些自訂變數或哪些結構要不要呈現。

安排好位置後,一定要在teamplateDetails.xml定義position的列表


<?php if ($this->countModules('位置')) : ?>
//定義是否此模組有被用到
                <jdoc:include type="modules" name="位置" style="no" />
                //style="no" no為此位置的模組共有的輸出結構,定義於html/module.php
<?php endif; ?> 

 Component

整個模版中,這段是用來輸出展現元件應用程式的片段 等於圍繞於這個範圍的外圍都是模組位置,而這個元件是在核心的一個位置。

<jdoc:include type="component" /> 

 在其他元件調用Module

有時候你需要在元件也就是非模版資料夾的檔案外安排自定義的模組位置 這時候你可以用這個方式來定義新的位置,也由於你的位置沒定義在模版中,就直接在新增模組時 輸入這個自創的位置名稱就好了。

<?php

$doc       = JFactory::getDocument();
$renderer  = $doc->loadRenderer( 'modules' );
//先定義基本需要的環境變數
$position  = '位置名稱'; 
//定義位置名稱
$options   = array('style' => '位置樣式');
//定義位置引用的模組樣式
echo $renderer->render($position, $options, null); 
?>
 

 Module Position中的Style是什麼?

我們知道Position是一個位置,可以至入很多個module,而module有一些joomla層定義給每個模組可用的參數,例如:你可以定義模組標題是否顯示,模組是否有特殊樣式名,這些參數就可以抽取出來放到每個模組的外型中。
首先你可以在你的模版資料夾中找到html資料夾,其中有一個modules.php 每一個module style都是以這個方式作定義


<?php
function modChrome_樣式名($module, &$params, &$attribs){
   if ($module->content){
   //先判斷是否module主資料有東西,有才開始輸出
    echo "<div class=\"mod_" . htmlspecialchars($params->get('moduleclass_sfx')) . "\">";  //這段就可以看到我讀取了moduleclass_sfx這個後台可用的自定義參數
      if ($module->showtitle){
      //判斷模組有沒有要輸出標題
        echo "<h2 class=\"module-title\">" . $module->title . "</h2>";
      }
      echo $module->content;
      //模組核心位置的內容輸出
      echo "</div>";
   }
}
?> 

 模版中的元件或模組樣板rewrite

joomla的架構一直是MVC的方式來規劃,而View是定義給選單來調用也就是每個component中的view中的子資料夾就是不同的選單類型的頁面,這些資料夾都有除了版型外的view.html.php用來定義一些預先要準備好view的參數,而主要的樣板展現就在tmpl中的defalut.php等其他檔案。

joomla允許你在自己的模版中複寫這些元件或模組的版型,也就是說你繼續更新這些元件或模組,只要裡面用到的變數沒太大的異動,都可以保持你自己寫的這些複寫一直可以運作,而又不會動到這些原本開發者的檔案。

那要怎樣把這些view層的樣板抽到你的模版中改寫呢?
以users component的註冊頁為例 /com_users/views/registration/tmpl/default.php 當他被至入到你的模版中重寫時
應該路徑要是 /templates/你的模版/html/com_users/registration/default.php

但是在模組中的重寫又較為不同的是,模組多半允許在設定模組時使用不同樣板, 且這些樣板還可以跨版型被使用,
也就是你現在雖然是用A模版,但是B模版提供的某模組樣板是可以被你調用的

以mod_login為例 /mod_login/tmpl/default.php 你可以到你的模版中這樣安置檔案 /templates/你的模版/html/mod_login/你的登入主版.php
但是請注意mod_login還有登出的頁面你就必須為登出命名為 
你的登入主版_logout.php
並放到一樣的資料夾中

每日小知識#3 - image 是什麼?
每日小知識#2 - Docker 是什麼?

相關文章

 

評論

尚無評論
已經注冊了? 這裡登入
Guest
2025/06/09, 週一

Captcha 圖像