---
# System prepended metadata

title: 開一個新專案

---

# 開一個新專案  
## 一、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檔案關係圖如下：
``` mermaid
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裡要加入下方，要填好…部分：
  ``` html
  <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寫法如下，每個屬性都要填值：
  ``` 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
  檢查畫面有無跑版