:::

9. XOOPS佈景運作原理

一、 XOOPS的畫面組成

  佈景樣板 模組樣板
位置 放在themes/佈景名稱/ 就是一套佈景 隨著模組而來,一般在 modules/模組名稱/templates/ 下
用途 負責整個網站的大外觀 負責模組頁面的布局以及該模組的區塊布局。
設定都在「偏好設定→系統設定→一般設定」裡頭
套用 預設佈景 用佈景區塊來切換 預設樣板群組
作用範圍 適用於所有人員,包括訪客 只適用於登入會員,登出即失效 模組樣板 區塊樣板
用途 網站的主要佈景 測試用 模組版面布局 區塊版面布局
資料來源 「預設佈景」(「使用者可選擇的佈景」中務必包含「預設佈景」) 「使用者可選擇的佈景」 /modules/模組名稱/templates/ 下的樣板檔 /modules/模組名稱/templates/blocks/ 下的樣板檔

二、 樣板修改方式

  佈景樣板 模組樣板
修改方式 直接修改themes/佈景名稱/ 中的樣板檔 透過tad_themes的後台來修改 修改 modules/模組名稱/templates/ 下的樣板檔
修改themes/佈景名稱/modules下的樣板檔
優點 直接、有效 可以透過tad_themes的後台來修改佈景,簡單設定、上傳即可 很直接 優先權高,可以保留模組自有樣板,日後更新模組不怕被覆蓋
缺點 難度高、日後更新可能就失效。 佈景有限且部份想改的地方可能並不提供修改 日後更新困難,卻容易遺失自己修改的樣板(因為會被更新覆蓋) 長時間下來,可能會有會和模組架構漸行漸遠
備註 早期(或官方版)均屬於這種改法 需搭配可調式佈景及tad_themes模組 不建議 從後台「樣板」產生該模組樣板,可從線上修改。

三、 Tad Themes 佈景管理及Tad Tools工具箱的關係

  1. 可調式佈景通常需要搭配tad_themes模組一起使用,但也可以獨立運作。因為設計者會把可以設定的部份寫到config.php(預設的設定)及config2.php(該佈景的自訂設定)裡面,若是沒有安裝tad_themes,則直接讀取設定檔中的預設值,來呈現佈景應有的樣子。
  2. 若是有安裝tad_themes,那麼第一次執行時,tad_themes會讀取config.php及config2.php裡面的設定,並將設定存至資料庫,以便站長隨時透過tad_themes提供的界面來修改設定值。
  3. 佈景設定值的讀取則是由tadtools來負責(因為該模組在每個頁面都會用到),然後再傳送各種自訂的設定值給佈景,此時,config.php及config2.php便無用途。

四、 Tad Tools工具箱的角色

  1. 由於XOOPS 2.5.x系列預設均不支援bootstrap3(2.6才內建,以下簡稱bs3),因此,若是模組或佈景需要用到bs3,都需要自行載入,如此,不但容易版本相衝,更造成許多不便。
  2. 為解決此問題,直接在佈景統一引用bs3是目前唯一比較簡單的方式。但需要有個機制,讓不支援bs3的佈景也可以導入bs3(以便讓模組使用),讓已經支援bs3的佈景無須再引入,以避免衝突。
  3. 因此,在Tadtools後台的初始設定,就是在做此事。Tadtools會先將「使用者可選擇的佈景」設定讀出,並自動判斷是否有內建bs3,日後,tadtools便能依據此設定來決定是否要載入bs3。
  4. 此外,tadtools中的themes_common放置佈景會用到的一些共同樣板檔,例如一些佈景變數取得的工具頁面。themes3_tpl中則是BootStrap3的一些可直接套用的預設樣板檔,例如版面布局檔、滑動圖文、導覽列...等,可加速佈景開發製作。

五、 config.php與config2.php的角色

檔案 config.php(必要) config2.php(非必要)
用途 是可調式佈景的各種預設值,讓沒有安裝tad_themes的網站也可以使用此佈景 讓佈景開發者可以對此佈景新增各種設定(若該設定不存在於config.php中的話)
設定選項 不可異動,僅能修改設定值或關閉設定項目 可以自行增減項目
設定界面 tad_themes後台的「佈景管理」中的頁籤 tad_themes後台中的「額外設定」

六、 Smarty的角色

  1. XOOPS網站的內容放在資料庫中,需由PHP讀出,並產生畫面。但畫面由HTML所製作,因此,需利用Smarty這個佈景引擎來將PHP輸出的變數,透過樣板的Smarty標籤填入HTML的樣板中。
  2. 由於這個過程需要編譯,為了加快速度,就會有所謂的樣板快取產生。此快取放置於xoops_data/cache底下,XOOPS的原則是,先讀快取,若沒有快取,則產生之。
  3. 後台「偏好設定→系統設定→一般設定」裡頭「自動編譯您修改的樣板檔?」選「是」就是告訴XOOPS不要先讀快取,而是直接讀樣板檔,如此,將能得到最正確的結果,但有可能會影響到主機效能(雖然不易察覺),待佈景或模組穩定後,再設成「否」即可。

七、 Smarty迴圈

$footer_blocks[0]['title'] = "會員選單";
$footer_blocks[0]['bid'] = "1";
$footer_blocks[1]['title'] = "線上使用者";
$footer_blocks[1]['bid'] = "7";


 

<{foreach from=$footer_blocks key=k item=fb}>
  <h3><{$fb.title}></h3>
  <{block id=$fb.bid}>
<{/foreaach}>
  1. 第一圈,會讀出$footer_blocks[0]的底下兩個元素,此時,$k=0,$fb是title及bid兩個元素的陣列。要取得其值,用$fb.title及$fb.bid即可。
  2. 若是foreach有設定name,例如:name=fbk,則:
    • (1) <{$smarty.foreach.fbk.first}> 代表此迴圈跑第一圈時,
    • (2) <{$smarty.foreach.fbk.last}> 代表此迴圈跑最後一圈
    • (3) <{$smarty.foreach.fbk.index}> 取得迴圈的索引值,依序輸出0、1
    • (4) <{$smarty.foreach.fbk.iteration}> 取得迴圈的計數值,依序輸出1、2
    • (5) <{$smarty.foreach.fbk.total}> 取得此迴圈執行總數,會得到2

八、 破解eElectronics這個佈景

  1. 這是上課用的範例,但不幸的是,這是一個超複雜的範例,徒增許多教學上的困擾,但換個角度想,這也是一個不錯的學習機會,只是比較沒有時間慢慢研究其中奧秘。底下簡單提出一些小提示。
  2. 如果是單欄式佈景,製作難度肯定高,您有兩種處理方式:
    • (1) 功力不夠的話,請大膽捨棄您看不懂的部份,留下頭尾,其餘部份直接套用tadtools中的預設樣板即可(即「加入內容及頁尾.TXT」那些內容)。
    • (2) 如果功力夠的話,首頁保持單欄式,內頁才套用預設樣板。首頁單欄式的內容一樣分兩種處理:
      • (a)  功力超強:直接讀取XOOPS中間區域個部份區塊,並手動製作樣板來呈現之(請直接參考釋出的eElectronics佈景theme.tpl)。優點是使用者設定簡單,缺點是製作困難、使用者套用時比較難預期效果如何。
      • (b)  功力尚可:直接用config2.php新增設定欄位,將將該欄位值套用到單欄式的內容中。優點是較容易控制,製作上也不算太難,缺點是使用者設定較為麻煩,且XOOPS內建的中間區域將無作用。
  3. eElectronics的特色是有綠色(.promo-area)和白色(.maincontent-area)間隔跳色(可利用Smarty的cycle語法達成),且用CSS技巧產生類似平行四邊形(.zigzag-bottom)的版面,簡單講若是把.zigzag-bottom拿掉,將只看到綠、白的水平間隔,而不會有斜線版面產生。
    • (1) 想像一下,綠、白、綠、白的版面,在其交界處貼上一個平行四邊形的色塊,此平行四邊形的顏色會和下方版面顏色一致。
    • (2) .zigzag-bottom只負責產生形狀(且浮起來z-index為9),不內建顏色,顏色是情況來產生:
      • (a)  .promo-area  .zigzag-bottom 顏色設定成白色(因為下方是白色的.maincontent-area)
      • (b)  .maincontent-area  .zigzag-bottom 顏色設定成綠色(因為下方是綠色的.promo-area)

:::

書籍目錄

展開 | 闔起

線上使用者

45人線上 (10人在瀏覽線上書籍)

會員: 0

訪客: 45

更多…