Toggle main menu visibility
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
:::
登入
登入
帳號
密碼
登入
重整畫面
:::
所有書籍
「[1031]XOOPS佈景設計」目錄
MarkDown
5-8 theme2014/xotpl/block_center.html (中間區塊樣板檔)
1. HTML5入門
1-1 「範例」index.html
2. HTML5 與 CSS3
2-1 index.html(背景整合設定)
2-2 index.html(多背景)
2-3 index.html(標題文字外觀設定)
2-4 index.html(頁內樣式)
2-5 index.html(版面布局)
2-6 index.html(完整版面布局)
2-7 index.html(導覽列)
2-8 index.html(完整導覽列)
3. CSS3與版面布局
3-1 index.html(標題加上左邊框)
3-2 index2.html(position練習空檔)
3-3 index2.html(position:relative)
3-4 index2.html(position:relative+z-index 上下層)
3-5 index2.html(position:absolute)
3-6 index2.html(position:fixed)
3-7 index.html(兩欄式)
3-8 index3.html(用position來做三欄式)
3-9 index4.html(利用float做三欄式)
3-10 index.html(float兩欄式)
3-11 index.html(側邊作者欄+花邊)
4. 認識 BootStrap
4-1 bootstrap1.html 固定版面布局練習
4-2 bootstrap2.html 固定版面XOOPS布局練習
4-3 bootstrap2.html 流動版面XOOPS布局練習
4-4 bootstrap3.html 流動版面網頁排版練習
5. XOOPS佈景開發(上)
5-1 theme2014/index.html 基本頁面
5-2 theme2014/index.html 基本頁面+架構+justfont字型
5-3 css/style.css 主樣式表
5-4 theme2014/index.html 導覽列+XOOPS八區域+頁尾
5-5 theme2014/theme.html 樣板檔(大架構初步完成)
5-6 theme2014/xotpl/block.html (區塊樣板檔)
5-7 theme2014/css/xoops.css (XOOPS內容樣式表)
5-8 theme2014/xotpl/block_center.html (中間區塊樣板檔)
6. XOOPS佈景開發(下)
6-1 theme2014/theme.html 樣板檔(加入管理工具)
6-2 theme2014/xotpl/block.html (強化區塊樣板檔)
6-3 theme2014/xotpl/block_center.html (強化中間區塊樣板檔)
6-4 theme2014/css/xoops.css (XOOPS內容樣式表)
6-5 theme2014/css/style.css (主樣式表)
6-6 theme2014/modules/system/system_redirect.html 轉頁畫面
6-7 theme2014/language/tchinese_utf8/main.php
7. 打造可控制佈景
7-1 佈景結構參考
7-2 theme2014/theme.html (主佈景架構)
7-3 theme2014/theme.ini (佈景資訊檔)
7-4 theme2014/css/style.css
7-4 theme2014/config.php (佈景主設定檔)
7-5 theme2014/config2.php 額外設定
8. 進階佈景設計
8-1 theme2014/theme.html 主佈景架構
8-2 theme2014/language/tchinese_utf8/main.php 語系檔
9. 快速做出XOOPS佈景
9-1 themes/sailing_demo/theme.html
9-2 themes/sailing_demo/theme.ini
9-3 themes/sailing_demo/README
9-4 themes/sailing_demo/config.php
9-5 themes/sailing_demo/config2.php
9-6 themes/sailing_demo/templatemo_style.css (僅列修改部份)
6-1 theme2014/theme.html 樣板檔(加入管理工具)
\[1031\]XOOPS佈景設計 ================= [](http://www.tad0616.net/uploads/tad_book3/file/1031/06.pdf) ### 一、 強化區塊樣板 1. 可直接套用tadtools的blockTitle.html樣板,即有強化區塊標題的功能 ``` <{include file="$xoops_rootpath/modules/tadtools/themes_tpl/blockTitle.html"}> ``` 2. 由於tadtools的blockTitle.html樣板就有內建樣式class="blockTitle",所以,若原本佈景有自己定義class="blockTitle"的,則可拿掉。 3. 想隱藏區塊標題,請在標題後加上 \[hide\],例如:"標題 \[hide\]"。 4. 想使用圖片作為標題,請在標題後加上 \[pic\]以及圖片在佈景中的位置,例如:"標題 \[pic\]img/usermenu.png"。 5. 想要在區塊標題前面放一個 icon,請在標題後加上 \[icon\]以及圖片在佈景中的位置,如:"標題 \[icon\]img/icon.gif"。 6. 希望區塊標題有連結網址,請在標題後加上 \[link\]以及網址,例如:"標題 \[link\]http://ck2tw.net"。 7. 當使用圖片作為標題時,原本的區塊名稱會作為 "alt" 或 "title" 標籤的內容。 ### 二、 加入後臺管理連結 1. 利用<{$xoops\_isadmin}>樣板標籤可判斷目前登入者是否為管理員,XOOPS的管理後台路徑為「http://網址/admin.php」。 ``` <{if $xoops_isadmin}>
後台管理
<{/if}> ``` ### 三、 加入登出和登入按鈕 1. 利用<{$xoops\_isuser}>樣板標籤可以判斷目前登入者是否為註冊會員。登出的網址為「http://網址/user.php?op=logout」。 ``` <{if $xoops_isuser}>
登出
<{else}>
登入
<{/if}> ``` ### 四、 新通知信 1. xoInboxCount就是用來計算新通知信數量的smarty外掛,將之設定為樣板變數$pmcount,如此,就可以利用他來呈現到畫面上。 ``` <{xoInboxCount assign=pmcount}> <{if $pmcount}>
您有 <{$pmcount}> 封信
<{/if}> ``` ### 五、 使用者資訊 1. 利用 xoMemberInfo可取得使用者資訊的陣列,並將之套用到$mem變數,如此,我們便可以在樣板中使用使用者資訊,陣列的用法為<{$陣列名稱.陣列項目}> ``` <{xoMemberInfo assign=mem}> ``` 2. 此外,每個項目如<{$mem.name}>,都可以加上\_expire查其到期日時間戳記,例如<{$mem.name\_expire}>的值為1397970511(雖然不曉得這要幹嘛~) - (1) <{$mem.uname}>:tad(帳號) - (2) <{$mem.name}>:吳弘凱(真實姓名) - (3) <{$mem.email}>:tad0616@gmail.com(Email) - (4) <{$mem.user\_avatar}>:avatars/cavt50877193c9788.png(頭像) - (5) <{$mem.url}>:http://localhost/x25/(個人網站) - (6) <{$mem.user\_icq}>:(ICQ即時通訊的帳號) - (7) <{$mem.user\_aim}>:(美國線上即時通訊的帳號) - (8) <{$mem.user\_yim}>:(雅虎即時通的帳號) - (9) <{$mem.user\_msnm}>:(MSN即時通訊的帳號) - (10) <{$mem.posts}>:93(文章發表數) - (11) <{$mem.user\_from}>:台南(來自) - (12) <{$mem.user\_occ}>:老師(職業) - (13) <{$mem.user\_intrest}>:看漫畫(興趣) - (14) <{$mem.bio}>:(其他資訊) - (15) <$mem.user\_sig}>:沒有簽名(簽名檔) ### 六、 常用使用者選單的內容連結位置 1. <a href="<{xoAppUrl user.php}>" >查看帳號</a> 2. <a href="<{xoAppUrl edituser.php}>">編輯帳號</a> 3. <a href="<{xoAppUrl notifications.php}>">通知</a> 4. <a href="<{xoAppUrl user.php?op=logout}>">登出</a> ### 七、 登入畫面常用的欄位名稱及路徑 1. form的action要改為<{xoAppUrl user.php}>,method使用post方式,帳號欄位的name為uname,密碼欄位的name則為pass,欄位可使用placeholder佔位字元來進行提示,亦可用class=”input-small”使用較小輸入欄位。 2. 若需要加入記住帳密的功能可加入:<input type="checkbox" value="On" name="rememberme">記住我 3. 需要<input type="hidden" value="login" name="op">才能真的執行登入 4. <input type="hidden" name="xoops\_redirect" value="<{$xoops\_requesturi}>"> 登入後會轉向至目前頁面。 5. 立即註冊路徑:<{xoAppUrl register.php}> 6. 密碼遺失路徑:<{xoAppUrl user.php#lost}> ### 八、 插入小插圖: 1. 若插圖放在佈景下的images中,那麼,可用{xoImgUrl images/檔名}>來插圖。 2. <img src="<{xoImgUrl images/圖.png}>" hspace="3" align="absmiddle"> 3. hspace為HTML的插圖屬性,意思是圖片左右兩側的間距。 4. align是用來對齊的,absmiddle可以做到絕對垂直置中對齊。 5. 插入個人圖像(2.4.3之後才支援) ```
``` ### 九、 修改轉頁畫面 1. XOOPS 2.3前轉頁樣板:/modules/system/templates/system\_redirect.html 2. XOOPS 2.3以後轉頁樣板:/佈景/modules/system/system\_redirect.html 3. 「偏好設定/系統設定/一般設定」中的「
使用 jGrowl 動態轉向
」要選「否」才有作用。 4. 可以在佈景下建立一個modules,上傳至佈景中,並將該目錄設為777可寫入。 5. 進到後台「樣板」,「
選擇佈景
」選用新佈景,
「強制產生檔案」選「是」
,「
選擇模組
」選擇「系統管理」(即 system 模組) 6. 送出後,在「
選擇樣板
」中挑選 system\_redirect.html 後送出。 7. 接著您可以從後台的樣板直接編輯 /system/system\_redirect.html 來修改之。也可以將之下載來修改之。 8. 轉頁的話,此行要保留 ```
<{$message}> <{$lang_ifnotreload}> <{if $xoops_logdump != ''}> <{$xoops_logdump}> <{/if}> ``` ### 十、 設定語系 1. XOOPS 2.3以後可設定佈景語系檔:/佈景/language/語系/main.php 2. 一樣用define("常數","字串")來設定,例如:define("\_THEME\_ID", "帳號:"); 3. 佈景中使用:<{$smarty.const.\_THEME\_ID}> 4. 若要套用變數到語系中:
<{$欲套入變數|string\_format:$smarty.const.語系常數}>
### 十一、 網站小圖 1. 可自行製作網站ico圖示:http://www.favicon.cc/ 2. 做完存成favicon.ico放置於「佈景/icons」下即可。
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
115
人線上 (
61
人在瀏覽
線上書籍
)
會員: 0
訪客: 115
更多…