日期：2023年 11月 11日
標籤： GitHub Gist Web Markdown Medium HuggingFace Responsive Web Design(RWD)
摘要：資訊筆記
應用所需：1. 撰寫Markdown文件
2. 註冊 Gist.Github 存放Markdwon文件
3. 註冊 Medium.com 載入Markdown文件
解決問題：1. 快速建立響應式設計的RWD網頁，提供瀏覽
2. 利用Medium免費服務，不用自己架設伺服器
基本介紹：本篇分為2大部分。
第一部分：前言 & Gist.Github
第二部分：整合Medium
第一部分：前言 & Gist.Github
Step 1：前言 - 問題產生
某次在整理劇本殺的資料時，一如往常用Google文件編輯
突然想到現在人大多都用手機瀏覽，因此發現在手機上瀏覽並不好
因此有必要想出解決方案，在不增加成本的情況下，讓使用者有更好的瀏覽體驗
下圖是開啟【Google文件共用】：
下圖是開啟【Google文件發布網路】：
Step 2：前言 - Markdown
以下是Markdonw文檔，大意是：整理成某一天劇本殺可以4個人玩的劇本
| 劇本名稱 | 類型 | 價格 | 時間 | 地點 | 介紹連結 |
| ---------------- | ------------------- | ------ | ----- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| 一座城 | 沉浸/現代 | 600/人 | 19:00 | <a href="https://maps.app.goo.gl/jhUWb62mAJgnzFzn9">拉普星球-松山館</a> | <a href="https://mylarpplanet.simplybook.asia/v2/#book/location/5/category/10/count/1/provider/any/">介紹</a> |
| 窺鏡 | 懸疑/驚悚/本格/還原 | 650/人 | 19:00 | <a href="https://maps.app.goo.gl/jhUWb62mAJgnzFzn9">拉普星球-松山館</a> | <a href="https://mylarpplanet.simplybook.asia/v2/#book/location/5/category/10/count/1/provider/any/">介紹</a> |
| 送你一朵小花花 2 | 情感/還原 | 590/人 | 19:30 | <a href="https://maps.app.goo.gl/Brv2GKKeG8utQYTBA">410 檔案室</a> | <a href="https://www.410larp.com.tw/scriptcontent/%E9%80%81%E4%BD%A0%E4%B8%80%E6%9C%B5%E5%B0%8F%E8%8A%B1%E8%8A%B12">介紹</a> |
| 望雀 | 推理/武俠 | 500/人 | 19:30 | <a href="https://maps.app.goo.gl/gx2sLXcHKpNs1c7M9">謀殺衛斯理-明曜館</a> | <a href="https://www.mwlarp.com/scenario/%E6%9C%9B%E9%9B%80%E5%B9%B3%E6%97%A5%E9%99%90%E5%AE%9A">介紹</a> |
| 雨夜感染者 | 機制/情感 | 750/人 | 19:00 | <details><summary>展開</summary><a href="https://maps.app.goo.gl/Q5gfxNKcT2saDdoDA">玩硬劇本遊戲館 </a></details> | <a href="https://www.mwlarp.com/scenario/playhard-yuyeganranzhe">介紹</a> |
Step 3：Gist.Github - 使用方法
如果有註冊Github，那麼可以從自己的Github上輸入gist. 可以轉到gist頁面。
以下是我的Github
https://github.com/gotoa1234
在網址列上添加gist. 如下
https://gist.github.com/gotoa1234
Step 4：Gist.Github - 介紹
Gist 主要用於分享和託管小型代碼片段、文件、筆記等。
Gist 是一種輕量級的 Git 倉庫，可以包含單一文件或多個文件。
| 優點 | 說明 |
|---|---|
| 1. 輕量級 | 相較於Git，創建一個新的文檔流程簡單，權限只分公開、私有。可以在線上直接編輯檔案。 |
| 2. 方便分享 | 有提供介面，可以快速查看，並且分享代碼、文件 |
| 3. 版本控制 | 任何編輯都會在版本控制下，可追蹤 |
| 4. 嵌入功能 | 可以產生Script嵌入在任何地方 |
Step 5：Gist.Github - 創建-1
進入gist後，於右上角選擇 + 新建檔案
Step 6：Gist.Github - 創建-2
對應下圖，說明Gist 編輯文檔的幾個功能，這個檔案於4.時可以先創建設為Secret
1. 文檔表題名稱
2. 檔案的名稱，這邊若以.md 為副檔名，會產生Markdown檔案
3. 編輯文檔內容
4. 創建這個檔案，可以選擇Private 或 Public
Step 7：Gist.Github - 完成
創建完成後如為.md 檔案，會幫我們格式化顯示結果
Step 8：Gist.Github - 複製嵌入碼
請在下圖的位置複製嵌入碼，如果使用Embed會錯誤。
※2023/11月時在Medium使用，當時只能用以下的方法嵌入
正確的Medium用的崁入碼：
https://gist.github.com/gotoa1234/b610129d45a5531b2867b2e47287b116#file-gistfile1-md
第二部分：整合Medium
Step 1：Medium 介紹
Medium.com是一個在線寫作和閱讀平台，免費的用戶也可以在上面做創作分享
更進階的付費會員，可以無限制的閱讀別人文章
Step 2：Medium 建立文章-1
註冊的相當方便，登入自己的Google帳戶即可，故跳過註冊流程
登入後 -> 選擇右上角的 Write
Step 3：Medium 建立文章-2
打開後，在空白處選擇 + 會展示出此框
選擇黑框的部分
Step 4：Medium 建立文章-3
將第一部分Step 8. 中的Gist崁入代碼貼上
Step 5：Medium 建立文章-4
接著按下Enter就會出現相連結結果
Step 6：Medium 發布
如果都編輯好了，就進行發布
Step 7：Medium 連結
發布完成後，會產生檢視連結，我們可以將此貼上到手機上瀏覽
這是我們複製後的連結：
https://medium.com/@cap8825/larp-schedule-bff6f2d09500
Step 8：手機檢視-響應式
然後用手機檢視，可以發現相較於【Google doc檢視】，RWD的效果好了很多，不用用手一值往旁邊滑
