---
# System prepended metadata

title: Taiwan地圖 - 架設與git

---

# 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網址
![圖片](https://hackmd.io/_uploads/B1248whDT.png)

在要下載的資料夾中打開CMD並輸入以下指令
```shell
git clone https://github.com/whlshy/TaiwanMap.git
```
![圖片](https://hackmd.io/_uploads/rkTlDwhDp.png)

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

以**VS Code**打開此專案並下`npm i`指令下載套件
![圖片](https://hackmd.io/_uploads/S1Hpwvnw6.png)

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

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

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

### 啟動專案

```shell
npm run start
```
![圖片](https://hackmd.io/_uploads/Hk9v_w3v6.png)

## 編輯資料

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

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

![圖片](https://hackmd.io/_uploads/H1nF9v2Pa.png)


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

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

## 發佈到github頁面

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

### 打包專案

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

![圖片](https://hackmd.io/_uploads/ry4Pjv3vT.png)

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

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

選擇git的圖示，並打下此次更新的內容
![圖片](https://hackmd.io/_uploads/rk0r3vnv6.png)

Yes
![圖片](https://hackmd.io/_uploads/rJROhPnwp.png)

再選擇**Sync Changes**就可以推到Github上了
![圖片](https://hackmd.io/_uploads/SkZGTPhv6.png)

成功後會顯示git的commit內容，之後就等待Demo頁面更新即可
![圖片](https://hackmd.io/_uploads/H1u_6P2Pa.png)

### Demo頁面設定

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

進入專案的Setting -> Pages
![圖片](https://hackmd.io/_uploads/S1heRDhwp.png)

在Build and deployment -> Branch中選擇"main"、"/docs"並按下save後就會自動去生成頁面了
![圖片](https://hackmd.io/_uploads/HJZrAvhv6.png)
