- 安裝 git,並設定 ssh
- 安裝 node, npm: 在這裡選擇你的作業系統,下載並安裝。node 和 npm 會一起裝好。node是跑 Javascript 的直譯器,npm 則是一個與它搭配的套件管理工具
- 安裝 yarn:在這裡選擇你的作業系統,下載並安裝。yarn 是由 facebook 開發的套件管理工具,目的在讓 npm 變得效能更好
- 先 fork 一份這個專案
- 改一下專案名稱
- 複製下來(記得用 ssh 版本的):
# 打開你的 terminal (OSX, Linux),或是 cmd (Windows)
# 用 cd 指令到達你的目標資料夾
git clone git@github.com:{your account}/{your repo name}.git
# 一樣在你的 terminal 或 cmd
cd {your repo name} # 進到你剛剛 clone 下來的 repo 裡面
yarn
輸入底下指令,便會看到一個網頁跳出來
yarn start
這個框架使用 facebook 開發的 create-react-app
,有提供 Hot Reload 的功能,也就是說當你改動程式碼並儲存,畫面會自動刷新。
請看src/App.js
。這個框架使用的開發套件是 React
,一種在 Javascript 裡寫 HTML 的體系。一些基本的教學可以看這裡或這裡
開發完成後,可以使用 github 提供 GitHub Pages 的服務,簡單架設一個靜態網頁。將這行改成你的網址(https://{your acount}.github.io/{your repo name}/
),接著在 terminal 輸入以下指令:
yarn deploy
經過幾分鐘,開發好的網站就會架設在 https://{your acount}.github.io/{your repo name}/
- 一些基本 component:
Paragraph
提供文字的區域,MusicTrigger
會觸發音效,等等 - 簡單多線劇情: 請參考
src/index.js
- 希望達到某些效果,但還沒有相應的 component,請直接到這裡 開一個 issue 告知我,我審核後會進行開發。
- 儘管提供了一些特效,但請注意不要過度使用。簡化閱讀流程,但在必要的時候刺激你的讀者更進一步陷下去。