# 開一個新專案
## 一、telegram通知開專案
1. **tg和經理報告：**
* 專案取什麼名字？
* gitlab放測試機，路徑放哪？
* 專案用什麼核心套件？
（bt5、tailwind、swiper、AOS）
可以額外用其他套件嗎？
2. **tg告知負責人：**
* 請負責人開tg專案群組
* 告知負責人專案名字、測試機路徑
3. **tg負責人回覆：**
1. 會給此專案的gitlab網址，
VScode終端機下指令git clone <網址>，生成空白專案
2. 記得終端機路徑，VScode要進入專案資料夾內
3. tg下載yml檔到專案裡，下載時檔名會變，yml檔名要改為「.gitlab-ci.yml」
4. 圖片機路徑網址，自行到測試機上新開資料夾
<br>
## 二、全專案佈局：
* 複製website_sample基底到空白專案，調整基底成你要的樣式
在完整的基底下，html, css, scss檔案關係圖如下：

graph LR;
A(頁面.html) --> B(main.scss);
A(頁面.html) --> C(頁面.scss);
B(main.scss) --> D(_reset.scss);
B(main.scss) --> E(共同斷點<br/>_breakpoint.scss);
B(main.scss) --> F(顏色變數<br/>_color.scss);
B(main.scss) --> G(共同樣式<br/>_style.scss);
B(main.scss) --> H(_header.scss);
B(main.scss) --> I(_footer.scss);
C(頁面.scss) --> J(共同斷點<br/>_breakpoint.scss);

* 切圖片。圖片格式限定是webp, svg。
除了OG圖以外，一律只用webp, svg。大圖片用webp、小icon用svg。
轉檔webp用figma插件tinify；svg就figma export輸出。
* 切完圖，圖片丟測試機。
<br>
## 三、html頁面寫作指南：
* **head**
* head裡要加入下方，要填好…部分：

  <title>…</title>
  <meta name="title" content="…">
  <meta name="description" content="…">
  <meta name="keywords" content="…">
  <meta property="og:image" content="…">    

* head裡通常放2隻css：*main.css*, *頁面.css*
（隨著你如何調整基底而不一定）

* **body**
* 每個html頁面要加h1。要不然每頁都不寫，h1統一加在共用元件header.js裡
* html中className不要取名 “ad”,“ad-”, “ad_”，會被adblock, adguard檔住
* 儘可能多使用html5語意標籤：
nav、main、aside、article、section、mark、time
* 圖片html寫法如下，每個屬性都要填值：

  <img src="" alt="" title="" width="" height="" loading="lazy" decoding="async">

* html DOM層級儘量少，不要包太多層級
* script src引入共通元件：*header.js, footer.js, banner.js*
（隨著你如何調整基底而不一定）
<br>
## 四. 專案完成後檢查：
* 用測試機網址，開不同瀏覽器和裝置
chrome, edge, firefox, safari, iphone, android
檢查畫面有無跑版