Tad 教材網 - 線上書籍

:::

\[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
 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC|Noto+Serif+TC&display=swap" rel="stylesheet">
 <link href="https://schoolweb.tn.edu.tw/uploads/fonts/woff2.css" rel="stylesheet">
 ```
6. 套用網路字型：「佈景」→「額外設定」→「主要字型設定」，放第一個會優先使用 
 1. 思源黑體： `'Noto Sans TC', sans-serif `
 2. 思源宋體： `'Noto Serif TC', serif `
 3. 粉圓體： `jf-openhuninn `
 4. 王漢宗魏碑體： `HanWangWeBe `
 5. 可愛的日文字型： `Mamelon `（可能會有缺字）
7. 背景可使用不重複透明圖搭配底色，做出與眾不同的效果 
 1. 下載透明背景：<https://www.cleanpng.com/free/background.html>
 2. 將圖片縮小，以節省空間，加速傳輸：<https://tinypng.com/>
8. 滑動圖（1280x300）可利用原有的四張圖來做加工 
 1. 人像自動去背：<https://www.remove.bg/zh/upload>
 2. 線上影像處理：<https://www.photopea.com/>
 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. 上傳字型（不可超過10M）轉為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. 佈景中，可用的樣板標籤如下（灰色的部份是一定要用的部份）：
 
 <dl> <dd> <table cellpadding="2" cellspacing="0" class="table table-striped table-bordered table-hover" width="100%"> <colgroup> <col width="62*"></col> <col width="194*"></col> </colgroup> <thead> <tr> <th style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.05cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm" width="24%">套用標籤

</th> <th style="border: 1px solid #000000; padding: 0.05cm" width="76%">標籤作用

</th> </tr> </thead> <tbody> <tr> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm" width="24%">{TNP\_TITLE}

</td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0.05cm" width="76%">電子報的主題，用法：<title>{TNP\_TITLE}</title>

</td> </tr> <tr> <td bgcolor="#dddddd" style="background: #dddddd" width="24%">{TNP\_CODE}

</td> <td bgcolor="#dddddd" style="background: #dddddd" width="76%">網頁的編碼，用法：<meta http-equiv="content-type" content="text/html; charset={TNP\_CODE}" />

</td> </tr> <tr> <td bgcolor="#dddddd" style="background: #dddddd" width="24%">{TNP\_THEME}

</td> <td bgcolor="#dddddd" style="background: #dddddd" width="76%">佈景主題的路徑，若有圖片，請在圖片前面加上{TNP\_THEME}標籤。

如：<link rel="stylesheet" type="text/css" href="{TNP\_THEME}style.css" />

</td> </tr> <tr> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm" width="24%">{TNP\_CSS}

</td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0.05cm" width="76%">預設的CSS設定連結（<head> </head> 中貼上就好）

</td> </tr> <tr> <td bgcolor="#dddddd" style="background: #dddddd" width="24%">{TNP\_CONTENT}

</td> <td bgcolor="#dddddd" style="background: #dddddd" width="76%">電子報主內容

</td> <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0.05cm" width="76%">頁尾（若覺得段落間距太大，可用shift+Enter加入斷行）

</td> </tr> </tbody> </table>

</dd> </dl>### 十一、電子報相關區塊

1. 「訂閱 / 取消電子報」：讓用戶訂閱電子報的界面。
2. 「電子報一覽」：列出目前最新N則的電子報連結。標題

:::