# Taiwan地圖架設與git

> 需先建立git帳號並擁有此專案的權限才可以按照下方操作使用

[TOC]

## 專案位置
[https://github.com/whlshy/TaiwanMap](https://github.com/whlshy/TaiwanMap)

## 專案Demo頁面

[https://whlshy.github.io/TaiwanMap/](https://whlshy.github.io/TaiwanMap/)

## git clone專案

先複製git網址

在要下載的資料夾中打開CMD並輸入以下指令

git clone https://github.com/whlshy/TaiwanMap.git


## 安裝專案所需套件並啟動

以**VS Code**打開此專案並下`npm i`指令下載套件

## 更新與github專案最新版本

> 剛安裝完可以跳過此步驟，此步驟最好在<span style="color:red">每次開啟此專案時都下一次指令</span>

如果想確認目前是不是最新版本可以下`git pull`檢查更新 (如果別人有推新版本上去時可以下此指令同步更新)

git pull

### 啟動專案

npm run start


## 編輯資料

資料存放位置在`./src/data/data.js`，可以通過修改此Object來新增表態資料，資料格式如下

{
    tag: "taiwan",
    place: "全國不分區立法委員",
    data: [{
      party: "民進黨",
      name: "范雲",
      number: 7,
      district: "",
      declare: true,
    }, ]
}


- tag：是台灣地圖的縣市英文代稱
- place：是各縣市的名稱
- data：縣市內的候選人資料狀態

data陣列中的Object說明：
| 欄位 | 說明 |
| -------- | -------- |
| party | 政黨 (string) |
| name | 姓名 (string) |
| number | 選號 (number) |
| declare | 表態狀態 (true/false) |

## 發佈到github頁面

更新完資料或修改專案後需要打包前端並發佈到github

### 打包專案

在cmd下`npm run web`來打包此專案到`./docs`資料夾：

npm run web


### 把更新的專案推到Github發布 (git)

利用VS Code的介面功能就能簡單操作git發佈到Github

選擇git的圖示，並打下此次更新的內容

Yes

再選擇**Sync Changes**就可以推到Github上了

成功後會顯示git的commit內容，之後就等待Demo頁面更新即可

### Demo頁面設定

> 此專案已經設定好了，這裡只是教學而已

進入專案的Setting -> Pages

在Build and deployment -> Branch中選擇"main"、"/docs"並按下save後就會自動去生成頁面了