<style> .markdown-body{ font-family: Menlo,Monaco,Consolas,"Courier New",monospace,"微軟正黑體" ; } </style>
# 前端教育訓練
###### tags: `可思`,`筆記`
## I.文件
* [前端教育訓練](https://docs.google.com/document/d/1bu3wHomJclBh7bmJjqJkhu_vOFzHWRfeArT968Lk0Jc/edit#)
* [Prototype 檔案說明](https://docs.google.com/document/d/10_hRxN4Ppc1KRRxNg7nqUOym-d7wiyYt6EnlawYvn4M/edit)
* [VScode套件](https://www.codepulse.com.tw/en-gb/coding_with_vscode)
* Prettier - Code formatter
(將.tpl設定為php)
```javascript=
{
"editor.formatOnSave": true,
"files.associations": {
"*.tpl": "php",
}
}
```
* Live Sass Compiler
(sass編譯)
```javascript=
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
]
}
```
## II.注意事項
* 線框圖
Password：Codepulse168
在upload資料夾裡
> 專案需求會寫在名為SRS裡面
設計師出圖會放在「切圖」資料夾裡
* 線上測試站台
> https://cpcart.codepulse.tw/
> 進到 https://cpcart.codepulse.tw/admin 登入以後，
再重新進入網站即可看到內容。
```html=
account：admin
password：Codepulse168 / admin
```
* 專案測試站台
```html=
account：admin
password：{domainName}168
```
> 例：www.orchid.com.tw
```html=
account：admin
password：orchid168
```
* RWD公定斷點
* 特殊字型
* 一般可以先載font-weight為400、500、700的，其他看情況
## III.SCSS規範要點
### 公版
* 常用元素 Element
```html=
/scss/layout/_element.scss
```
* 設定檔
```html=
/scss/vendors/_setting.scss
```
> 如果RWD斷點有需要增加，可寫在這支裡面
### 注意寫法
* 圖片box-img(含圖片比例)
> scss
```css=
@mixin imgbox($ratio,$minheight:null){
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
&:before{
content: '';
display: block;
@if ($minheight){
min-height: $minheight;
}
width: 100%;
padding-bottom: $ratio;
}
}
.box-img {
@include imgbox(100%);
background-size: contain;
&.r-4-3 {
&:before {
padding-bottom: 75%;
}
}
&.r-16-9 {
&:before {
padding-bottom: 56.25%;
}
}
&.img-fit-text {
&:before {
padding-bottom: 50%;
}
}
&.img-contain {
background-size: contain;
}
}
```
> css
```css=
.box-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
background-size: contain;
}
.box-img:before {
content: '';
display: block;
width: 100%;
padding-bottom: 100%;
}
.box-img.r-4-3:before {
padding-bottom: 75%;
}
.box-img.r-16-9:before {
padding-bottom: 56.25%;
}
.box-img.img-fit-text:before {
padding-bottom: 50%;
}
.box-img.img-contain {
background-size: contain;
}
```
## IV.主要使用套件
* 動畫套件
> [aos.js](https://github.com/michalsnik/aos)
[wow.js](https://github.com/graingert/wow)
* wow.js官方推薦使用aos，棄用wow.js。
[ScrollMagic](https://github.com/janpaepke/ScrollMagic)
[Locomotive](https://github.com/locomotivemtl/locomotive-scroll)
* silder套件
> [slick.js](https://kenwheeler.github.io/slick/)
* 記數套件
> wan-spinner.js
* ripple效果套件
> wave.js
* range slider效果套件
> shards.js
* Lightbox套件
> magnificpopup.js
## V.上傳資料到後端測試/正式站
### Git位置
* 在Codepulse此workspace裡的專案，一般都是串過後端的。
### 一般專案下載流程
#### 1. Clone專案到xampp的localhost root directory
> 一般檔案都在「upload」資料夾裡
> 使用者後台頁面都在「admin」資料夾裡
/admin/view/template
> 前台頁面都在「catalog」資料夾裡
/catalog/view/theme/template
#### 2. 修改設定檔
> C:/xampp/htdocs/{專案資料夾名稱}/upload/
> (複製以上路徑)
##### a. 複製一份在相同路徑，改名為「config.php」
```html=
/upload/config-dist.php
```
```html=
/upload/config.php
```
* 修改路徑、資料庫名稱
prototype為專案名稱，記得更改為相同的名稱即可
> C:/xampp/htdocs/[專案名稱]/upload
##### b. 複製一份在相同路徑，改名為「config.php」
```html=
/upload/admin/config-dist.php
```
```html=
/upload/admin/config.php
```
* 修改路徑、資料庫名稱
prototype為專案名稱，記得更改為相同的名稱即可
> C:/xampp/htdocs/[專案名稱]/upload/
##### c. 複製一份在相同路徑，改名為「.htaccess」
```html=
/upload/remote.htaccess
```
```html=
/upload/.htaccess
```
### 修改xampp的設定檔
* 若是安裝xampp的時候，預設安裝，路徑應為以下
```html=
C:\xampp\apache\conf\extra\httpd-vhosts.conf
```
* 在下方加上
```html=
<VirtualHost *:80>
DocumentRoot C:/xampp/htdocs
ServerName localhost
<Directory />
Options FollowSymLinks
AllowOverride All
</Directory>
</VirtualHost>
<VirtualHost *:80>
DocumentRoot C:/xampp/htdocs/prototype/upload
ServerName prototype.localhost
<Directory />
Options FollowSymLinks
AllowOverride All
</Directory>
</VirtualHost>
```
> 1. DocumentRoot 記得要改成實際位置
> 2. prototype 為專案名稱，記得更改
> 3. ServerName 要用.localhost結尾
* 在 XAMPP Control Panel 啟動(start)Apache與MySQL
### 建立專案的資料庫
* 進入 http://localhost/phpmyadmin/ ，選擇prototype.sql檔案(prototype為專案名稱)，匯入資料庫。
* 編碼：utf8mb4_general_ci
* 新增專案資料庫名稱(需與上一步之設定檔名稱一致)
* 若要刪除資料表，請參照以下
* 刪除後再重新匯入。
* 在瀏覽器開啟剛剛設定的ServerName，如有打不開請詢問後端排除問題
### 了解程式架構
##### a. 修改前台頁面
* 前端資源會放在
```html=
/upload/catalog/view/theme/default/assets
```
* 有些舊專案可能會在
```html=
/upload/catalog/view/assets
```
* 前端頁面會放在
```html=
/upload/catalog/view/theme/default/template
```
##### b. 修改使用者(admin)後台頁面
* 前端資源會放在(實際上改動到這些的機會不大)
```html=
/upload/admin/view/stylesheet
/upload/admin/view/javascript
/upload/admin/view/image
```
* 前端頁面會放在
```html=
/upload/admin/view/template
```
* 後台標註「圖片建議尺寸」，路徑為
```html=
/upload/admin/view/template/[頁面路徑]
```
* 直接在該檔案最下面加上(可參考下圖)
```javascript=
<script>
$('#tab-index_banner').prepend('<div class="text-danger">圖片建議尺寸: 1920 x ***</div>')
</script>
```
| 頁面 | 區塊 | 後端頁面路徑 | js |
| ---- | -------- | ------------------------ | ---------------------------------------------------------------------------------------- |
| 首頁 | Banner | design\index_form.tpl | $('#tab-index_banner').prepend('<div class="text-danger">圖片建議尺寸: *** x ***</div>') |
| 商品 | 封面照 | catalog\product_form.tpl | $('#tab-image').prepend('<div class="text-danger">圖片建議尺寸: ***</div>') |
| 商品 | 輪播圖片 | catalog\product_form.tpl | $('#images').parent().prepend('<div class="text-danger">圖片建議尺寸: *** x ***</div>') |
| 最新消息 | 文章封面圖片 | newsblog\article_form.tpl | $('#tab-image').prepend('<div class="text-danger">圖片建議尺寸: ***</div>') |
##### c. 修改後台編輯器
* 1. 設定檔路徑
```html=
/upload/admin/view/javascript/ckeditor_full/config.js
```
* 2. 編輯器內部樣式
```html=
/upload/admin/view/javascript/ckeditor_full/style.css
```
> 如果有修改這支檔案，要到設定檔更新版本號：
```html=
config.contentsCss = "view/javascript/ckeditor_full/style.css?%version"
```
* 3. 匯入字型
在設定檔中的 config.font_names 新增一行
範例：'Arial/Arial, Helvetica, sans-serif;' ;
格式：'Font name / font-family value ’
* 4. 插入編輯器模板
```html=
/upload/admin/view/javascript/ckeditor_full/plugins/templates/templates/default.js
```
* 5. 有修改過任何設定，都要更新
```html=
/upload/admin/view/javascript/ckeditor_full/ckeditor.js 裡面的版本號
{timestamp:"J1QB.%version"}
```
## VI. 上傳資料到後端測試/正式站
### 取得網站的 IP/帳號/密碼 or 金鑰檔
> 打開雲端專案資料夾，找到檔案「網站資訊提供.xlsx」
### 上傳修改的檔案
> 找出 修改前的Commit點 和 修改後的Commit點
>> hash1 & hash2 須改成Commit點
* 在SourceTree clone專案後，打開Terminal 輸入以下指令
```javascript=
git archive --output=/c/Users/user/Downloads/archived_changes.zip HEAD $(git diff --diff-filter=ACMRTUXB --name-only hash1 hash2)
```
### FTP
* 若無金鑰檔
> 協定：FTP - 檔案傳輸協定
主機: 網站IP
加密: 僅使用明碼的 FTP (不安全)
登入型式: 一般
使用者：帳號
密碼：密碼
* 若有金鑰檔
> 協定：SFTP - SSH Files Transfer Protocol
主機: 網站IP
登入型式: 使用金鑰
使用者：帳號
金鑰檔案：上傳金鑰檔（xxx.pem/xxx.ppk）
* 專案資料夾路徑(可能為以下任一)：
```html=
var/www
public_html/
public_html/stage.xxx.tw
stage.xxx.com.tw (測試站)
```
* 將要上傳的檔案擷取出來，上傳至 FTP
* 輸入專案的網址，確認你修改的內容是否上傳成功
## VII. 修改已套後端舊專案注意事項
### 修改需會員登入後之頁面(本機)
1. 註冊一組在本機用的帳號
1. url加上admin進入後台
step1. 找出註冊的帳號，狀態改為啟用
step2. 或是找到已有的帳號/密碼
2. 在後台直接登入即可
## VIII. Route相關問題
### 1. 查找實際資料夾路徑
> 先登入admin後台
系統管理 → 網站管理 → 服務器設定
> 若是被隱藏了，就用F12打開他
class hidden拿掉即可打開被隱藏的設定
### 2. 開新的tpl分頁
> 新增完tpl需要在相對應的controller底下新增.php
> 例：
```php=
<?php
class ControllerInformationWechat extends Controller {
public function index() {
$this->document->setTitle("加入微信");
//分頁title
$data['footer'] = $this->load->controller('common/footer');
$data['header'] = $this->load->controller('common/header');
$this->response->setOutput($this->load->view('information/wechat', $data));
//information/wechat為設定route路徑
}
}
```
> 會有兩種寫法
```php=
$this->response->setOutput()
$this->response->view()
```
## IX. 新增ckedit範本
### 1. 打開範本功能
> 檔案位置：\upload\admin\view\javascript\ckeditor_full\config.js
### 2. 放置範本template
> 檔案位置：\upload\admin\view\javascript\ckeditor_full\plugins\templates\templates\default.js
* 輸入範本title
* 在html塞入預放置的範本template(記得前後要用ES6的反引號包住「`」)
## XII. Google PageSpeed Insights注意事項
> ==✦ 過度追求成績是某程度上是浪費時間，Google PageSpeed 實際上沒有測量你網站的載入時間。專注於調整網站的速度和效能，而非籠統的【分數】表現。==
> 1. 不要盲目地相信 Google ，或者以表面的價值來看待它。
> 2. 一定要仔細閱讀他們的建議，並評估它們是否可行，
> 是否值得你花時間。如果它要求你做一些不可能的事情，你應該忽略它！
> 3. 不要忘記關注速度，不要因為沒有 100 分而感到挫折。
> 4. 始終使用像 GTMetrix 或是 Google Chrome 的檢查功能這樣的實際速度測試工具來檢視您在站點上所做的任何更改的影響。
參考網站：[參考網站1](https://meet.bnext.com.tw/blog/view/17802)、[參考網站2](https://dsgn.tw/archives/64618/)、[參考網站3](https://blog.user.today/2-ways-to-make-pagespeed-score-higher/)
### 1.使用圖片緩載
> 套件：[jQuery Lazy](http://jquery.eisbehr.de/lazy/)
(也支援[Background Images](http://jquery.eisbehr.de/lazy/example_load-background-images))
### 2.壓縮過大圖檔
> 使用[TinyPNG](https://tinypng.com/)，或是VSCode內建外掛也可以
### 3.Js、Css檔改為min檔加快載入速度
> 在VsCode下載外掛JS & CSS Minifier (Minify)，即可右鍵壓縮
(記得載入來源要改檔名)
### 4.不使用外部字型
> 使用瀏覽器原生字型
```css=
//中文
font-family: 'Noto Sans TC', "微軟正黑體", "Microsoft JhengHei"," Noto Sans CJK","Xingothic TC","Droid Sans Fallback","PingFang TC","Heiti TC","LiHei Pro","Arial","Helvetica","sans-serif","PMingLiU";
//英文
font-family: 'Arial', serif;
```
### 5.不得已仍須使用外部字型，加入緩載Google Fonts的Web Font
> 使用[Web Font Loader](https://github.com/typekit/webfontloader)載入字型，而非寫在css檔裡。
### 6.若是fontawesome使用很少，可以考慮使用svg
> 但仍需注意檔案大小！
### 7.延遲載入非必要的JS套件，如Facebook 的各種plugins
> 如waypoints、或是其他scroll to load的套件，手動刻一個也是可以的
```javascript=
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call get data from server and append to the div
}
});
```
### 8.用picture和srcset取代RWD的大小螢幕顯示不同張圖技巧
```html=
<picture>
<source media="(min-width: 1023px)" srcset="https://blog.user.today/wp-content/uploads/2020/04/lcp-rank.jpg" />
<source media="(min-width: 300px)" srcset="https://blog.user.today/wp-content/uploads/2020/04/lcp-rank-254x300.jpg" />
<img src="https://blog.user.today/wp-content/uploads/2020/04/lcp-rank.jpg" alt="Sample" />
</picture>
```
> 在小螢幕上就只會載入 lcp-rank-254×300 那張圖，就算HTML包法變得這麼複雜，但要控制圖片的位置、透明度，CSS一樣還是寫在img上面就好了。
> 但是，IE11 在 Caniuse 的 picture 和 srcset 都顯示紅色(不支援)，只會永遠顯示最後那個 img tag 裡的圖，所以如果網頁必須支援在 IE11 ，而且在電腦螢幕的各寬度上需要替換不同圖片，這招還是慎用。
> `注意此作法耗時繁複，盡量先優先改其他的，此非最佳解。`
### 9.使用WebP格式減少圖片載入時間
> 注意此作法會有跨瀏覽器的問題，詳細請參考[此處](https://medium.com/@mingjunlu/image-optimization-using-webp-72d5641213c9)。
>* 有些主機放 webp 圖片還要調整 MIME 設定，如果自己沒有相關系統權限，又是很麻煩的一件事。
```html=
<mimeMap fileExtension=”.webp” mimeType=”image/webp” />
```
> 換了 webp 之後，20幾張圖片的總大小從 3.5MB 變成 1MB，圖片也出現了肉眼輕易可見的畫質損失(因為圖片上有壓字，邊緣不銳利很容易看出來)。提供 next-gen 格式的圖片、圖片編碼有效率之類的建議改善項目，確實都完成了，PageSpeed 跑分也增加了幾分，但是 Google Search Console 裡面會列的 LCP 那些還是一樣紅燈啊! 而且 LCP 時間還拉更長了！其實有很多調校是表面上「看不出來」的，大費周章調整一堆東西，但可能還是一場空。
### 10.其他優化網頁流暢度或 Core Web Vitals 的小招
> 有時候為了提升跑分，只能用一些障眼法，例如：
>* 把一些外部載入的資源 url 設定到 link rel=preconnect, link rel=dns-prefetch
>* 區塊設定 min-height，減少 CLS 的問題發生
## XIII. 伺服器清快取
> 登入後
## XIV. 測試機相關教學
> git clone 一樣複製HTTPS
> 本機路徑：
```html=
\\tp-server.codepulse.tw\penny\www
```
[phpMyAdamin網址](https://penny.codepulse.tw/phpMyAdmin)
> 資料庫名稱，一律都帶上penny_前綴
```html=
使用者名稱：penny
資料庫host：localhost
資料庫密碼：eBAl3SM4Bj
```
> clone下來以後，複製一份在相同路徑，改名為「config.php」
```html=
/upload/config-dist.php
/upload/admin/config-dist.php
```
* DB_USERNAME (penny)
* DB_PASSWORD (eBAl3SM4Bj)
* DB_DATABASE (penny_專案資料夾名稱)
* SSL_ENABLE 改為 true
```html=
// SSL 是否啟用
define("SSL_ENABLE",true);
```
> 開啟本機網址：
```html=
[專案資料夾名稱].penny.codepulse.tw
```
> cmd進去資料夾位置
```javascript=
ssh penny@tp-server.codepulse.tw
```
> 進去以後輸入密碼：eBAl3SM4Bj
> 進入正確位置後，下指令編譯scss
```javascript=
sass --watch [檔案名稱].scss:../[檔案名稱].css --style compressed --precision 2
```
-------
## 備註.
* 若要看電子書使用範例可以看dotf這一個專案
Sign in with Wallet
Connect another wallet