線上書籍

Home

[1091] XOOPS輕鬆架

一、申請Linux主機空間
  1. 請至 http://stu.tncomu.tn.edu.tw 申請空間。

    1. 學生練習主機為Linux主機,僅社大學員可以申請(FTP及MySQL帳號)。

    2. 使用期限為本學期,學期結束後,可能隨時會清除舊資料,故請自行備份。

    3. 申請後,您的網站網址為:「http://stu.tncomu.tn.edu.tw/~帳號」

  2. 資料庫和FTP的帳號、密碼是一樣的!

二、在Linux下安裝XOOPS
  1. https://campus-xoops.tn.edu.tw/modules/tadnews/index.php?nsn=17

  2. 下載XOOPS 輕鬆架 20200312 架站安裝導引檔(XOOPS 2.5.11 Beta)

  3. 解壓後,將 index.html 、 install.php 及 phpseclib 目錄 上傳到網頁目錄下

  4. 若無FTP軟體,請下載 FileZilla 檔案傳輸軟體 3.10.0.2 版

  5. 開瀏覽器,執行「 http://stu.tncomu.tn.edu.tw/~帳號 」 即可自動安裝。

三、XOOPS後台「群組」與「會員」管理
  1. 有權限需求才需要設定群組。

  2. 每人可同時隸屬多個群組,權限為所有隸屬群組的「集合」。

  3. 擁有「系統管理權限」者即為站長,換言之,除了管理員,任何人都不應該有「系統管理權限」。任何的「管理權限」都不應該開給會員或訪客。

  4. 「Tad Adm站長工具箱」務必開放使用權限給「訪客」,不然網站出問題會很難救。

  5. 模組和區塊的「使用權」應該開給所有全組(即會員及訪客)。

  6. 已註冊者,應至少要屬於「會員」群組。但「會員」群組不應該假設為特定對象。

  7. 有需要針對特定對象設定權限,請建立新的群組。

  8. 管理員可以從此處可直接建立新會員資料,亦可直接指定為管理員。

四、Tad News新聞模組基本用法
  1. 三大功能:發布新聞、自訂頁面、電子報

  2. 首次使用請先調整「偏好設定」:

    1. 「新聞圖片附檔寬度」可自行調大

    2. 多人管理時,請設定「可直接開設分類的群組」、「可使用置頂功能的群組」

    3. 可視情況關閉不必要的功能(pda.php及facebook留言簿建議關閉)

  3. 「後台管理」基本上暫先用不到後台,除非想要事先建好文章分類或設定權限

    1. 「文章管理」:管理所有新聞以及新聞分類,可作文章的批次處理和分類的權限設定。

    2. 「電子報管理」:設定、新增、寄送電子報用。

    3. 「自訂頁面」:類似「文章管理」只是針對「自訂頁面」部份。

    4. 「標籤管理」:管理標籤用,沒有用到的標籤始可刪除。

  4. 可直接到前台的「發布文章」進行文章發布即可。「進階設定」中的一些項目說明:

    1. 未到「發佈時間」,文章不會出現。超過「結束時間」文章自動下架,並不建議設。

    2. 「置頂」功能可至偏好設定調整設定,以限制文章置頂期限。

    3. 從權限也可以指定該文章可以開放給誰觀看,亦可用密碼來限制觀看對象。

    4. 「需簽收群組」若有設定,則代表該文章可以簽收。

    5. 「封面圖」是文章代表圖,主要用於區塊,亦可放在文章中當插圖。點了圖就上傳。

    6. 「附檔」可多檔上傳,圖片可直接瀏覽,會放在文末。「偏好設定」有相關設定。

五、CK Editor使用技巧
  1. 許多模組都有用到由 TadTools 工具箱模組提供的CKEditor 編輯器,大部分的功能自己測試應該就可以理解,底下就一些比較需要注意的功能進行說明:

    1. 插入圖片:可以直接上傳圖片,點擊「瀏覽伺服器端」即可 (勿用「上傳」,易出錯),一次可以上傳多張圖片,直接雙擊圖片便可插入圖片。win下不要用中文檔名。利用「對齊方向」的靠左對齊或靠右對齊,都可以做出文繞圖效果。

    2. 圖片建議套用圖片樣式:「樣式」→「自適應圖片」當圖片超出版面時會自動縮小。「自適應圖框」則是會再加上框線。

    3. 插入多媒體資源:只要貼上網址,就可以秀出影片或圖片等多媒體內容。

    4. 插入公式:可參考:http://www.study-area.org/tips/opentools/opentools/x521.html

    5. 插入表格:設定好橫列、直欄即可,可以在「進階」裡面的「樣式表類別」加入「 table table-striped table-bordered table-hover 」

    6. 加上連結:標記文字或圖片,點選連結圖示,並輸入連結即可。也可點擊「瀏覽伺服器端」,然後上傳文件檔案,當作附檔下載來用。

    7. 加入程式碼:選擇適當程式類型即可,若要改變呈現風格,請至tadtools偏好設定的「設定 SyntaxHighlighter 佈景」及「選擇 SyntaxHighlighter 版本」設定即可。此功能目前僅於tadnews和tad_book3中有效。

    8. 清除文字格式:標記文字,點按該圖示以清除格式,可回到純文字狀態。

    9. 套用版面:可以輕鬆做出兩欄、三欄的版面,並支援bootstrap自適應。

    10. 插入fontawsome圖示:需注意佈景有無支援fontawsome。

    11. 內建多種bootstrap樣式,可隨時套用之,但不同情境可能會出現不同的樣式項目。

六、新聞模組的RSS設定
  1. 請將 backend.php 複製到XOOPS的根目錄(和 mainfile.php 同一層即可)

  2. 或是直接連結: http://網址/modules/tadnews/rss.php

  3. 若只要某分類的RSS: http://網址/modules/tadnews/rss.php?ncsn=分類編號

七、新聞相關區塊
  1. 「文章類別」:可秀出新聞所有分類

  2. 「本站最新消息」:以標題+摘要(同新聞模組首頁)的方式呈現新聞。

  3. 「最新回應」:顯示新聞模組的評論。

  4. 「分類新聞區塊」:可選擇分類,並秀出該分類N則新聞。

  5. 「焦點新聞」:可以指定某特別重要文章以呈現其內容。

  6. 「自選文章」:可以輸入文章編號,讓該區塊列出指定的文章標題連結。

  7. 「條列式消息」:以標題為主的方式呈現新聞。

  8. 「表格式消息」:以表格的的方式呈現新聞,可自訂要呈現哪些欄位。

  9. 「滑動新聞」:利用封面圖製成滑動新聞看板,這是固定寬度的。

  10. 「自動縮放的滑動新聞」:利用封面圖製成滑動新聞看板,可適應於各種大小的裝置。

  11. 「跑馬燈區塊」:以跑馬燈方式呈現的新聞區塊

  12. 「圖文集區塊」:會呈現封面圖的新聞區塊,較為活潑

  13. 「頁籤新聞區塊」:將新聞分類做成頁籤,可呈現不同分類的新聞標題。

  14. 「標籤新聞區塊」:將新聞標籤做成頁籤,可呈現不同標籤的新聞標題。

八、Tad Themes 佈景輕鬆設定
  1. 僅支援 XOOPS輕鬆架裡面的佈景!(也就是站長工具箱中可以下載的佈景),且跟tadtools有相依性,故更新時,若是 tadtools也有新版本也務必一起更新。

  2. 現階段而言school2019是最佳選擇,BootStrap4架構,功能多,彈性大。

  3. tad_themes三大功能:調整外觀、設定導覽列、製作Logo圖片

  4. 到後台設定「偏好設定」,可決定前台導覽列是否要顯示主選單。

    1. 此處顯示的主選單無法設定權限,亦無法修改其內容,一律以後台「模組」的設定為主

    2. 未來若有使用OpenID登入時,亦可在此決定是否要在導覽列顯示登入選項。

九、設定網站外觀
  1. 「前台→管理選單→佈景」可快速進入佈景管理界面

  2. 設定「基本版面」決定網站大致架構(二欄或三欄)

    1. BootStrap是個自適應框架,讓網站在電腦、平板、手機都可以自動調整成適當的呈現方式,其概念是將畫面切成12欄,故寬度均用幾欄設定,而非絕對寬度。

    2. 「版面類型」決定好版型,左中右欄位在BootStrap4中可以使用auto(也就是均分)

    3. 「額外設定」表示是該佈景特有的設定,別的佈景不見得會有。

    4. 「文字大小」建議設成「1em」,若用「px」或「pt」等單位,將無法符合無障礙規範

  3. 設定「背景」:若是大圖,建議使用不重複選項。

  4. 設定「滑動圖片」:不想要可以將「滑動區域寬度」設為0

    1. 裁好N張圖片,大小可設定為1280x300,非強制,其實只要圖片都同樣大小即可。

    2. 若無圖片可至https://pixabay.com/下載合法使用的圖片。

    3. 裁圖可用FastStone Image Viewer,點兩下圖片,滑鼠往左,選「裁剪板」即可。

    4. 若想要縮小圖片體積可利用 https://tinypng.com/ 服務來縮小之。

    5. 點選「瀏覽」,同時圈選N張圖將之上傳,並刪掉原有圖片。上傳後,可拉動排序。

    6. 若換圖後沒看到新圖,試著用「Ctrl+F5」清除瀏覽器快取並重新整理試試。

    7. 在說明框中輸入 [url]http://網址[/url] 可替圖片加上連結,用[url_blank]http://網址[/url_blank] 則可將連結開在新視窗。

  5. 設定「Logo圖」:即網站主標題

    1. logo只會縮小(超出版面時),但不會放大。而首頁滑動圖片會自動縮放。

    2. logo位置有兩種,一種是在滑動圖上方,亦可以放在滑動圖中,故建議一律做成透明底圖png格式的學校logo圖。大小不拘,別超過滑動圖高度即可。並利用上下左右調整其適當位置。

    3. 若是沒有適當工具可以做圖,可用內建的「Logo設計」來產生logo圖。

    4. 可搭配Logo背景,做出較花俏的設計。推薦網站:https://www.cleanpng.com/

    5. 「是否使用自動配對」會自動偵測網址是否有「自動配對變數名稱」,若有會根據其值來自動載入對應之Logo圖。例如:教務處專屬頁面是「http://網址/modules/tadnews/page.php?ncsn=15」,那「自動配對變數名稱」可設為「ncsn」,然後做一張15.png的圖,放到「圖示放置路徑」中所設定的路徑下,一旦切到教務處頁面,Logo會自動變成教務處的Logo。

  6. 設定「區塊標題列」:主要是設定各區域的區塊外觀顯示,重點在於區塊標題部份

    1. 設定好一個區域後,可以勾選「套用到所有區域」以套用到所有位置。

    2. 這裡主要是設定區塊外觀及文字、背景,若是想要用圖片取代標題文字,或者插入圖片在標題旁邊,請善用tad_blocks「進階區塊管理模組」中的「區塊管理」工具。

    3. 向量圖示:http://emojione.com/

    4. 搜尋圖示:http://findicons.com

  7. 設定「導覽工具列」:這裡是設定前台導覽列的位置及外觀,內容請至「選單設定」中設定

    1. 選擇「上方鎖定」時會固定在上方,並一律加上陰影

    2. 若選項較多時,可以將「選項左右間距」調小一點

    3. 「選項底色上方色」和「選項底色下方色 」若不一樣,會變成漸層色。

  8. 設定「額外設定」:主要就是頁尾的設定

    1. 「顯示佈景變數資訊」是給開發者用的,一般不需要開

    2. 請根據頁尾內容多寡,自行調整「頁尾最低高度」、「頁尾文字內距」等設定

    3. 若有需要放入網頁的js(如Google的一些API),可以將引入語法放在「欲加入頁尾的CSS或JS語法」裡面。

十、設定選單
  1. 按下導覽列中的+圖示,即可快速到選單設定界面

  2. 「匯入主選單」可將現有主選單匯入,並自行增減內容或設定權限。

  3. 「匯入個模組編輯選項」則會自動找出各模組的編輯界面位置,方便使用者進行各種編輯。

  4. 每個選項均可上下拖曳排序,亦可拖曳設定階層。

  5. 編輯每個選項可以設定權限,亦可從「上傳項目專屬橫幅」設定專屬滑動圖。

  6. 「上傳項目圖示 」是給區塊用的,少用。

十一、Logo設計
  1. 此功能方便快速製作文字Logo圖,在手邊沒影像處理軟體時應急用。

  2. 做出的圖為png透明背景圖,可字型設定文字大小、顏色、外框、陰影等

  3. 可自行上傳字型檔,這裡上傳的字型會同時被使用在tad_blocks「進階區塊管理」→「區塊管理」下方的「區塊標題圖設定」中。

  4. 「產生圖片」僅是預覽,並不會儲存。按下「儲存」圖片才會儲存到主機,並留在下方預覽區。若同時勾選「存為Logo」則會存到logo指定路徑,可至「Logo設定」套用之。

十二、儲存佈景設定
  1. 若都設定好了,可至「管理佈景設定檔」輸入名稱並按「匯出當前佈景設定」,如此,便可將設定及圖片儲存下來,日後萬一又改壞了,可以直接恢復目前狀態。

  2. 若又有修改,在「匯出當前佈景設定」之前,先選擇原本名稱,即可將新的修改加入。

  3. 若設計得很漂亮,亦可將之下載,並分享給他人。

  4. 若有從別的地方取得他人佈景設定檔,可直接瀏覽匯入,並套用之。