四小時佈景開發
一、修改原頁首部份
- 先將<body>之前的所有語法剪下，貼到新頁，然後刪除多餘或重複語法，只留下 CSS 或 JavaScript 的部份。
- 若引入的是 bootstript的CSS檔或 jquery.js檔，也可刪除之，因為預設檔頭裡面已經有載入，無須重複載入。
- 修正路徑，凡是有引入檔案的如圖片、 javascript 或CSS或各式檔案，找到「相對路徑/xxx檔」（只要不是http://開頭的）請將之改為「<{xoImgUrl 目錄/相對路徑/xxx檔}>」
- <{xoImgUrl}> 代表當前佈景目錄的絕對位置，後面不需要加上 /。
- 如：<link href="scripts/icons/general/stylesheets/general_foundicons.css" media="screen" rel="stylesheet" type="text/css" />改為 <link href="<{xoImgUrl scripts/icons/general/stylesheets/general_foundicons.css}>" media="screen" rel="stylesheet" type="text/css" />
- 共同樣板已經將XOOPS所需要引入的檔案及相關設定都處理好了，您所需要的就是微調之而已（例如把原樣板的CSS設定及JavaScript語法整合進去即可）
- 接著開啟「加入頁首.txt」，將裡面的語法，貼至<body>之前： <!DOCTYPE html> <html lang="<{$xoops_langcode}>"> <head> <!--將目前的資料夾名稱，設定為樣板標籤變數 theme_name--> <{assign var=theme_name value=$xoTheme->folderName}> <!--載入由使用者設定的各項佈景變數--> <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/get_var.html"}> <!-- 設定網站文字編碼 --> <meta charset="<{$xoops_charset}>"> <!-- 套用XOOPS中的網頁索引規則 --> <meta name="robots" content="<{$xoops_meta_robots}>" /> <!-- 套用XOOPS中的網站關鍵字設定 --> <meta name="keywords" content="<{$xoops_meta_keywords}>" /> <!-- 套用XOOPS中的網站描述設定 --> <meta name="description" content="<{$xoops_meta_description}>" /> <!-- 套用XOOPS中的網頁分級設定 --> <meta name="rating" content="<{$xoops_meta_rating}>" /> <!-- 套用XOOPS中的網站作者設定 --> <meta name="author" content="<{$xoops_meta_author}>" /> <!-- 套用XOOPS中的版權宣告 --> <meta name="copyright" content="<{$xoops_meta_copyright}>" /> <!-- 網站的編輯工具 --> <meta name="generator" content="XOOPS" /> <!-- 網站的標題及標語 --> <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title> <!-- 網站的RSS連結，<{xoAppUrl}>代表網站網址 --> <link rel="alternate" type="application/rss+xml" title="" href="<{xoAppUrl backend.php}>" /> <!-- 網站圖示設定 --> <link rel="shortcut icon" type="image/ico" href="<{xoImgUrl icons/favicon.ico}>" /> <link rel="icon" type="image/png" href="<{xoImgUrl icons/favicon.png}>" /> <!-- 網站所需的外部樣式檔，<{xoImgUrl}> 代表佈景路徑，通常是[http://網址/themes/佈景名稱] --> <!-- XOOPS本身內建的樣式 --> <link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoAppUrl xoops.css}>" /> <!-- XOOPS中會用到的一些樣式 --> <link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoImgUrl css/xoops.css}>" /> <!-- Bootstrap 樣式表--> <link href="<{xoAppUrl modules/tadtools/bootstrap/css/bootstrap.css}>" rel="stylesheet" media="screen"> <!-- 佈景的主樣式 --> <link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoImgUrl css/style.css}>" /> <!-- 給模組套用的樣板標籤 --> <{$xoops_module_header}> <!-- 局部套用的樣式，如果有載入完整樣式 theme_css.html 那就不需要這一部份 --> <style type="text/css"> body{ font-family:<{$font_family}>; } <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/theme_css_blocks.html"}> <!--{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/theme_css_navbar.html"}--> </style> <!-- 載入 jquery --> <script type='text/javascript'> if(typeof jQuery == 'undefined') { document.write("<script type='text/javascript' src='<{xoAppUrl modules/tadtools/jquery/jquery.js}>'><\/script>"); } </script> </head>
- 請檢查 <!-- 佈景的主樣式 --> 下的那一行佈景CSS主樣式檔是否存在，若並不存在可刪除之。
- 將剛剛整理好的語法複製，並貼到 <!-- 佈景的主樣式 --> 下方並儲存，此時，theme.html的頁首部份已經搞定。
- 開啟「加入內容及頁尾.TXT」，找到【版型及內容】，複製語法，找到之前自己寫的「這裡是主內容區」部份，貼上取代之。至此，佈景已經可以呈現區塊及主內容，並可切換各種版型。 <div class="contentArea"> <div class="divPanel notop page-content"> <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/$theme_type.html"}> <div id="footerInnerSeparator"></div> </div> </div>
- 接著陸續加上【頁尾】以及【佈景變數及必要的語法】（加至</body>前）。其中 jquery.js 以及 bootstrap.js 共同樣板都會載入，故可先刪除之，
- 接著貼上【佈景變數及必要的語法】，唯一留下的一行，一樣利用<{xoAppUrl}>或<{xoImgUrl}>重設其路徑。
- 找到導覽列，貼上預設導覽列共同樣板（日後可改） <div id="divMenuRight" class="pull-right"> <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/navbar.html"}> </div>
- 搜尋一下「theme_css_navbar.html」，將該行註解拿掉，如此，使用者才能從後台直接設定下拉選單的樣式。
