線上書籍

Home

[1061] XOOPS佈景設計

一、 基本工作
  1. 將下載好的佈景解壓縮（上課範例 | 下載，另一個固定式範例 | 下載），移到themes/下，並將裡面的 index.html複製一份，並命名為theme.html或theme.tpl（XOOPS 2.5.8以後）
  2. 下載必要XOOPS佈景相關檔，並複製裡面的所有檔案及目錄到欲修改的佈景目錄中
  3. 幾個免費佈景網站：
    1. https://bootstrapmade.com/
    2. https://shapebootstrap.net/free-templates
    3. http://www.free-css.com/template-categories/responsive
    4. https://w3layouts.com/free-responsive-html5-css3-website-templates/
    5. https://freewebsitetemplates.com/
二、 編輯主頁面theme.html或 theme.tpl
  1. 若有頁內的CSS設定部份，請將之複製到css/style.css檔案中。
  2. 將一些沒有內建的js或css暫時移到別的地方，等會兒再處理。Bootstrap、Font Awesome、jquery可以不用移出，等會直接蓋掉即可，因為系統有內建了。
  3. 將theme.html中<body>前的語法都刪掉，並開啟「加入頁首.TXT」，將裡面的語法複製起來，貼到剛剛刪掉的地方。若是有style.css或Bootstrap、Font Awesome、jquery請刪除之，系統會自動載入。
  4. 將剛剛移出的js或css移回</head>之前，並在所有路徑前加上<{xoImgUrl}>，例如取代（Ctrl+H）所有的 「src="img」為「src="<{xoImgUrl}>img」，常見的還有「src="js」取代成「src="<{xoImgUrl}>js」、「src="css」取代成「src=""<{xoImgUrl}>css」、「href="imgaes」取代成「href=""<{xoImgUrl}>imgaes」...等。
  5. 將【佈景變數及必要的語法】加至</body>前，並刪除bootstrap.js及jquery.js的設定。
三、 套用新佈景
  1. 至後台「偏好設定→系統設定→一般設定」，將「使用者可選擇的佈景」加入新佈景
  2. 至區塊管理，啟用「網站佈景」區塊，並置於所有頁面，以便切換。
  3. 至前台，找到「網站佈景」區塊，點選新佈景套用之，並檢查運作有無異常。
四、 不使用預設樣板的作法
  1. 以logo為例，複製/modules/tadtools/themes3_tpl/logo.tpl到佈景的xotpl目錄下。
  2. 開啟該檔，並修改成自己想要的樣子。
  3. 在佈景中引入自己修改的檔案： <{includeq file="$theme_name/xotpl/logo.tpl"}>
五、 自製滑動圖文效果
  1. 到額外佈景將「顯示佈景變數資訊」設為「是」
  2. 將滑動圖文的網頁語法剪下，存到xotpl/slider.tpl，並於原本位置引入 <{includeq file="$theme_name/xotpl/slider.tpl"}>
  3. 找到滑動圖文 $slider_var，用亦是參考其變數名稱及觀察其對應值
  4. 解析HTML語法，找出每個slide對應的語法，並套用Smarty迴圈，以便自動產生，如： <{foreach from=$slider_var item=slide name=slider}> <li data-target="#slide-list" data-slide-to="<{$i}>" <{if $smarty.foreach.slider.first}>class="active"<{/if}>></li> <{assign var=i value=$i+1}> <{/foreach}>
  5. 若要套用描述文字，用： <{$slide.text_description}>
  6. 若要套用圖片，則用： <{$slide.file_url}>
六、 常用Smarty迴圈用法
  1. Smarty迴圈用來處理陣列，常用方法如下： <{foreach from=$來源變數 item=迴圈內變數名稱 name=迴圈別名}> <{$迴圈內變數名稱.索引}> <{/foreach}>
  2. <{$smarty.foreach.迴圈別名.first}> 迴圈第一圈
  3. <{$smarty.foreach.迴圈別名.last}> 迴圈最後一圈
  4. <{$smarty.foreach.迴圈別名.iteration}> 取得迴圈的計數值，依序輸出1、2、3......
  5. <{$smarty.foreach.迴圈別名.total}> 取得迴圈執行總數
七、 用SmartMenu製作導覽列
  1. 官網：https://www.smartmenus.org/
  2. 範例頁面：http://vadikom.github.io/smartmenus/src/demo/
  3. tadtools中亦有內建，在smartmenus目錄中，底下範例為套用sm-blue佈景 <link rel="stylesheet" href="<{$xoops_url}>/modules/tadtools/smartmenus/css/sm-core-css.css"> <link rel="stylesheet" href="<{$xoops_url}>/modules/tadtools/smartmenus/css/sm-blue.css"> <link rel="stylesheet" href="<{$xoops_url}>/modules/tadtools/smartmenus/css/sm-responsive.css"> <script src="<{$xoops_url}>/modules/tadtools/smartmenus/jquery.smartmenus.js"></script> <script src="<{$xoops_url}>/modules/tadtools/smartmenus/sm-responsive.js"></script> <script type="text/javascript"> $(function() { $('#main-menu').smartmenus({ mainMenuSubOffsetX: -1, mainMenuSubOffsetY: 4, subMenusSubOffsetX: 6, subMenusSubOffsetY: -6 }); }); </script>
  4. 在<ul>標籤中指定一個ID，並套用class="sm sm-blue"，便可輕易做出多層導覽列。
  5. 自訂選單的變數為 $menu_var <input id="main-menu-state" type="checkbox" /> <label class="main-menu-btn" for="main-menu-state"> <span class="main-menu-btn-icon"></span> Toggle main menu visibility </label> <ul id="main-menu" class="sm sm-blue"> <li><a href="<{$xoops_url}>">回首頁</a></li> <{foreach from=$menu_var item=menu name=m}> <li><a href="<{$menu.url}>"><{$menu.title}></a> <{if $menu.submenu}> <{*子選單迴圈*}> <{/if}> </li> <{/foreach}> </ul>
  6. 若需要修改導覽列樣式，請將tadtools中的 /smartmenus/css/sm-blue.css複製到佈景目錄下的css目錄中，並改引用自己的樣式檔，如： <link rel="stylesheet" href="<{xoImgUrl}>css/sm-blue.css">
  7. 接著就利用瀏覽器的元素檢查工具，修改導覽列樣式成自己想要的樣子。
  8. 選單目前最多三層，亦即最多只有三組<ul></ul>
八、 手動載入區塊
  1. 先在config2.php加入一組設定，例如： $theme_config[$i]['name'] = "block1"; $theme_config[$i]['text'] = '第一個綠底區塊編號'; $theme_config[$i]['desc'] = '可從區塊管理，編輯區塊時，該區塊的bid編號'; $theme_config[$i]['type'] = "text"; $theme_config[$i]['default'] = '472';
  2. 接著在樣板檔中，找到要加入區塊的地方，插入該區塊即可： <{block id=$block1}>
九、 自動讀取區塊（以中央區塊為例）
  1. 各個區域的區塊變數名稱為：
    • (1) 上左區塊：$xoBlocks.page_topleft
    • (2) 上右區塊：$xoBlocks.page_topright
    • (3) 上中區塊：$xoBlocks.page_topcenter
    • (4) 下左區塊：$xoBlocks.page_bottomleft
    • (5) 下右區塊：$xoBlocks.page_bottomright
    • (6) 下中區塊：$xoBlocks.page_bottomcenter
    • (7) 左區塊：$xoBlocks.canvas_left
    • (8) 右區塊：$xoBlocks.canvas_right <{foreach from=$xoBlocks.page_topcenter item=block}> 區塊標題及內容 <{/foreach}>
  2. 其中區塊標題建議用： <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
  3. 區塊內容為： <div class="blockContent"> <{$block.content}> </div>
  4. 若是想讓某些項目不斷循環重複，其語法為： <{cycle values='項目1,項目2'}>
十、 首頁和模組頁區隔開來
  1. 要讓樣板判別現在位置是在首頁還是模組頁： <{if $xoops_dirname == "system"}> <{* 在首頁 *}> <{else}> <{* 在模組 *}> <{/if}>
十一、 修改關站畫面
  1. 複製theme.html（或theme.tpl）至「佈景/modules/system/system_siteclosed.tpl」
  2. 清空主要呈現內容的地方，留下頭尾，並於主內容區貼上以下語法即可： <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/siteclosed_login.tpl"}>
  3. 到後台一般設定將預設佈景改為新佈景，並將「關閉網站」選「是」，開啟另一個瀏覽器來測試是否有正確的關站畫面。