HelloSanta at 中央大學 一天Workshop

1. 只要⼀一天？
學會⽤用Drupal打造⾼高彈性網站
HelloSanta
https://www.hellosanta.com.tw/
Victor Yang
2018/8/6

2. About HelloSanta
公司成立於2011年年8⽉月
公司團隊共12⼈人
專精RWD響應式網站設計製作
專精於Drupal網站製作/開發
中國科技⼤大學建教合作
政治⼤大學電算中⼼心網站製作
專業DRUPAL技術講師
協助DRUPAL在台灣的發展

3. about us
講者 楊宗翰 Victor
聖誕老⼈人技術長
Drupal 網站開發/模組開發
Drupal Taiwan現任站長
2012年年以Drupal為公司的核⼼心技術
2014/15/16 DrupalCamp⼯工作團隊
2016/2017 中國科技⼤大學講師
2017 政治⼤大學講師
⾄至今製作超過200個Drupal網站，範疇涉略略各式平台、
政府機關、雜誌、⾳音樂、遊戲、醫美、設計等產業。

4. 基礎認知
了了解Drupal是什什麼？
為何要選Drupal？
誰在⽤用Drupal

5. What’s Drupal?

6. 在2000，由於想要分享有趣的新聞、⽂文章、晚上要吃些什什麼，因此⽽而建立⼀一個內容管理理系統
這後來來演變成為Drupal內容管理理系統

7. 「Make Something Amazing, For Everyone」
– Drupal

8. ⼀一套製作網站與應⽤用程式的內容管理理系統

9. 2018 Survey

10. 2018 builtwidth survey data
https://trends.builtwith.com/cms/Drupal

11. ⾄至今全球超過百萬個網站是使⽤用Drupal來來
製作
全球流量量前10K當中，有約11%的網站是使
⽤用Drupal來來製作

12. Why Drupal?

13. Why Drupal?
簡單管理理內容、良好效能、優質的安全性、極⼤大彈性
GPL授權、免費、易易使⽤用、任何⼈人都可以下載、使⽤用、分享
龐⼤大社群，創造更更多可能。全世界有超過⼀一百萬個⼯工程師、設計師、訓
練師...

14. Drupal Features
穩定性與彈性
數以萬計的模組隨裝隨⽤用，應有盡有。
時間花在⼑刀⼝口上，簡單網站到複雜客製化網站開發都很⽅方便便。

15. 誰在⽤用Drupal？

16. pinterest

17. weather.com

18. https://www.mlssoccer.com/

19. ⽇日本遊學打⼯工

20. 政⼤大第⼆二區網中⼼心

21. ⽊木棉花動漫代理理商

22. Ready Start？

23. picture from https://artetecha.com/drupal7-select-all-nodes-that-are-children-in-a-book-and-whose-root-parent-is-of-a-specific-type/2013/09/09/

24. 安裝Drupal
https://goo.gl/4Kvn2X

25. 安裝環境
Windows好⽤用的軟體
XAMPP
AppServ
WampServer
Acquia Dev Desktop

26. 安裝環境
Mac好⽤用的軟體
MAMP
https://www.mamp.info/en/
Acquia Dev Desktop
https://dev.acquia.com/downloads

27. 基本架構觀念念建立

28. 建立網站就像建立⼀一棟房⼦子⼀一樣

29. 流程
建築師 設計師 入住
結構層⾯面問題
樓樓層？
⼀一樓樓幾⼾戶？
每⼀一⼾戶配置？
裝潢外觀問題
設計/特效/體驗
開始入住

30. Drupal 基本介紹
內容 Content - 開始入住
舉凡各種類型的⽂文章、內容都在這個地⽅方可以找到
架構 Structure - 建築師
⽂文章結構、分類結構、區塊配置、選單結構
外觀 Appearance - 設計師
網站的佈景主題，也就是外觀的呈現

31. Drupal基本介紹
會員 People - 權限
所有網站的會員資料、權限、⾓角⾊色
模組 Modules - 好⽤用⼯工具
模組就好比APP⼀一樣。好模組可以節省我們開發時間
設定 Configuration - 全域設定
語⾔言、網站名稱、Email...
報告 Reports - 監控資料
系統狀狀態、安全性更更新、瀏覽次數、⽇日誌

32. 主題：就來來做⼀一個新聞網站吧

33. 1st Step 結構⾯面
重要觀念念 何謂Entity？
可以新增欄欄位
Entity之間可以互相關聯聯
Entity可以管理理欄欄位&管理理顯⽰示

34. 1st Step 結構⾯面
每⼀一篇新聞需具備什什麼？
範例例：http://play.nownews.com/archives/260723

35. 1st Step 結構⾯面
每⼀一篇新聞需具備什什麼？
標題/發⽂文⽇日期/作者/分類/Tag/內容/社群分享/圖片
建立“新聞”⽂文章類型（架構）
建立“新聞分類” （架構）

36. Structure -> Content Types -> Add content type

37. Structure -> Content Types -> Add content type

38. Structure -> Content Types -> News -> Manage fields

39. 建立個 5 篇 新聞吧

40. Step2 Design
重要觀念念 ⼈人是視覺性動物，所以設計要？
要美觀？
要好看？
要與眾不同？
Example：可以以挑衣服為例例

42. 「女⼈人衣櫥永遠少⼀一件衣服。」
– 無名⽒氏

43. Step2 Design
重點應該是
網⾴頁外觀要像挑衣服⼀一樣，不是⼀一套版，⽽而是很多套
衣服可以挑現成的，要可以試⽤用，網⾴頁外觀也要
衣服可以訂做，網⾴頁外觀也要可以訂做

44. Step2 Design
挑選免費的佈景主題：
https://www.drupal.org/project/project_theme
挑選付費的佈景主題
https://themeforest.net/category/cms-themes/drupal

47. Appearance -> Install new Theme

48. Step2 Design
請安裝以下Theme為例例
https://www.drupal.org/project/bootstrap_business

49. Step2 Design
若若你想要訂做⼀一套客製化的模板
Zen https://www.drupal.org/project/zen
Bootstrap https://www.drupal.org/project/bootstrap

50. Enhance All Function

51. 模組 Module
Drupal 強⼤大的原因
數以萬計的模組
全世界有超過⼀一百萬的⼯工程師、設計師、訓練師
程式邏輯零死⾓角
著重設定 ⽽而非 開發
開發程式著重整合、短時間開發⼤大功能

52. 功能1: 網站中⽂文化
Drupal 內建 Locale 模組

53. 功能2: 社群分享
前往Drupal官網 下載 Addthis 模組

54. 功能3: ⽂文章編輯器
前往Drupal官網 下載 CKeditor 模組

55. Extra功能4
Views 整合應⽤用
前往Drupal官網 下載 Views 模組

56. Q & A

57. Thank you