線上書籍

Home

[1031]XOOPS佈景設計

一、 所謂可控制佈景
  1. 可控制佈景意指站長可以透過佈景管理模組(tad_themes)從後台針對佈景做客製化的調整。目前並非所有佈景都支援,而是要有套用tadtools/themes_tpl/ get_var.html才算數。
  2. 此外,tadtools/themes_tpl目錄下提供非常多現成樣板供佈景使用。除了get_var.html以外,其餘的皆非必須,當然直接套用可省下不少功夫。
  3. get_var.html用來載入佈景變數,所以,一切都從這一行開始: <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/get_var.html"}>
二、 加入theme.ini
  1. 基本上,這個檔只是簡單的佈景基本資料而已,僅tad_adm(站長工具箱)會根據該檔案中的版本來判別佈景是否需更新。在佈景上,是完全用不著的。
  2. 其中screenshot.png是該佈景預覽圖(寬約450px),推測是用在官網的佈景顯示;而shot.gif則是佈景預覽縮圖(寬約150px),會用在佈景區塊上。
  3. Firefox可安裝此附加元件來擷取螢幕: https://addons.mozilla.org/zh-TW/firefox/addon/abduction/?src=search
三、 加入最重要的config.php
  1. config.php用來設定佈景預設值,初次設定此佈景時會將該黨內容寫入資料庫。此外,若使用者沒有安裝tad_themes模組,也可以利用它來改變佈景的設定值。
  2. $theme_change=1; 設定佈景種類是否可自訂,若值為1,表示可同時支援bootstrap以及固定寬度的HTML模式。以theme2014來講,應該是0,不給改。
  3. $theme_kind='bootstrap'; 則是設定預設的佈景種類,其值為bootstrap或html。以theme2014來講,應該是html(因為是固定寬度)。
  4. $config_tabs[1]=1; []中的編號為頁籤編號(目前為1~6),值為0或1,1表示要在tad_themes後台的佈景設定使用該頁籤功能。
  5. 頁籤底下有各種設定項目,[]中為設定項目名稱,值以陣列方式呈現,如:
  6. $config_enable['theme_type']=array('enable'=>1, 'min'=>'' , 'max'=>'' , 'require'=>0 , 'default'=>'theme_type_2');
    • (1)  enable代表是否使用此設定項,值為1或0,1代表使用之,0代表不使用。
    • (2)  min表示其設定值的最小值,可不填。
    • (3)  max表示其設定值的最大值,可不填。
    • (4)  require表示是否為必填欄位,值為1或0,1代表必填。
    • (5)  default為該欄位預設值,透過這欄位,可以先設定好最理想的佈景設定值。
四、 切換版面布局
  1. TadTools中有提供切換版面布局的樣板檔,可直接套用最簡單 <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/$theme_type.html"}>
  2. 由於html模式並不是靠bootstrap去排版,而是用傳統CSS方式(如此才能自訂左右區塊寬度),所以,原先的「class="container-fluid"」需移除。
  3. 若希望高度可以自動調整,可直接引入(貼在</body>之前即可): <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/my_js.html"}>
  4. 另外,要注意的是,預設好的HTML版型布局就是單純做好布局而已,並不會有所謂的欄間距,需要欄間距需自行處理。例如 div.leftBlock , div.rightBlock{ padding: 0px 8px; }
五、 觀看佈景變數
  1. get_var.html用來載入佈景變數,show_var.html則可讓您觀察所有佈景變數的名稱及其設定值(一般將該行置於</body>之前即可) <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/show_var.html"}>
  2. 佈景開發期間,可引入此檔。開發完成後,可利用額外設定來控制是否顯示佈景變數。
六、 套用佈景變數
  1. 不允許修改的部份,請在config.php中,將enable設為0。
  2. 凡是允許修改的,佈景中,就必須想辦法去套用該變數(否則設它幹嘛?)
  3. 一般而言,自訂的樣式請放在最後面(即</head>前) <style> body{ font-size: <{$font_size}>; } </style>
  4. 另外可直接引入theme_css.html,如此會自動設定頁面的CSS(背景、文字、連結...等)並自動引入theme_css_blocks.html(區塊標題樣式設定)及theme_css_navbar.html(導覽列樣式設定) <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/theme_css.html"}>
  5. 也可以不引入theme_css.html,單獨引入theme_css_blocks.html(區塊標題樣式設定)或theme_css_navbar.html(導覽列樣式設定)
七、 config.php中的設定項
  1. 需自行在樣板中套用該變數的有:theme_type, theme_width, margin_top, margin_bottom。
  2. 若引入theme_css.html(佈景自訂CSS設定,會自動載入以下兩個檔,非必須)會自行套用的變數有:font_size, font_color, link_color, hover_color, bg_img, bg_color, bg_repeat, bg_attachment, bg_position。
    • (1)  若引入theme_css_blocks.html(區塊標題CSS設定)會自行套用的變數有:bt_text_size, bt_text_padding, bt_text, bt_bg_color, bt_radius, block_config, bt_bg_img, bt_bg_repeat。
    • (2)  若引入theme_css_navbar.html(導覽列CSS設定)會自行套用的變數有:navbar_bg_top, navbar_bg_bottom, navbar_hover, navbar_color, navbar_color_hover。
  3. 若引入theme_type_x.html(八種版型)就會自行套用的變數有:base_color, lb_color, cb_color, rb_color, lb_width, rb_width。
  4. 若引入slideshow_responsive.html(滑動圖文)會自行套用的變數有:slide_width, slide_height。
  5. 若引入logo.html(logo圖)會自行套用的變數有:logo_img, logo_position, logo_top, logo_right, logo_bottom, logo_left。
  6. 若引入navbar.html(導覽列)會自行套用的變數有:navbar_img, navbar_icon, navlogo_img。
  7. 目前暫無作用的變數(預留):clb_width, crb_width。
八、 logo部份
  1. logo部份可直接自己寫樣板檔,例如: <a href="<{xoAppUrl}>"><img src="<{$logo_img}>"></a>
  2. 亦可直接套用現成的logo.html(有支援Flash及logo位置) <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/logo.html"}>
九、 額外設定
  1. 額外設定可以彌補現有架構欄位之不足,提供佈景開發者一個簡易的新增欄位途徑: $i=0; //這是第一組,第二組請改為 $i++; $theme_config[$i]['name']="show_var"; $theme_config[$i]['text']= "顯示佈景變數資訊"; $theme_config[$i]['desc']="是否顯示所有 tad_themes 提供的控制變數及設定值"; $theme_config[$i]['type']="yesno"; $theme_config[$i]['default']="0";
  2. type有text(文字框)、color(挑顏色)、textarea(大量文字)、yesno(是否單選)、file(上傳框)等類型。