:::
所有書籍
「四小時佈景開發」目錄
MarkDown
2-2 放入共同的佈景檔案及目錄（10分鐘）
1. 製作XOOPS的佈景大致流程（10分鐘）
2. 將佈景轉換為樣板（10分鐘）
2-1 精簡 theme.html 內容（30 分鐘）
2-1-1 theme.html
2-2 放入共同的佈景檔案及目錄（10分鐘）
2-3 將 theme.html 套用共同樣板檔（30分鐘）
2-3-1 theme.html
2-4 佈景可用的XOOPS樣板標籤（10分鐘）
2-4-1 theme.html
3. 初次套用佈景（20分鐘）
3-1 config.php
4. 關於 config.php（30分鐘）
5. 關於 theme_css.html（20分鐘）
6. 滑動圖文（10分鐘）
7. 導覽列選單（10分鐘）
8. 讓使用者可以傳 logo 圖（20分鐘）
9. 關於 config2.php 額外設定（30分鐘）
2-3-1 theme.html
四小時佈景開發 ======= ### 一、修改原頁首部份 1. 先將<body>之前的所有語法剪下，貼到新頁，然後刪除多餘或重複語法，只留下 CSS 或 JavaScript 的部份。 2. 若引入的是 bootstript的CSS檔或 jquery.js檔，也可刪除之，因為預設檔頭裡面已經有載入，無須重複載入。 3. 修正路徑，凡是有引入檔案的如圖片、 javascript 或CSS或各式檔案，找到「相對路徑/xxx檔」（只要不是http://開頭的）請將之改為「**<span style="color:#FF0000;"><{xoImgUrl</span>** 目錄/相對路徑/xxx檔**<span style="color:#FF0000;">}></span>**」 - <{xoImgUrl}> 代表當前佈景目錄的絕對位置，後面不需要加上 /。 - 如：<link href="scripts/icons/general/stylesheets/general\_foundicons.css" media="screen" rel="stylesheet" type="text/css" />改為 <link href="**<span style="color:#FF0000;"><{xoImgUrl</span>** scripts/icons/general/stylesheets/general\_foundicons.css**<span style="color:#FF0000;">}></span>**" media="screen" rel="stylesheet" type="text/css" />  ### 二、用共同樣板取代原頁首 1. 共同樣板已經將XOOPS所需要引入的檔案及相關設定都處理好了，您所需要的就是微調之而已（例如把原樣板的CSS設定及JavaScript語法整合進去即可） 2. 接著開啟「加入頁首.txt」，將裡面的語法，貼至<body>之前： ``` <pre class="brush:xml;highlight:[44];"> <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> ``` 3. 請檢查 <span style="color:#0000CD;"><!-- 佈景的主樣式 --> </span>下的那一行佈景CSS主樣式檔是否存在，若並不存在可刪除之。 4. 將剛剛整理好的語法複製，並貼到 <span style="color:#0000CD;"><!-- 佈景的主樣式 --> </span>下方並儲存，此時，theme.html的頁首部份已經搞定。 ### 三、修改內容及頁尾 1. 開啟「加入內容及頁尾.TXT」，找到【版型及內容】，複製語法，找到之前自己寫的「<span style="color:#800080;">這裡是主內容區</span>」部份，貼上取代之。至此，佈景已經可以呈現區塊及主內容，並可切換各種版型。 ``` <pre class="brush:xml;highlight:[5];"> <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> ``` 2. 接著陸續加上【頁尾】以及【佈景變數及必要的語法】（加至</body>前）。其中 jquery.js 以及 bootstrap.js 共同樣板都會載入，故可先刪除之，  3. 接著貼上【佈景變數及必要的語法】，唯一留下的一行，一樣利用<{xoAppUrl}>或<{xoImgUrl}>重設其路徑。  ### 四、修改導覽列 1. 找到導覽列，貼上預設導覽列共同樣板（日後可改） ``` <pre class="brush:xml;highlight:[2];"> <div id="divMenuRight" class="pull-right"> <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/navbar.html"}> </div> ``` 2. 搜尋一下「theme\_css\_navbar.html」，將該行註解拿掉，如此，使用者才能從後台直接設定下拉選單的樣式。 
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
53
人線上 (
7
人在瀏覽
線上書籍
)
會員: 0
訪客: 53
更多…
:::
主選單
NTPC OpenID
活動報名
模組控制台
進階區塊管理
站長工具箱（急救版）
網站地圖
Tad Tools 工具包
站長工具箱
行事曆
討論留言
嵌入區塊模組
快速登入
網站計數器
好站連結
最新消息
檔案下載
線上書籍
電子相簿
影音播放
常見問題
萬用表單
友站消息
社大學員
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
登入
登入
帳號
密碼
登入
2-2 放入共同的佈景檔案及目錄（10分鐘）
