:::
所有書籍
「 [1091] XOOPS輕鬆架 」目錄
MarkDown
2. 網站群組、權限及外觀設定
1. 架設第一個XOOPS網站
2. 網站群組、權限及外觀設定
3. 自訂網站外觀及內容
4. 打造多媒體無障礙網站
5. 各種實用網站工具模組
6. 進階模組及網站備份與管理
4. 打造多媒體無障礙網站
\[1091\] XOOPS輕鬆架 =================== ### 一、打造屬於自己風格的版面 1. 建議使用
school2019 BootStrap4
佈景 2. 範例網站:[
http://stu.tncomu.tn.edu.tw/~demo1091/index.php
](http://stu.tncomu.tn.edu.tw/~demo1091/index.php) 3. 先製作專屬
logo
:「佈景」→「
logo
設計」 4. 調整版型:「佈景」→「基本版面」,欄位數除非無法以整數相加得到
12
,不然盡量少用
auto
,例如兩欄式可以是
9+3
,就盡量別
9+auto
。 5. 加入網路字型設定:「佈景」→「額外設定」→「欲加入頁尾的
CSS
或
JS
語法」 ```markup
``` 6. 套用網路字型:「佈景」→「額外設定」→「主要字型設定」,放第一個會優先使用 1. 思源黑體: `
'Noto Sans TC', sans-serif
` 2. 思源宋體: `
'Noto Serif TC', serif
` 3. 粉圓體: `
jf-openhuninn
` 4. 王漢宗魏碑體: `
HanWangWeBe
` 5. 可愛的日文字型: `
Mamelon
`(可能會有缺字) 7. 背景可使用不重複透明圖搭配底色,做出與眾不同的效果 1. 下載透明背景:
2. 將圖片縮小,以節省空間,加速傳輸:
8. 滑動圖(
1280x300
)可利用原有的四張圖來做加工 1. 人像自動去背:
2. 線上影像處理:
1. 可至「
more
」設定成中文語系 2. 新增專案→背景選「透明」 3. 圖片可直接從檔案總管拉進去 4. 文字請勾選「 `
Chi-Jap-Kor
`」,然後用「 `
Noto Sans TC
`」就有完整正體中文 5. 最後只要按左上圖示,轉存為`
png
`,下載即可 9. 區塊標題列,字體可調大,「區塊標題樣式手動設定」可自行輸入
CSS
來設定文字,例如: ```css padding:6px; /* 離標題邊框距離 */ text-align:left; /* 文字靠左 */ font-weight:normal; /* 不要粗體 */ font-family: HanWangMingBlack, jf-openhuninn, 'Noto Sans TC', Mamelon; /* 字型 */ background: -webkit-linear-gradient(#5F951F, #007FA0); /* 漸層顏色 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; ``` 10. 導覽工具列,若是不想遮住背景圖,可以在「導覽列透明度」設 `
0.5
`(半透明) ### 二、自己做網路字型 1. 上傳字型(不可超過
1
0
M
)轉為
WOFF2
格式:[
https://transfonter.org/
](https://transfonter.org/) 2.
WOFF2
使用自訂預先處理和壓縮演算法,與其他格式相較可多縮減
~30%
的檔案大小 3. 將
WOFF2
字型上傳到網路上,並製作網路字型的
css
檔,也一併上傳,以
Mamelon
為例: ```css @font-face { font-family: "Mamelon"; src: url("https://網址/uploads/fonts/Mamelon.woff2") format("woff2"); font-weight: normal; font-style: normal; } ``` 4. 接著就如同上面套用方式,或者直接在樣式表中,以 `
font-family
`直接設定字型名稱即可 ### 三、自訂頁面應用 1. 想要加入自己編寫的內容,卻又不想像新聞一樣,會隨著時間的推移而將文章往後塞,此時,您就可以用「自訂頁面」功能來做。 我們利用這功能來做一個組織介紹(以「開發組」為例),並讓該組織可以有獨立的公告區、相簿、討論區
...
等。 2.
「編輯功能→發布文章」→
發布文章種類 :
「自訂頁面」
1.
第一次發文請順便建立一個分類,如:「開發組」
2.
編輯後,需要透過區塊或選單才看得到自訂頁面內容。
3.
故請點擊分類連結,如「我的文章」→「開發組簡介
(
管理員
/ 2 /
開發組
)
」中的「開發組」,或者自訂文章中的「
開發組
/ 2020-03-20 /
人氣:
3
」
4.
按下綠色的「加入佈景選單」就可以將該分類加到導覽列中,日後新增文章時,導覽列會自動長出文章連結。
5.
加入「自訂頁面選單」區塊到前台,並顯示到全部頁面,只有切換到該分類文章時,該區塊才會出現,供使用者方便觀看該組所有頁面內容用。
6.
未來若還有第二個自訂頁面分類,請複製該區塊,並修改設定即可。
3. 自訂頁面的頁籤用法:當內容較多,且有適當分類時適用。 1. 一旦決定頁籤版型後,便無法變回一般版型。 2. 自訂頁面文章下方有「調整頁籤排序」按鈕,可直接拉動排序。 4. 同一個分類下的文章,可以在分類頁面直接拉動文章排序。 5. 可編輯自訂文章分類,決定一些細節,例如是否顯示上下頁按鈕,或者是否使用固定標題。 1.
可關閉「
顯示文章標題
」
2.
利用「佈景」→「
logo
設計」設計文章標題,並將圖存起來,複製圖片連結
3.
編輯文章,到文章中插入圖片,貼上圖片網址即可。
### 四、自訂頁面相關區塊 1. 「自訂頁面選單」:會自動偵測網址,只有在所屬分類下才會出現該分類所有頁面選單。 2.
「自訂頁面列表」:固定呈現自己指定的分類頁面選單
3. 「自訂頁面樹狀目錄」:以樹狀目錄來呈現的自訂頁面選單 ### 五、讓
logo
可以根據不同頁面來自動切換 1. 假設我們希望連到開發組頁面,
logo
會自動加上開發組字樣 2. 假設開發組分類頁面為:
http://
網址
/modules/tadnews/page.php?
**
ncsn
**
=
**5**
1. 其中「自動配對變數名稱」就是「**
ncsn
**」 2. 先到
「佈景」→「
logo
設計」做一張開發組的標題圖,下載後檔名改為「
**5**
.
**png**
」
3.
利用
FTP
軟體或利用
tadnews
模組的
CKEditor
編輯器將圖片上傳,可建立一個
logo
資料夾,其「圖示放置路徑」應為「
`
/uploads/tadnews/image/logo/
`
」
4.
「
logo
圖的副檔名」為「
**png**
」
3.
至「佈景」→「
logo
圖」,將「是否使用自動配對」選「是」,並填入以上資訊即可。
### 六、用
Tad Embed
嵌入區塊模組來製作單位專屬公告頁面 1. 此模組是用來讓其他網站嵌入
XOOPS
區塊用的,請將之安裝起來,編號 `
81
` 2. 此模組需搭配「
blank\_theme
空白佈景」,故請安裝
70
號佈景 3. 使用範例:[
http://www.tlps.hlc.edu.tw/modules/tad\_embed/page.php?ebsn=2
](http://www.tlps.hlc.edu.tw/modules/tad_embed/page.php?ebsn=2) 4. 我們可以利用此模組做成「開發組公告」頁面,此模組在後台設定,前台使用 1. 到後台新增資料,選擇「最新消息→條列式新聞」,基本上,任何區塊均可。 2. 在區塊設定中,將「選擇要秀出的類別」只勾選該單位新聞分類,如:「開發組消息」 3. 預覽沒問題的話,請將語法複製起來。 4. 到「開發組」分類下新增一個自訂頁面,切換成「原始碼」模式,將語法貼上即可。 5. 利用此方法,可以製作該單位的活動相簿、榮譽榜、討論區
...
等頁面。 ### 七、利用
Google
或
Facebook
登入 1. 請安裝 `
tad_login
`,編號 `
24
`,裝好後,請看一下後台的「
Google
認證設定說明」 2. 接著到偏好設定中的「欲使用的認證方式」,選擇「使用
Google
登入」 3.
Facebook
也一樣流程,在未申請完之前,請勿啟用,不然網站可能會出問題。 4. 到後台「自動群組設定」若知道成員的
email
可以在此設好,登入就會自動分配好群組。 5. 建議開啟「快速登入」區塊,並建議使用大圖示比較清楚。 ### 八、電子報應用(以下僅補充,有時間再上) 1. 您至少必須有一組「電子報主題」,才能在該主題下建立每一期的電子報。 2. 「
tadnews
後台→電子報管理」去「建立新的電子報主題」。 3. 每一組「電子報主題」可以有自己的名稱、檔頭、檔尾以及佈景。 4. 一個網站可以建立許多不同主題的電子報。 5. 若要刪除一個「電子報主題」,得先將其下的電子報都刪除才行。 ### 九、編輯電子報 1. 「後台→本站新聞→電子報管理」,先選擇主題→「新增一期電子報」 2. 「步驟二」可以從左邊選擇您要放入電子報的新聞到右邊,並調整上下順序。 3. 「步驟三」設定一個當期電子報標題,並進行最後的整理,要增減內容請在此進行。 4. 「步驟四」可以預覽電子報,也可以自行增減要寄信的對象,然後進行寄出動作。 5. 在使用者介面的「本站新聞→電子報列表」也可以看到電子報。 6. 此時,您也可以新增「電子報一覽」的區塊,以便讓網友觀看。 7. 「觀看寄送紀錄」可以讓您查看哪些人有寄了。 8. 「立即寄出」則可寄信給指定的人。下方可大量匯入
Email
(以半形逗號隔開) 9. 若訂閱者很多,可能要分批寄送。 ### 十、設計電子報佈景 1. 一套電子報佈景是一個目錄,主佈景檔名為
index.html
,做好請傳至「
/uploads/tadnews/themes/
」底下即可。 2. 先編輯好一個網頁,然後切換到「程式碼」,加入一些佈景標籤即可完成。 3. 線上收信圖片會消失,是因為線上收信程式擋掉部份標籤或
CSS
的關係,若希望圖片可以完整呈現,盡量用
HTML
標籤,並請避開被禁止之
CSS
屬性:[
https://developers.google.com/gmail/design/reference/supported\_css
](https://developers.google.com/gmail/design/reference/supported_css) 4. 佈景中,可用的樣板標籤如下(灰色的部份是一定要用的部份):
套用標籤
標籤作用
{TNP\_TITLE}
電子報的主題,用法:
<title>{TNP\_TITLE}</title>
{TNP\_CODE}
網頁的編碼,用法:
<meta http-equiv="content-type" content="text/html; charset={TNP\_CODE}" />
{TNP\_THEME}
佈景主題的路徑,若有圖片,請在圖片前面加上
{TNP\_THEME}
標籤。 如:
<link rel="stylesheet" type="text/css" href="{TNP\_THEME}style.css" />
{TNP\_CSS}
預設的
CSS
設定連結(
<head> </head>
中貼上就好)
{TNP\_HEAD}
頁首(或者電子報標題)
{TNP\_CONTENT}
電子報主內容
{TNP\_FOOT}
頁尾
(若覺得段落間距太大,可用
shift+Enter
加入斷行)
### 十一、電子報相關區塊 1. 「訂閱
/
取消電子報」:讓用戶訂閱電子報的界面。 2.
「電子報一覽」:列出目前最新
N
則的電子報連結。
標題
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
47
人線上 (
7
人在瀏覽
線上書籍
)
會員: 0
訪客: 47
更多…
:::
主選單
NTPC OpenID
活動報名
模組控制台
進階區塊管理
站長工具箱(急救版)
網站地圖
Tad Tools 工具包
站長工具箱
行事曆
討論留言
嵌入區塊模組
快速登入
網站計數器
好站連結
最新消息
檔案下載
線上書籍
電子相簿
影音播放
常見問題
萬用表單
友站消息
社大學員
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
登入
登入
帳號
密碼
登入