:::

9. 快速做出XOOPS佈景

一、 先準備好一個佈景

  1. 您可以自己設計一個靜態畫面,也可以從網路上抓取免費佈景來修改成XOOPS佈景。
  2. 範例:http://www.templatemo.com/preview/templatemo_322_sailing
  3. 解壓縮後,刪除不必要檔案,並將index.html複製一份成theme.html

二、 放入共同的佈景檔案及目錄

  1. 將theme_package.zip解壓縮,並將裡頭的所有檔案目錄複製至佈景目錄中。
  2. 修改theme.ini及README的內容,主要就是填一下佈景名稱及其他資訊而已。

三、 修改theme.html的頁首

  1. 將theme_package.zip解壓縮,並將裡頭的所有檔案目錄複製至佈景目錄中。(兩個TXT檔不需要複製)
  2. 開啟「加入頁首.txt」,將裡面的語法,貼至</head>之前,並取代原有內容。(若原有佈景有自訂的javascript語法,應留下,勿將之覆蓋掉,除非用不到)
  3. 找到「<{xoImgUrl css/style.css}>」修改為該佈景的主要CSS檔位置。若有兩個以上的CSS檔則自行加上。

四、 修改theme.html的主要版型及頁尾

  1. 利用FireFox的「檢測元素」功能,找出主內容區的位置,以本例而言<div id="templatemo_content">中即為主要內容及側邊欄的呈現區域。請將裡面的語法刪除。我們用現有的可切換版型的樣板來取代之
  2. 開啟「加入內容及頁尾.TXT」,找到【版型及內容】,複製語法,貼到<div id="templatemo_content">中。至此,佈景以可呈現區塊及主內容,並可切換版型。
    <div id="templatemo_content">
      <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/$theme_type.html"}>
    </div>
  3. 接著陸續加上【頁尾】以及【佈景變數及必要的語法】(加至</body>前)。
  4. 最後將佈景中,有載入圖片或額外檔案的部份,利用<{xoAppUrl}>或<{xoImgUrl}>重設其路徑。

五、 套用佈景

  1. 「後台→偏好設定→系統設定→一般設定→使用者可選擇的佈景 」加入新佈景,接著再至前台的佈景區塊選用新佈景。
  2. 開啟config.php,根據佈景狀況,調整相關參數。例如背景顏色及佈景寬度,不給改的就請將enable設為0,但其預設值仍須為正確的預設值(因為不開放修改會直接存入預設值)
  3. 開啟config2.php,將不需要的設定項目標記起來。例如頁尾顏色、底圖等。
  4. 調整期間,先別進後台,這樣設定值就不會寫進資料庫,調整config.php馬上就可以看到效果。

六、 調整選單、Logo或滑動圖文

  1. 參考「加入內容及頁尾.TXT」語法,可直接套用所需樣板。
  2. 或利用樣板變數,自製選單($menu_var)或滑動圖文($slider_var)搭配<{foreach form=$xxx item=OOO}><{$OOO.key}><{/foreach}>的寫法來自己做出相關功能。

七、 製作縮圖

  1. 最後,做好後,擷取螢幕,存成screenshot.png,並將圖片大小縮至450px,接著,再轉檔為shot.gif,並將其寬度縮至150px
  2. 最後,直接上傳到網站並套用,或壓縮成zip檔,準備釋出。

八、「補充」額外設定

  1. 陣列的寫法(json格式):
    [{"name":"回首頁","url":"{XOOPS_URL}/index.php"},
    {"name":"最新消息","url":"{XOOPS_URL}/modules/tadnews/"},
    {"name":"電子相簿","url":"{XOOPS_URL}/modules/tadgallery/"},
    {"name":"檔案下載","url":"{XOOPS_URL}/modules/tad_uploader/"},
    {"name":"聯絡我們","url":"{XOOPS_URL}/modules/ugm_contact_us/"}]
  2. 若需要多幾個項目:
    [{"name":"回首頁","url":"{XOOPS_URL}/index.php" , "target":"_self"},
    {"name":"最新消息","url":"{XOOPS_URL}/modules/tadnews/" , "target":"_blank"},
    {"name":"電子相簿","url":"{XOOPS_URL}/modules/tadgallery/" , "target":"_blank"},
    {"name":"檔案下載","url":"{XOOPS_URL}/modules/tad_uploader/" , "target":"_blank"},
    {"name":"聯絡我們","url":"{XOOPS_URL}/modules/ugm_contact_us/" , "target":"_blank"}]

九、完整佈景檔下載

sailing_demo.zip


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

32人線上 (11人在瀏覽線上書籍)

會員: 0

訪客: 32

更多…