20170616

1. 線上工具《Hackmd》實作課
2017年6月16日 @ 303會議室

2. 2 hr

3. 讓每個人學會使用「hackmd」
以不寫程式為前提

4. hackmd做什麼用1 網頁 2 電子書

5. 大綱
•Part 1 先看懂「介面」！
•Part 2 動手做「功能」！
•Part 3 特殊模式「電子書」！

6. 開發者是台灣人！

7. 請先建立「訪客筆記」

8. Part 1
先看懂「介面」!

9. hackmd介面長這樣
操作模式 / 發表模式 / 權限模式

10. 操作模式
純編輯 / 雙欄位 / 純檢視

11. 權限模式
共六種模式
多人
編輯
自己
編輯
要登入才可看
要登入才可看

12. 權限模式
共六種模式
任何人
都可編輯
要登入
才可編輯
只有建立者
可編輯
任何人都可看
要登入才可看 --
只有建立者可看 -- --

13. 發表模式
公開給任何人看，乾淨的頁面 / 按鉛筆可切回編輯模式

14. hackmd介面長這樣
操作模式 / 發表模式 / 權限模式

15. 跟同事一起編輯中
= 選Editable

16. 當正式網頁文件釋出
= 選Locked + 發表
跟同事一起編輯中
= 選Editable

17. Part 2
動手做「功能」!

18. 功能清單
• 基礎功能x10
• 進階功能x5

19. 基礎功能
• (1) 列點
• (2) 待辦列點
• (3) 粗體
• (4) 斜體
• (5) 底線
• (6) 引用
• (7) 水平分隔線
• (8) 警告區塊
• (9) 超連結
• (10) 標題

20. 列點
「-」加上一個空格

21. 待辦列點
「-」加上一個空格「[」加上一個空格「]」

22. 粗體
在要加粗體的文字前後加上「**」

23. 斜體
在要加粗體的文字前後加上「*」

24. 底線
在要加粗體的文字前後加上「++」

25. 引用
文字前面加「>」，>數目越多會有越多條引用線

26. 水平分隔線
---

27. 警告區塊
「:::」加上「info」加上「:::」

28. 超連結
[我是超連結](http://mohw.gov.tw)

29. 標題
「#」加上一個空格，#個數越多標題越小

30. 進階功能
• (1) 插入slideshare
• (2) 插入youtube
• (3) 插入圖片
• (4) 插入表格
• (5) 插入表情符號

31. 插入slideshare
{%slideshare 這裡放上slideshare的ID %}

32. 插入youtube
{%youtube 這裡放上youtube的ID %}

33. 插入圖片
請點畫面上方的「照相機符號」即可上傳

34. 插入表格
|表格|表格|

35. 插入表情符號
先打一個「:」就會出現選項 / 更多符號請看符號表
https://www.webpagefx.com/tools/emoji-cheat-sheet

36. 進階功能
• (1) 插入slideshare
• (2) 插入youtube
• (3) 插入圖片
• (4) 插入表格
• (5) 插入表情符號

37. Part 2.5
練習時間

38. 請小組分工完成QA
• STEP 1：請先決定頁面分工
• STEP 2：一個QA，製作一頁hackmd
• STEP 3：完成後貼上「發表」網址

39. Part 3
電子書模式

40. Book mode三步驟
• STEP 1：每一頁製作一頁hackmd！
• STEP 2：製作「目錄」hackmd！
• STEP 3：轉換成book mode！

41. STEP 1：每頁製作一頁hackmd
剛才已完成

42. STEP 2：製作「目錄」hackmd
## 加上分類 / 用列點放上每一頁hackmd

43. STEP 3：轉換成book mode！
選單 > book mode

44. STEP 3：轉換成book mode！
選單 > book mode

45. 10min
每人製作一份book mode

46. 補充：側欄功能
搜尋標題 / 編輯目錄 / 伸縮側欄
hackmd外，任何網址皆可放
可當hackfoldr用

47. 7/7
NPA與大家相見！