---
title: README | tailwindcss.tw 翻譯工作 Git 簡易操作流程
tags: README, git
---
# README | tailwindcss.tw 翻譯工作 Git 簡易操作流程

## 先加入兔兔教

## 設定 git
1. 先申請 [github](https://github.com/) 帳號
2. 向可樂大申請加入 tailwindcss.tw 組織
3. 本機切換到要同步 git 的資料夾，將資料 clone 下來
* `git clone https://xxxxxxxxxxx`
* git: https://github.com/tailwindcss-tw/tailwindcss.com.git
:::info
可樂大：clone 下來之後就會預設 pull default branch 了
:::

## 作業流程
### 1. 取得 git 文件最新版本
`git pull origin tw`

### 2. 開個分支
`git checkout -b lang/branch_name`

:::info
* lang/ 前綴代表為翻譯文件
* branch_name 可自訂名稱，例如用自己的 github 帳號當名稱
:::
### 3. 進行翻譯
* 可樂大希望大家優先翻譯 `src\pages\doc\` 裡面的資料
* 為避免大家重複翻譯到同一篇，請先至 [github](https://github.com/) 建立 issue 註明正在翻譯的文章。==目前翻譯中的文章列表請參考 [github projects](https://github.com/tailwindcss-tw/tailwindcss.com/projects/2)==
* 翻譯時可參考 [官網](https://tailwindcss.com/) 及 [簡中版](https://www.tailwindcss.cn) 內文
* 專有名詞統一用詞：請依照兔子編 [Tailwind CSS 繁體中文技術文件](https://hackmd.io/NO8Gt-vxTS6CIpdegP236g)
* 中英文間半形空白原則，請參考 [中文文案排版指北](https://github.com/sparanoid/chinese-copywriting-guidelines)
#### 翻譯規範
* title, heading :
* 情形一、中文在前，原文加上括號做為參考，例:
`響應式設計 (RWD)`
https://tailwindcss.tw/docs/responsive-design
* 情形二、不用翻的就放英文，例如下例標題裡的 hover, focus：
`Hover, Focus 以及其他狀態`
https://tailwindcss.tw/docs/hover-focus-and-other-states
* 情形三、要翻的就放中文，例：
`函數與指令`
https://tailwindcss.tw/docs/functions-and-directives
:::info
兔兔補充：
屬於 css 原本功能的 是保留英文 (中文在後)；可是像核心概念區的、不是css 功能的 就中文在前。
:::
* 翻譯的原文需保留，將其註解並放在該句中文翻譯的上一行(段)
* 專有名詞的翻譯用詞參考：
* [laravel-taiwan 規範&專有名詞對照](https://github.com/laravel-taiwan/docs/wiki/規範＆專有名詞對照)
* [國家教育研究院](https://terms.naer.edu.tw)
* Responsive的敘述部份 請參考 [Backdrop Sepia](https://tailwindcss.tw/docs/backdrop-sepia) 的翻法
* 常見句子的公版：
* 原文：For more information about Tailwind's _____ , check out the _____ documentation.
* 譯文：更多有關 _____ 的資訊，可參考 _____ 文件。
* Resonsive 的 import (錯誤與正確的例子) :
* "you" 請翻譯成 "你"，而不是 "您"
:::info
* 可樂大: 想了一下，技術文件裡面用"你"好了，一來你比較平易近人，二來技術文件不需要有上下位等的關係，有特殊案例覺得用您比較好的話，再提出來大家討論。
:::

### 4. 翻譯完成後 將檔案推送回 git
#### (1) 將檔案加入 git 中
`git add 檔案名稱` // 可指定特定檔案
或
`git add . ` // 會一次加入所有變更過的檔案

#### (2) 撰寫 commit message
`git commit`
:::info
可樂：推薦使用 `npx git-cz` 代替
:::

##### commit message 範例
主要描述這個 commit 做了什麼事，例如修改 Home page：
`Update: HomePage`

#### ==(3) 在 rebase 之前先取得最新的 origin==
`git fetch origin`

#### ==(4) rebase 一定要記得做！==
`git rebase origin/tw`

此時線圖會長這樣 (lang/optimizingForProduction 是你開出來翻譯的分支)，只要該分支尾巴與 origin/tw 分支是接在一起的，就代表 rebase 是成功的

#### (5) 將結果 push 至 git
`git push`

:::info
可樂：
* 第一次執行應該會出現一行指令叫你打，類似：
`git push --set-upstream origin xxxxxxx` 照著打送出即可（這只有第一次要打，以後只要打 `git push` 即可）
* 如果同一個 branch 之前有 push 過而需要重新強制 push 的話可以使用 `git push -f`
通常容易發生在重新 rebase 之後
:::

補充可樂說的 `git push -f`:
* 有 `push` 過的 branch，`git push` 的時候，cli 會出現下方(圖一)的提示。
* (圖二)請看 remote 還有一支 `lang/optimizingForProduction`，這樣子情況會沒辦法 `git push`。

圖一

圖二

#### (5) 輸入 github 帳號密碼，輸入後便會完成 push
### 5. push 成功之後要上去 [github](https://github.com/) 建立 pull request
#### (1) 按下Pull Request 再按下new pull request


#### (2) 在 base repository 選 tailwindcss-tw


#### (3) 在 base 再選一次tw


#### (4) 右邊的 compare: 選擇你的分支 lang/xxxxx
#### (5) 按下create new pull request 就完成了

### 成功後，過不久就能在 [https://tailwindcss.tw](https://tailwindcss.tw) 看到成果囉 :smile:

:::info
### 【重要】接下來每次翻譯的步驟：
1. 切換到 tw
`git checkout tw`
2. 取得最新 tw
`git fetch origin`
`git pull`
3. ==刪除原先的本地分支 (如果想要用同名的分支開發)==
`git branch -d lang/****`
4. 從最新的 tw 開分支出來開發
`git checkout -b lang/****` (自己設的分支)
5. 重覆「[4. 翻譯完成後 將檔案推送回 git](#4-翻譯完成後-將檔案推送回-git)」的操作

### Remark: code review 後的修改
==PR後，如需修改。修改完直接接「[4. 翻譯完成後 將檔案推送回 git](#4-翻譯完成後-將檔案推送回-git)」==
:::

## 其他常用 git 指令

### 查看目前本機的 git 狀態
`git status`

### 查看目前的分支
`git branch`

### 放棄本機所有變更（以遠端 git 資料覆蓋本機資料）
`git reset --hard origin/tw`

## MDX

* 請安裝 MDX 插件 [VS code](https://marketplace.visualstudio.com/items?itemName=silvenon.mdx)
* 語法可參考 [這裡](https://mdxjs.com/table-of-components)
* 註解語法: [點我](https://github.com/mdx-js/mdx/pull/185)

## 參考資源
* [為你自己學 Git](https://gitbook.tw)：git 指令教學
* [連猴子都能懂的 Git 入門指南](https://backlog.com/git-tutorial/tw/)
* [Fork](https://git-fork.com)：a fast and friendly git client for Mac and Windows
* [Learn Git Branching](https://learngitbranching.js.org/?locale=zh_TW) ==推薦!線上練習git概念==
* 如果你是用VS Code，記得裝MDX extension
https://marketplace.visualstudio.com/items?itemName=silvenon.mdx