- 請先安裝 Node
- 把專案抓下來
npm inpm run dev- 預設會運行在 http://localhost:3000
- 使用 docker: 根目錄下已有 Dockerfile
- 使用 node: 詳細運行方式寫在 Dockerfile 裡面
設定以下項目,各自對應的設定檔案(或檔案位置)
- 交易產品
- src\assets\productsData.ts
- 導覽列
- src\assets\menuList.ts
- 整個站使用到的連結們
- src\assets\links.ts
- 多國語言
- public\assets\images (國旗的圖片放在這裡)
- src\i18n\config.ts (編輯下拉選單的語言選項)
- next-i18next.config.js (編輯 router 網址對應的語言有哪些,預設語言是什麼)
- src\i18n\localests (編寫多國語檔案)
- src\i18n\generateLocales.js (執行這個檔案,即可將 src\i18n\localests 內編輯的所有 ts 檔案,自動產出 src\i18n\locales 內的 json 檔案)
手機版/電腦版,交易產品都會使用這支檔案
- 在命名上如果前面加星號,像是截圖內看到的 *USDJPY / *USD / *JPY,都可以在 i18n 檔案設定,畫面上,程式碼會做 i18n 的顯示轉換
- src\components\Product\productsData.ts
導覽列的所有連結,是在menuList.ts設定 (手機版/電腦版,導覽列都會使用這支檔案)
每個連結,包含"名稱"及"對應的連結", { i18n: '名稱', href: '對應的連結' }
{
i18n: 'about', =>關於WCG
children: [
{ i18n: 'about', href: '/about' }, =>關於WCG
{ i18n: 'companyNews', href: '/about/companyNews' }, =>企业动向
{
i18n: 'corporateResponsibility',
href: '/about/corporateResponsibility' =>企业责任
},
{ i18n: 'questions', href: '/about/questions' }, =>常见问题
{ i18n: 'announcements', href: '/about/announcements' }, =>平台公告
{ i18n: 'contactUs', href: '/about/contactUs' } =>联系我们
]
}
我們嘗試把不要的連結註解掉(如上方編輯器的截圖),存檔後,重新運行,即可看到以下結果
- 只要從menuList.ts更改設定,就能改變導覽列,不需要修改導覽列頁裡面的程式碼,不會影響樣式
需要動到的檔案有兩個: next-i18next.config.js以及locales.ts
請先安裝 Visual Studio Code 請先安裝 Node
- 此專案使用 commitizen
- 請做全域安裝 `npm install commitizen -g`
- 每次commit,請在stage之後,下指令 `git cz`,然後照指示輸入
- 要佈署之前,下指令`npm run release`,即會自動計算,並更新package.json裡面的version這樣佈署後,可以在 head 標籤裡面,看到版本.
- 中文因為語句較短,所以 CSS 通常需要設定跟其他語言不同的 minH
- 其他語言若是向左靠齊的部分;阿拉伯文需做成"向右靠齊",若是向中靠齊則不在此限(text-align:'center')
- 中文以外的語言,不該出現全形符號
- 此網站 RWD 的標準為,螢幕拉窄或拉寬,切換不同語言,都不會跑版或爆版
- 需支援市面上主流瀏覽器(Chrome.Edge.Firefox.Safari)及作業系統(電腦 mac/windows,手機 android/ios)
- 因為加密貨幣近期較為敏感,master 分支,導覽列不可出現"加密貨幣"
- NEXT_PUBLIC_API_URL
- 所有 API
- NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID
- Google 分析的 GTM 標籤, 已在此標籤下編輯, 同時控制 Google Analytics 以及 Visitor Analytics
- NEXT_PUBLIC_REGISTER_REAL
- 開立真實帳戶
- NEXT_PUBLIC_REGISTER_DEMO
- 開立模擬帳戶
- NEXT_PUBLIC_USERS_CENTER
- 客戶中心
- NEXT_PUBLIC_MT4_APP
- MT4 電腦版下載
- NEXT_PUBLIC_MT4_APK1
- MT4 APK下載1
- NEXT_PUBLIC_MT4_APK2
- MT4 APK下載2
- NEXT_PUBLIC_MT4_WEB
- MT4 網頁版
-
路徑命名為 activity/活動名稱
- 新增檔案在 src\pages\activity 底下
- 新增圖片在 public\assets\images 底下, 圖片命名方式為 activity活動名稱圖片名稱
- 用以上方式命名, 將來若想刪除已經過時的活動相關頁面及檔案, 維護會較容易
-
目前活動頁面們(依照開發順序陳列)
-
馬來語系專門活動, 使用英文
-
印尼語系專門活動, 使用印尼語
-
目前廣告投放頁面們(依照開發順序陳列)
-
國際站
-
國際站/金業, 共用後台(裡面有分各站內容添加)
- API 路徑設定,在
.env這支檔案
type IResponseFormat = {
status: number;
message: string;
code: 1 | 0;
data?: any;
error?: any;
};
-
語言代號,依照 ISO 碼命名, API 參數 lang 為要請求的 語系 cn = 簡體中文 zh = 繁體中文 en = 英語
-
API 回傳資料 Order of priority
- onTop === 1
- showTime(DESC)
- createTime(DESC)
type DataOutputFormat = {
id: number;
title: string;
content: string;
url?: string; // 目前僅有 企業責任 會有這個參數
onTop?: boolean; // 目前僅有 平台公告 會有這個參數
time: string;
};
| Item | Value |
|---|---|
| Method | GET |
| path | /market |
| param | lang |
| table | g_market |
| Item | Value |
|---|---|
| Method | GET |
| path | /responsibility |
| param | lang |
| table | g_responsibility |
| Item | Value |
|---|---|
| Method | GET |
| path | /notice |
| param | lang |
| param | site |
| table | *_notice |
| Item | Value |
|---|---|
| Method | POST |
| path | /contact |
| param | |
| table | g_contact |
type IContactInput = {
firstName: string;
lastName: string;
mobile: string;
email: string;
area: string;
type: string;
account?: string;
content?: string;
};
- 以上沒打問號的, 代表必填
- 以上資料除了會進到資料庫, 也會使用 nodemailer 寄信到"後端/後台專案"的.env 設定的 CUSTOMER_SERVICE_EMAIL
- 寄信的 server 使用.env 的 EMAIL_ACCOUNT 及 EMAIL_PASSWORD
| Item | Value |
|---|---|
| Method | POST |
| path | /wcgtgh |
| param | |
| table | g_WCGTGH |
type IPromotion = {
name: string;
email: string;
mobile: string;
qq?: string;
};
- 以上沒打問號的, 代表必填
- 以上資料除了會進到資料庫, 也會使用 nodemailer 寄信到"後端/後台專案"的.env 設定的 CUSTOMER_SERVICE_EMAIL
- 寄信的 server 使用.env 的 EMAIL_ACCOUNT 及 EMAIL_PASSWORD