---
# System prepended metadata

title: 快易購SOP

---




# 快易購SOP

### 目錄

[TOC]


# 基本資料

快易購本機位置  \\10.40.4.252\web\on

# 一、vs code安裝及設定
- [官網下載](https://code.visualstudio.com/)
- 安裝(一直按下一步)
- 開啟vscode，點左側欄extension
- 搜尋 Chinese (Traditional) Language Pack for Visual Studio Code，並安裝![](https://i.imgur.com/7CLYGnh.png)


- 搜尋Live Sass Compiler，並安裝![](https://i.imgur.com/yv6vLjX.png)
- 關閉Vs code重啟

--- 
- 點左下角齒輪>設定
- 點上方"使用者"
- 點左方"延伸模組"
- 點Live sass compile config
- 點在settings.json內編輯![](https://i.imgur.com/4H3Ofls.png)
- 將下方程式碼複製貼上 { } 內，存檔
```htmlmixed=

    "liveSassCompile.settings.formats": [
        {
            // "format": "expanded", //多行展開
            "format": "compact", //單行
            // "format": "compressed",//壓縮
            "extensionName": ".css", //輸出的副檔名
            "savePath": "/public/assets/frontend/css" //輸出的路徑
        }
    ],
    // "liveSassCompile.settings.autoprefix": [
    //     "> 1%", //SCSS 轉 CSS 時自動補上支援舊瀏覽器語法
    //     "last 5 versions" //最後5個版本
    // ],
    "liveSassCompile.settings.autoprefix": null,
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        "**/vendor/**",
        ".vscode/**"
    ],
    "laravel_goto_view.folders": {
        "default": "/resources/views",
        "templates": "/resources/templates"
    },
    "laravel_goto_view.regex": "(?<=view\\(|@include\\(|@extends\\(|@component\\(|@includeIf\\()(['\"])[^'\"]*\\1",


```
- 已完成vscode設定



---




# 二、SASS編譯設定(vs code)

- 每次開啟vscode及替換案件時，請點選右下角"眼睛"![](https://i.imgur.com/pMErFkz.png)
- watching時表示已啟用"存檔即編譯"模式 ![](https://i.imgur.com/H3bXjRT.png)
- "編譯"做的事情是把"SASS"轉換成"CSS"

---

## 簡單介紹SASS

- 有巢狀![](https://i.imgur.com/qc5XpbE.png)
- 可設定全域變數(色碼、大小)![](https://i.imgur.com/ZiGhJg5.png)

- 漸進式，可以只用掌握的CSS加變數 ![](https://i.imgur.com/vXBfTkE.png)

--- 
```sass=
#nav-menu {
    nav {
        .meninmenu {
            >li {
                >a {
                    color: $header-font;
                    padding-bottom: 2.5rem;
                    padding-top: 2.5rem;
                }
                &:last-child {
                    a {
                        padding-right: 0;
                    }
                }
            }
        }
    }
}
```
- 等價於此css
```css=
#nav-menu nav .meninmenu > li > a { 
    color: #694533; 
    padding-bottom: 2.5rem; 
    padding-top: 2.5rem; 
}

#nav-menu nav .meninmenu > li:last-child a { 
    padding-right: 0; 
}
```

---


## 甚麼是變數
![](https://i.imgur.com/bGA1oxe.png)
- 盒子
- 代名詞

### SASS的變數是錢開頭，$theme-color $sale-color
### 將原本習慣的色碼打法換成變數打法
```sass=
h1{
    color:#036df5;
}
h1{
    color:$theme-color;
}
```
#### 好處是之後客戶希望這個藍色在深一點，不需要查找css逐行替換，可以直接改變數設定檔案
#### 避免掉相近顏色要改又沒改到的問題 #036df5  #037df7


---



# 三、SASS變數設定及資料夾分類定義

## 以demo為例-路徑
- 資料夾路徑 \\Gtut_nas\web\fastshop\demo
- sass路徑 \\Gtut_nas\web\fastshop\demo\resources\assets\frontend\sass\template
- css路徑 \\Gtut_nas\web\fastshop\demo\public\assets\frontend\css
#### 依上面步驟設置完成後，要修改案件時只要將資料夾拖曳至vscode，並開啟compile，每次將sass存檔都會自動編譯成css


## 可編輯的scss資料夾custom
custom是不會被版本更新的

![](https://i.imgur.com/5rmDWM6.png)

進入custom資料夾，made-custom.scss是提供放置外來的scss及不常用的，比如版本內建的特殊icon、animation css3動畫及loading，若要使用請解開註解。

![](https://i.imgur.com/2Jy4gsc.png)

![](https://i.imgur.com/23xNAXA.png)

可編輯的scss共有3支
在custom > made資料夾裡面
![](https://i.imgur.com/c7yBNcS.png)

- _variables.scss 存放變數的scss
- _custom-style.scss 該案客製的scss
- _button.scss 按鈕樣式的scss

### _variables.scss

- 開啟_variables.scss
```sass=
//===== 整體配色區 =====//
$theme-color: #036df5; //主色系
$theme-hover-color:#2a598c; //主色系滑過
$main-dark-color:#201f29; //選單下拉購物車按鈕
$body-color: #2f2f2f; //整體網站文字色
$heading-color: #2e2e2e; //主標題色(包含)
$sale-color: #343940; //銷售文字顏色
$old_prize:#959595; //原價
$hotlabel-color: #2e2e2e; //產品hot標籤
```
![](https://i.imgur.com/JMnJpbH.png)

- 將主色系改為橘色
```sass=
//===== 整體配色區 =====//
$theme-color: #f55003; //主色系
$theme-hover-color:#2a598c; //主色系滑過
$main-dark-color:#201f29; //選單下拉購物車按鈕
$body-color: #2f2f2f; //整體網站文字色
$heading-color: #2e2e2e; //主標題色(包含)
$sale-color: #343940; //銷售文字顏色
$old_prize:#959595; //原價
$hotlabel-color: #2e2e2e; //產品hot標籤
```
- 存檔，等待右下角出現成功!
 ![](https://i.imgur.com/S5wnUlS.png)
- 全站原為藍色地方變為橘色![](https://i.imgur.com/WJO4gFY.png)


### _custom-style.scss

- 如有其他客製css或顏色需求，使用_custom-style.scss製作
- 可用全部css方式撰寫 (不推薦)
```sass=
#nav-menu nav .meninmenu > li > a { 
    color: #694533; 
    border-bottom:1px solid #ccc;
    padding-bottom: 2.5rem; 
    padding-top: 2.5rem; 
}
```
- 可用全部css+變數(推薦)
```sass=
#nav-menu nav .meninmenu > li > a { 
    color: $header-font; 
    border-bottom:1px solid $border-color;
    padding-bottom: 2.5rem; 
    padding-top: 2.5rem; 
}
```


## sass變數-不同螢幕裝置尺寸使用方法

#### 是由這支scss產生"mixins.scss"，檔案有版本控制，無法隨意更改

###### 示範
```sass=
#wn__footer {
    margin-bottom: 4.5rem;
    @include width-max-1200 {
        margin-bottom: 30px;
    }
    @include md-width-991 {
        margin-bottom: 15px;
    }
}
```



###### 尺寸範圍 : @media (min-width: 1200px) and (max-width: 1300px)
```
@include width-1300-1200{}
```
###### 尺寸範圍 : @media (max-width: 1200px)
```
@include width-max-1200{}
```
###### 尺寸範圍 : @media (min-width: 992px) and (max-width: 1199px)
```
@include width-1199-992{}
```
###### 尺寸範圍 : @media (max-width: 767px)
```
@include sm-width-767{}
```
###### 尺寸範圍 : @media (max-width: 991px)
```
@include md-width-991{}
```

###### 尺寸範圍 : @media (max-width: 575px)
```
@include xs-width-576{}
```
###### 尺寸範圍 : @media (max-width: 575px)
```
@include xs-width-576{}
```

###### 尺寸範圍 : @media (max-width: 450px) 
```
@include  xs-width-450{}
```

###### 尺寸範圍 : @media (max-width: 340px) 
```
@include  xxs-width-340{}
```

###### 尺寸範圍 : @media (min-width: 992px) 
```
@include  lg-width-992{}
```
###### 尺寸範圍 : @media (max-width: 1199px) 
```
@include  wmax-1199{}
```

###### 尺寸範圍 : @media (min-width: 1200px) 
```
@include  wmin-1200{}
```


###### 尺寸範圍 : @media (max-width: 1024px) 
```
@include  wmax-1024{}
```


###### 尺寸範圍 : @media (min-width: 1025px) 
```
@include  wmin-1025{}
```


###### 尺寸範圍 : @media (max-width: 991px) 
```
@include  wmax-991{}
```

###### 尺寸範圍 : @media (min-width: 992px) 
```
@include  wmin-992{}
```

###### 尺寸範圍 : @media (max-width: 767px) 
```
@include  wmax-767{}
```

###### 尺寸範圍 : @media (min-width: 768px) 
```
@include  wmin-768{}
```


###### 尺寸範圍 : @media (max-width: 575px) 
```
@include  wmax-575{}
```


###### 尺寸範圍 : @media (min-width: 576px) 
```
@include  wmin-576{}
```


###### 尺寸範圍 : @media (max-width: 390px) 
```
@include  wmax-390{}
```

###### 尺寸範圍 : @media (min-width: 391px) 
```
@include  wmin-391{}
```


###### 尺寸範圍 : @media (max-width: 320px) 
```
@include  wmax-sm-320{}
```


###### 尺寸範圍 : @media (min-width: 321px) 
```
@include  wmin-sm-321{}
```



20200310 update scss rule
- 不寫lg / md 這些bootstrap標示
- 數字實際對應到px
- 以lg(991px)為例，應該是大於992(min-width)跟小於991(max-width

###### 最大最小寬度
- 先寫max再寫min
```sass=
@mixin wmax-1600-wmin-992 {
    @media (max-width: 1600px)and (min-width:992px) {
        @content
    }
} 
@mixin wmax-1440-wmin-1280 {
    @media (max-width: 1440px)and (min-width:1280px) {
        @content
    }
} 


```
###### 一般尺寸
- 不再寫lg / md
```sass=
@mixin wmax-1199 {
    @media (max-width: 1199px) {
        @content
    }
}
@mixin wmin-1200 {
    @media (min-width: 1200px) {
        @content
    }
}
@mixin wmax-1024 {
    @media (max-width: 1024px) {
        @content
    }
}
@mixin wmin-1025 {
    @media (min-width: 1025px) {
        @content
    }
}
@mixin wmax-991 {
    @media (max-width: 991px) {
        @content
    }
}
@mixin wmin-992 {
    @media (min-width: 992px) {
        @content
    }
}
@mixin wmax-767 {
    @media (max-width: 767px) {
        @content
    }
}
@mixin wmin-768 {
    @media (min-width: 768px) {
        @content
    }
}
@mixin wmax-575 {
    @media (max-width: 575px) {
        @content
    }
}
@mixin wmin-576 {
    @media (min-width: 576px) {
        @content
    }
}
@mixin wmax-390 {
    @media (max-width: 390px) {
        @content
    }
}
@mixin wmin-391 {
    @media (min-width: 391px) {
        @content
    }
}
@mixin wmax-sm-320 {
    @media (max-width: 320px) {
        @content
    }
}
@mixin wmin-sm-321 {
    @media (min-width: 321px) {
        @content
    }
}


```

#### 自訂的寫法
直接用@media 設定尺寸，如下:



```sass=
.contentbox {
         color: #fff;
         max-width: 694px;
         width: 100%;
         padding: 0 15px;
         @media (max-width: 1440px) {
             max-width: 500px;
             margin-left: 15vw;
         }
         @media (max-width: 898px) {
             margin-left: auto;
             margin-right: auto;
         }
     }
```

---



# 四、CSS層級知識技巧
#### 要客製css但蓋不過原有css時的做法 提高優先序(選擇器)
- 行內的樣式>頁面內的樣式>外部載入
```htmlmixed=
//行內
<div style="color:#CCC">
button
</div>

//頁面內
<style>
.grey{
    color:#CCC;
}
</style>

//外部載入
<link href="css/style.css" rel="stylesheet">

```
- 後壓前
```css
.btn{
    padding:2rem;
    background:blue;
    color:#FFF;
}
.btn{
    padding:1rem;
    background:red;
    color: #000;
}  
```
![image](https://hackmd.io/_uploads/Bkoa0hEIee.png)


- ID > class > element
```htmlmixed=
<h1 class="stlye" id="id">44就44</h1>

#id{
  color:#DDD;
  background:#000;
  border-radius:6px;
  text-align:center;
  padding:2rem;
}
.stlye{
  background:pink;
  color:green;
  display:inline-block;
  width:150px;
}
h1{
  background:blue;
  color:#000;
  border:3px solid green;
}

```
![image](https://hackmd.io/_uploads/BJukTnNUee.png)



```htmlmixed=
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="article-wrap">
                <div class="article-title">
                    <h1 class="h1"><strong>best</strong> website </h1>
                </div>
            </div>
        </div>
    </div>
</div>

.container .row .col-12 .article-wrap .article-title .h1{
    color:green;
}
.container .row .col-12 .article-wrap .article-title h1{
    color:red;

}

```

![image](https://hackmd.io/_uploads/HJAIgT4Igl.png)


- 靠爸可以提高優先序
```htmlmixed=
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="article-wrap">
                <div class="article-title">
                    <h1 class="h1"><strong>best</strong> website </h1>
                </div>
            </div>
        </div>
    </div>
</div>

.h1{
    color:green;

}
.container .row .col-12 .article-wrap .article-title h1{
    color:red;

}

```
![image](https://hackmd.io/_uploads/B12Dg6V8eg.png)


- element黏class
```htmlmixed=
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="article-wrap">
                <div class="article-title">
                    <h1 class="h1"><strong>best</strong> website </h1>
                </div>
            </div>
        </div>
    </div>
</div>

.container .row .col-12 .article-wrap .article-title h1.h1{
    color:green;
}
.container .row .col-12 .article-wrap .article-title .h1{
    color:red;

}

```
![image](https://hackmd.io/_uploads/r12SZpNUgg.png)



- !important 是最優先級


```htmlmixed=
<h1 class="stlye" id="id">44就44</h1>

#id{
  color:#DDD;
  background:#000;
  border-radius:6px;
  text-align:center;
  padding:2rem;
}
.stlye{
  background:pink;
  color:green;
  display:inline-block;
  width:150px;
}
h1{
  background:blue !important;
  color:#000 !important;
  border:3px solid green;
}

```
![image](https://hackmd.io/_uploads/SyNWz6VUgg.png)


最好只在覆蓋特定"全域"、"套件"的css時使用，因為會讓優先序沒規則
在沒辦法添加新class或更高優先序時的手段


- 繼承，先看父子層結構，若均指定在同一層時再比較權重

```htmlmixed=
<div class="container" id="c1">
      <div class="content" id="c2">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
</div>

#c1{
    color: green !important;
}

.content{
    color: pink;
}
```
![image](https://hackmd.io/_uploads/SJJYd6NLgl.png)

---




### Facebook Messenger 線上客服申請說明
#### 需要請客戶進入自己的facebook 粉絲專業，申請一組程式崁入碼。
說明圖片 路徑:● 常用資料\套版相關資料\Facebook Messenger 線上客服申請說明

##### ●步驟一：進到粉絲團後，點及左側管理粉絲團專頁的【設定】。
![](https://i.imgur.com/sBqEfJL.png)



##### ●步驟二：進入設定後再點【訊息】，右側出現視窗畫面之後點擊右下角的【繼續】。
![](https://i.imgur.com/eh6yYao.png)



##### ●步驟三：滑至最下方看到Messenger 新增到您的網站，點擊【立即開始】。
![](https://i.imgur.com/c9e6rDF.png)


##### ●步驟四：出現畫面設定洽談外掛程式視窗。1. 選擇中文(台灣) → 2. 點選【變更】→ 3.方框裡輸入寫問候文字 → 4.按下【儲存】→ 5. 按下【繼續】。
![](https://i.imgur.com/BnlvowG.png)

##### ●步驟五：檢視桌面版面預覽、行動版預覽，沒問題後按【繼續】。
![](https://i.imgur.com/NgLd6xO.png)


##### ●步驟六：1. 將網站網址貼至下圖第一個紅框處 > 2.在將第二個紅框處的選項打勾 > 3. 複製程式碼片段提供給久大寰宇科技股份有限公司 > 4. 按下【完成】即可結束設定。若網址為校稿路徑，請繼續到下個步驟。
![](https://i.imgur.com/9DhKSfY.png)


##### ●步驟七：左側點選【進階訊息】，將欲上線的正式網址貼至允許清單中的網域紅框處，在按下【儲存】即可設定完成。
![](https://i.imgur.com/34ntp1w.png)






#### 崁入碼放置後台功能 > 線上客服 > Facebook Messenger 線上客服 > 點選編輯 > 貼上即可。
![](https://i.imgur.com/gOc2ozV.png)







# 五、快易購版型使用方法

## 1.樣式

### (1)裝飾線移除方法
![](https://i.imgur.com/KiLbyLC.png)

"content__with__border"移除即可

![](https://i.imgur.com/x76z9oH.png)




![](https://i.imgur.com/H1Szq7C.png)




![](https://i.imgur.com/XKQmGiS.png)
"section__title"移除即可


### (2)裝飾線快速換色
#### 黑標題改白標題

```htmlmixed=
//加入 title--white 的class

<div class="row mb-5">					
<div class="section__title text-center col-lg-12 title--white">
<h4 class="title__be--2">WELCOME TO WENRO STORE</h4>{{-- 主標題 --}}
</div>
</div>
```

"section__title"移除

### (3)字改白色或白色字移除

![](https://i.imgur.com/EIOT5ZH.png)
![](https://i.imgur.com/mgddfiu.png)
增加"text-white"

### (4)線框樣式刪除
編號 : version_catalog_04
![](https://i.imgur.com/LEyK7En.png)
![](https://i.imgur.com/szoHUIm.png)
"categories__content" 移除



### (5)線框樣式刪除
![](https://i.imgur.com/XauYv09.png)
![](https://i.imgur.com/eQsETq3.png)
"center__line" 移除

### (6)ico更改方法
![](https://i.imgur.com/0mBjnD0.png)

從檔案 > GTUT > 點選檔案上傳

檔名 : favicon.ico(名稱要一模一樣)

![](https://i.imgur.com/q01hRSO.png)




### (7)按鈕設定
#### 1.基本按鈕 class: btn btn-primary 
![](https://i.imgur.com/LtwNaku.png)

#### 2.回上一步按鈕 : class: btn btn-secondary
![](https://i.imgur.com/XuedEIW.png)

#### 3.有箭頭按鈕 : class: shopbtn
![](https://i.imgur.com/8OOAAJQ.png)



### (8)css加入背景圖

#### 前面要加"#{$path-prefix}"


範例 : background: url(#{$path-prefix}images/icons/prev.png) left 48% no-repeat;


### (9)內建icon 組

路徑位置:resources\assets\frontend\sass\template\_plugins.scss


###### 內訂

1.Awesome Icons
快易購路徑位置:
@import './plugins/font-awesome.min';
https://fontawesome.com/icons?from=io

![](https://i.imgur.com/fOcGuiN.png)



2. 社群icon(包含FB、line等等)

快易購路徑位置:
@import './plugins/font-awesome.min
www.socicon.com/icons.php
![](https://i.imgur.com/rQayD3v.png)


3. Material Design Iconic Font
快易購路徑位置:
@import '../template/plugins/material-design-iconic-font.min';
https://zavoloklom.github.io/
目前用在網站叉叉、輪播箭頭
![](https://i.imgur.com/HgFfRe0.png)
##### 增material design的全域icon方式
![](https://i.imgur.com/PgW67ov.png)
- 目前不使用material-design-iconic-font.min (93kb)
- 新增了material-design-iconic-font_little (2kb)

material-design-iconic-font_little僅有13個icon
未來需要新增icon步驟如下
1. 開啟resources\assets\frontend\sass\template\plugins\_material-design-iconic-font_little.scss
2. 在[官網](https://zavoloklom.github.io/material-design-iconic-font/icons.htm)找到需要的icon![](https://i.imgur.com/66JMyfX.png)

3. 開啟resources\assets\frontend\sass\template\plugins\_material-design-iconic-font.min.scss搜尋該icon名稱，複製該名稱的css![](https://i.imgur.com/AhurXYC.png)

4. 貼至material-design-iconic-font_little.scss最下方![](https://i.imgur.com/YJKHTKz.png)



###### 自訂

使用方法:若需要使用到以下icon 請至 sass\custom\_made-custom.scss 解開註解

1.SIMPLE LINE ICONS
https://pagellapolitica.it/static/plugins/line-icons/
![](https://i.imgur.com/NcAFvAp.png)




2.icon font pack
https://themes-pixeden.com/font-demos/7-stroke/
![](https://i.imgur.com/5PIDUH0.png)

### (10) 左右按鈕樣式變更

#### banner 左右鍵預設樣式
![](https://i.imgur.com/KjATeJX.png)

banner 左右鍵，方形樣式設計
![](https://i.imgur.com/CGPHdUp.jpg)

##### 變更方法:
![](https://i.imgur.com/AklXeq3.png)
```
"slider-area" 改成 "slider--two"
```
---

#### 輪播套件左右鍵
##### 圓形款式加入使用方法
![](https://i.imgur.com/8jXKKDO.png)



![](https://i.imgur.com/XPiUpyU.png)
加入 class 為 "slide__arrow01" 


##### 方形款式加入使用方法

![](https://i.imgur.com/4O090cO.png)
![](https://i.imgur.com/7qngGRY.png)

加入 class 為 "slide__arrow02" 


## 2.常用連結（上為上傳端，下為本地端。案件資料夾名稱為英文）

- CSS
/public_html/assets/frontend/css
\\GTUT_NAS\web\on\(案件資料夾名稱)\public\assets\frontend\css

- 圖片路徑
/public_html/assets/frontend/imgaes
\\GTUT_NAS\web\on\(案件資料夾名稱)\public\assets\frontend\images

- 聯絡我們表單
後台 → 頁面 → 表單 → 連絡我們
\\GTUT_NAS\web\on\(案件資料夾名稱)\resources/views/frontend/forms/default.blade.php


- ico檔案上傳位置：
後台 → 檔案 → GTUT資料夾（如下圖）
![](https://i.imgur.com/cEI4QqL.png)


- 產品內頁手機版不需要手風琴效果
\\GTUT_NAS\web\on\(案件資料夾名稱)\resources\views\frontend\products\includes\zone\tab.blade.php
將下圖位置的class移除即可
![](https://i.imgur.com/iDrl9bi.png)

- 網站名稱、關鍵字、描述、GA碼...等填寫位置：
後台 → 系統 → 網站設定


---


## 3.banner模組
所有的css 都存在於這檔案中_slider.scss

#### banner 文字特效
總共分 10個樣式
如果需要文字特效，請加.animation__style01 ~ .animation__style10
![](https://i.imgur.com/8hMFUkj.png)

加入方法，請至模組 > Banner01 > 欄位 > ID輸入(animation)
再到前台圖片 > 選擇首頁Banner > 輸入需要的class 名稱即可
![](https://i.imgur.com/RNGih9U.png)







#### banner 款式種類
總共有16組banner 樣式，請加 
.slider--one
.slider--two
.slider--three
.slider--four
.slider--fiv
.slider--six
.slider__group
.slider--nine
.slider--ten
.slider--11
.slider--12
.slider--13
.slider--14
.slider--15
.slider--16

加入位置
![](https://i.imgur.com/DuGWtbi.png)




#### 滿版banner製作  fullscreen
加入.fullscreen(比如:demo4)
![](https://i.imgur.com/d4738Zo.jpg)

可以加在 文字讓文字的畫面撐大 或加在任何div都可以
![](https://i.imgur.com/U8wF4B4.png)

css結構
.fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
        min-height: 100vh;
}



### JS放置位置
\public\assets\frontend\javascript

JS啟動碼放置位置
\public\assets\frontend\javascript\active.js

JS路徑放置位置(有2種方法)
(1)一般位置沒有被整合打包
路徑 : \resources\templates\frontend\includes\javascript.blade.php

(2)會把所有js，整合一個js，但是放在這裡的js 都要經過"終機端"編譯，編譯完後會跑到public資料夾的js 裡面。
路徑 : \webpacks\frontend.js
![](https://i.imgur.com/8q2HCww.png)



### JS編譯方法一
先安裝node.js 
https://nodejs.org/download/release/v8.16.1/
下載 node-v8.16.1-x64.msi 




JS放在這個路徑
\\gtut_nas\web\on\ivyspagtut\webpacks\frontend.js
至readme.md 打開
![](https://i.imgur.com/xKF2XF0.png)
| 上線 | 前台 Javascript 編譯 | `$ npm run frontend-production` |



至vscode 上方 點選終端機
![](https://i.imgur.com/JH3DKlt.png)
輸入node -v 然後貼上 npm run frontend-production
![](https://i.imgur.com/4Hp0RHg.png)




※注意 : 網站路徑一定要是磁碟機的
![](https://i.imgur.com/Zf7GKHd.png)
![](https://i.imgur.com/0qxqzWn.png)


※提醒 : 不可以是nas 路徑
![](https://i.imgur.com/FRqTOHL.png)


### JS編譯方法二

vscode 左下角 的 NPM指令碼 點三角形，即可完成編譯。
![](https://i.imgur.com/AUfm8wi.png)



---


## 4.Loading 製作

\\Gtut_nas\web\on\ivyspagtut\public\assets\frontend\javascript\active.js
增加js

$(window).on('load', function() {
    window.closeLoading() //執行完js，Loading 再消失
});


\\Gtut_nas\web\on\ivyspagtut\resources\assets\frontend\sass\custom\_made-custom.scss
請將註解打開
![](https://i.imgur.com/QTvnNxG.png)


php檔案位置
\resources\views\frontend\includes\javascript.blade.php
![](https://i.imgur.com/6taAffL.png)
id="ya-loading" 不可以改掉，js會無法呈現。 


##後台
###彈跳視窗修改
\public\assets\backend\css\sweetalert2.css


---



## 6.首內頁不同menu 設計寫法

步驟一、
至\resources\templates\frontend\layouts\default.blade.php

將
```
@includeIf('frontend.includes.menu')
```
改為
```
@if(isset($isAtHome))
    @includeIf('frontend.includes.menu')
@else
    @includeIf('frontend.includes.menu2')
@endif
```
（上排為首頁，下排為內頁）


步驟二、
至 路徑\\Gtut_nas\web\on\ch-round\resources\templates\frontend\includes
複製 menu.blade.php ，更名 menu2.blade.php(名稱可以任意自訂)

![](https://i.imgur.com/nuAZNQe.png)


---


## 7.範本修改
![](https://i.imgur.com/WamxlPA.png)

本機端位置 : 
Z:\fastshop-resource\dist\assets\1.0\backend\javascript\plugins\ckeditor\plugins\templates\templates\default.js


修改完成，請上傳至 快易購官網 (http://goshop.gtut.com.tw)
FTP位置 :
/public_html/assets/1.0/backend/javascript/plugins/ckeditor/plugins/templates/templates



---


# 後台相關設定
## 提示文字設定

製作路徑 : S:\fastshop-resource\dist\assets\1.1\backend\hints\zh-TW.js
這是全快易購共用設定位置


步驟一、提示說明設定
```
"請輸入代碼": "說明文字內容",
範例 : "gtut-hint__banners__field__action": "編輯內容",
```
![](https://i.imgur.com/OlaYITJ.png)



步驟二、輸出顯示內容
```
@include('backend.includes.hints.field', ['key' => '請輸入代碼'])
代碼必須跟說明設定的一模一樣。

範例:
@include('backend.includes.hints.field', ['key' => 'gtut-hint__banners__field__action'])
```

# 其他
## 清除案件暫存檔案
有時候會遇到在nas 裡面進行php 設計修改，前台卻不會變更，這時需要去清除暫存記憶檔

位置路徑:
\storage\framework\views

(範例  Z:\fastshop\demo\storage\framework\views)
除了  .gitignore  其他都刪掉

