使用hackmd來製作團契課表網頁分享

--- title: 使用hackmd來製作團契課表網頁分享 tags: demo_note description: 社青一起來hackmd!! --- # :t-rex: 深入淺出網頁課表 :palm_tree: * 用筆記軟體快速升成課表網頁 * HackMD * 以此為例 * Google doc * Notion * 或其他筆記軟體都很適合 * 看完加練習大概半個小時:clock330: * 有什麼問題可聯絡小弟予以協助:blush: * email: `jimmatw@gmail.com ` ## :sauropod: 網頁課表解決的問題 * 方便宣傳 * 不侷限於Line上群組的分享 * 只要有網址就可以分享 * 可客製化網址:heart_eyes: * 不再需要紙本 * 檔案分享永續 * line上會過期 * 無法讀取過期檔案，僅可瀏覽縮圖 * 洗板消失:scream: * 換手機或登入新裝置，舊資料會消失 * 課表動態更新 * 不會有過期資料 * 臨時換課即時更新 * 資料集中 * 契員不疲於尋找群組的資訊:dizzy_face: * 縮減發文資訊量 * 避免洗版，提升團契的專注力 * 相關檔案連結可放在課表網站 * line訊息太多不利閱讀 ## :ant: 團契使用hackmd的範例 * [簡易的團契課表範本](https://hackmd.io/@tjc/demo_web/edit?both) * [松山社青團契課表](https://hackmd.io/@tjc/fellowship/edit?both) * [團契上課的即時筆記](https://hackmd.io/@jimmyma/BJLDUJgnH/edit?both) ## :whale: hackmd是什麼？ * hackmd是一個線上編輯的筆記網站 * 快速生成一個無廣告的網站:boom: * 用筆記生成課表網頁，即時分享給契員 * 友善的編輯頁面 * 使用markdown語法標籤做快速排版 * markdown會再介紹 * 學習`容易`:exclamation:，幾分鐘可快速上手 * 免費使用，只有增加筆記團隊成員人數上限要收費 ## :owl: hackmd 使用教學 1. 進入[hackmd網站](https://www.hackmd.io)註冊帳號 2. 點選<a class="btn btn-success">Create new note</a>建立第一筆筆記做練習 * 編輯器左上方有三個圖示 * 為編輯模式 * 為預覽模式 * 會顯示一半編輯一半預覽 * 可方便即時看到編輯結果 ![](https://i.imgur.com/NWCpg61.png) * 右上角 圖示可分享連結 * COPY後得網頁的真正連結 * 可自訂連結，還有更想系的客製方式 ![](https://i.imgur.com/wbWqmIr.png) * 更詳細文檔 [HackMD 使用教學](https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw) ## :penguin: markdown 教學 * 一種用`! [] () # : | -`組成的標籤排版語法 * 可以快速把文字轉成網頁排版 * 以下會有原始碼與顯示結果作範例對照 * 建議開一個新的hackmd貼上做練習 * 編輯器上方有輔助語法輸入參考 ![](https://i.imgur.com/0PHMYls.png) * [更多markdown文檔](https://markdown.tw/) --- ### 標題 * 語法為`# 標題名稱`，很簡單吧:tada: * 越多#表示越小的標題 * 如兩個#: `## 標題名稱` 為小一點的標題 * 越多#越小以此類推 * 以下為範例對照: ``` # 一個#的標題名稱 ## 兩個#的標題名稱 ### 三個#標題名稱 #### 四個#標題名稱 ##### 五個#標題名稱 ``` # 一個#的標題名稱 ## 兩個#的標題名稱 ### 三個#標題名稱 #### 四個#標題名稱 ##### 五個#標題名稱 --- ### 清單 * 語法為`* 內容` * 功能是把資訊明確分行分段 * 如果`*`前面多一段空格會變內縮的清單 * <- 像我這樣就是就是 * <- 還有這樣 * 越多空格會內縮越多 * 以下為範例對照: ``` * 每周三晚上 * 線上直播8:30開始 * 實體聚會於台北教會19:30~20:30 * 可以提早來喔 * 大概6:30 * 報名聯絡契長 * 加入Youtube頻道 * 加入Facebook粉絲專頁 ``` * 每周三晚上 * 線上直播8:30開始 * 實體聚會於台北教會19:30~20:30 * 可以提早來喔 * 大概6:30 * 報名聯絡契長 * 加入Youtube頻道 * 加入Facebook粉絲專頁 --- ### 表格 * 表格語法為`|`和`-----|` * `|`用來區別表格的行內容 * `-----|`用來分隔標題和內容 * 表格有幾行，每一列的資料就有幾個`|`和`-----|` * `-----|`中的`-`可以是任意數量，如`---|` * 以下為範例對照 ``` 日期|崇拜主題|講員 -----|-----|-----| 11/28 |歌林多前書1 | 萌澤 11/30 |歌林多前書2 | 萌澤日期|崇拜主題|講員|詩誦 -----|-----|-----|-----| 12/26 |歌林多前書3 | 萌澤 | OO 12/28 |歌林多前書4 | 萌澤 | XX 12/30 |歌林多前書5 | 萌澤 | @@ ``` 日期|崇拜主題|講員 -----|-----|-----| 11/28 |歌林多前書1 | 萌澤 11/30 |歌林多前書2 | 萌澤日期|崇拜主題|講員|詩誦 -----|-----|-----|-----| 12/26 |歌林多前書3 | 萌澤 | OO 12/28 |歌林多前書4 | 萌澤 | XX 12/30 |歌林多前書5 | 萌澤 | @@ --- ### 圖片 * 語法為`![](圖片網址)` * `[]`裡面不用打字 * 圖片可用編輯器上方的 (Isert image)的功能上傳，自動產生imgur圖片網址 * 以下為範例 ``` ![](https://i.imgur.com/iGHnj1x.jpg) ``` ![](https://i.imgur.com/iGHnj1x.jpg) --- ### 超連結 * 語法為`[名稱](網址)` * 使用可把PDF或word檔案放到雲端硬碟，再用連結分享 * 以下為範例分享 ``` [報名表單連結](https://forms.gle/QUy5GmoUfkAgDrrr6) [PDF公文](https://drive.google.com/file/d/1yPcgsJEZRr-blLmHcmhB5KWHbEEmwF9b/view?usp=sharing) ``` [報名表單連結](https://forms.gle/QUy5GmoUfkAgDrrr6) [PDF公文](https://drive.google.com/file/d/1yPcgsJEZRr-blLmHcmhB5KWHbEEmwF9b/view?usp=sharing) ### 不同顏色的區塊通知 * 語法為 ``` :::顏色型態內容 ::: ``` * 顏色型態有四種 * info 藍色 * danger 紅色 * success 綠色 * warning 黃色 * 還有一種型態`spoiler`為隱藏，點擊才能看到 * 範例如下 ``` :::info :bulb:此網頁會即時更新 ::: :::danger 手機右滑看表格完整內容 :point_right: ::: :::success 我們禱告神，願神讓大家`Spare One Night For Jesus` ::: :::warning 溫馨提醒:rose: ::: :::spoiler 點我看安排表! 以下為安排表 ![](https://i.imgur.com/iGHnj1x.jpg) ::: ``` :::info :bulb:此網頁會即時更新 ::: :::danger 手機右滑看表格完整內容 :point_right: ::: :::success 我們禱告神，願神讓大家`Spare One Night For Jesus` ::: :::warning 溫馨提醒:rose: ::: :::spoiler 點我看安排表! 以下為安排表 ![](https://i.imgur.com/iGHnj1x.jpg) ::: --- ### 文字顯示 * 語法為以下 ``` 一般字體 **粗體** *斜體* ~~被刪除了~~ `高亮` 3個` 一堆區塊文字，放在這裡面排版會比較好看 3個` ``` 一般字體 **粗體** *斜體* ~~被刪除了~~ `高亮` ``` 一堆區塊文字，放在這裡面排版會比較好看 ``` --- ### emoji * 語法為`:emoji:` * 參考[emoji範例](https://github.com/ikatyang/emoji-cheat-sheet)找可用語法 * 裡面看到的emoji可能跟hackmd顯示的不一樣 * 以下為範例: ``` :smiley: :grin: :heart: 大家很:+1: :raised_hands: :clap: :raising_hand: 我願意 :eyes: :sheep: :rose: :alarm_clock: :house_with_garden: ``` :smiley: :grin: :heart: 大家很:+1: :raised_hands: :clap: :raising_hand: 我願意 :eyes: :sheep: :rose: :alarm_clock: :house_with_garden: --- ### 文字圖片icon * 語法為 `` * 把icon名稱替換成連結中的 * 這裡語法是網頁語法，不是markdown * 如果用網頁語法可做出更多效果 * 所有樣式參考[連結](https://fontawesome.com/v4.7.0/icons/) * [icon效果](https://fontawesome.com/v4.7.0/examples/#animated) * 以下為範例 ``` 你的信仰需要充電了嗎 109/10/11 搜尋社青團契 持續下載 更新中... ``` 你的信仰需要充電了嗎 109/10/11 搜尋社青團契 持續下載 更新中...