:::

8. 現有網頁改製為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. 到後台一般設定將預設佈景改為新佈景,並將「關閉網站」選「是」,開啟另一個瀏覽器來測試是否有正確的關站畫面。

 


:::

書籍目錄

展開 | 闔起

線上使用者

26人線上 (2人在瀏覽線上書籍)

會員: 0

訪客: 26

更多…