---
# System prepended metadata

title: 快易購套版教學

---

---
title: '快易購套版教學'
disqus: hackmd
---
快易購套版教學
===


[TOC]


# 一、常用資料
#### 參數表-前台頁面套版說明
Z:\● 常用資料\套版相關資料\快易購\快易購-前台套版說明.pdf

#### 前台頁面套版路徑說明
Z:\● 常用資料\套版相關資料\快易購\快易購-專案路徑說明.pdf

#### git 教學說明
Z:\● 教學\Git\20200826-betty教學設計部\案件 Git 備份流程說明 - 設計部.docx

#### 快易購套版教學
Z:\● 教學\快易購套版\快易購套版課程介紹.pptx



# 二、前台文字區

快易購2.0以下才有此功能
## PHP設定
```htmlmixed=

@if($homeText['請輸入ID'] ?? null)
    {{-- 首頁文字區strat --}}
    <div class="version_text_02">

      {{--主標題--}}
      {!!$homeText['請輸入ID']->name!!}
      
      {{--內容--}}
      {!! $homeText['請輸入ID']->content !!}
      
      {{--連結--}}
      {!!$homeText['請輸入ID']->url!!}

    </div>
    {{-- 首頁文字區end --}}
@endif

```



## 後台設定
#### 步驟一、新增
![](https://i.imgur.com/eZ69Nz2.png)

#### 步驟二、輸入前台所需出現的文字
![](https://i.imgur.com/LXVSxj0.png)

#### 步驟三、輸入ID
![](https://i.imgur.com/afKJkRT.png)




# 三、前台圖文區 / 前台文字圖片
## (1)迴圈式


```htmlmixed=

@if($banner = $banners['請輸入自訂ID'] ?? null)

{{ --大標題-- }}
{{ $banner->name }}

<!--判迴圈重複區開始-->
@foreach($banner->media as $item)
    {{ --圖片-- }}  
     <img class="owl-lazy"  src="{{ $item->final_url }}" alt="{!! $item->name !!}">
      <!--2.0以下版本一定是{{ $item->final_url }}-->
    
    {{ --圖片-- }}   
    <img {!! $item->image_attr !!}>
    <!--2.0以上版本ID 可以自訂(包含圖片網址 HTML 屬性（包含 data-src、alt、title），image 是id，需要去後台模組設定，
"_attr" 這可加也可不加，用在圖片才有作用。-->
)    
    {{ --圖片背景寫法-- }} 
     <div style="background-image: url({{ $item->image }})"></div>
    
    {{ --標題-- }} 
    <h1>{!! $item->title !!}</h1>
    {{ --副標題，需在後台新增-- }}
    <h2>{!! $item->subtitle !!}</h2>
    {{ --內容，需在後台新增-- }}
    <p>{!! $item->description !!}</p>
    {{ --連結-- }}
    <a href="{{ $item->target_url }}"></a>
    
    {{ --按鈕-- }}
    @if(filled($item->target_url))<!--判斷沒有連結，按鈕會自動消失-->
     <a href="{{ $item->target_url }}">
     {{ trans('frontend/general.read_more') }}<!--語系辭庫--->
     </a>
    @endif   
    
    
@endforeach
<!--判迴圈重複區結束-->  

@endif

```





## (2)陳述式
適用於每區塊都長不一樣

```htmlmixed=
@if($banner = $banners['請輸入ID'] ?? null)
    @php 
        $item = $banner->media;
    @endphp
    {{-- 首頁圖片區start --}}
    
        <div class="row">
            @if (isset($item[0]))<!--後台排序第1個-->
                <div class="col-md-8">
                    <a {!! $item[0]->target_url_attr  !!}><!--連結，含alt、-->
                        <img {!! $item[0]->final_url_attr !!}><!--2.0以下版本使用-->
                        <img {!! $item[0]->image_attr !!}><!--2.0以上版本(包含圖片網址 HTML 屬性（包含 data-src、alt、title），image 是id，需要去後台模組設定，"_attr" 這可加也可不加。-->
                        {!! $item[0]->title !!}<!--標題-->
                        {!! $item[0]->subtitle !!}<!--副標題，需在後台新增-->
                        {!! $item[0]->description !!}<!--內容，需在後台新增-->
                    </a>
                </div>
            @endif
            @if (isset($item[1]))<!--後台排序第2個-->
                <div class="col-md-4">
                    <a {!! $item[1]->target_url_attr  !!}>
                        <img {!! $item[1]->final_url_attr !!}>
                    </a>
                </div>
            @endif
            @if (isset($item[2]))<!--後台排序第3個-->
                <div class="col-md-3">
                    <a {!! $item[2]->target_url_attr  !!}>
                        <img {!! $item[2]->final_url_attr !!}>
                    </a>
                </div>
            @endif
            @if (isset($item[3]))<!--後台排序第4個-->
                <div class="col-md-3">
                    <a {!! $item[3]->target_url_attr  !!}>
                        <img {!! $item[3]->final_url_attr !!}>
                    </a>
                </div>
            @endif
          
            @endif
        </div>


{{-- 首頁圖片區end --}}
@endif
```




## PHP設定
<span style="color:blue;">藍色線</span>的變數要一樣，可自訂
<span style="color:red;">紅色線</span>的變數要一樣，可自訂
<span style="color:green;">綠色線</span>須至後台模組設定ID，才會出現

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


注意 : 藍色圈起來都要一樣，也可以自訂變數名稱
![](https://i.imgur.com/XoCibTb.png)

## 後台設定

#### 步驟一、新增模組
![](https://i.imgur.com/5G5CMtO.png)


#### 步驟二、輸入必填項目(名稱、ID)
![](https://i.imgur.com/9VU4QPN.png)

#### 步驟三、依需求增加想要的欄位

ID是要跟前台，名稱一模一樣， "$item->請輸入ID"
```htmlmixed= 
(範例: {!! $item->title !!}) 
```

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





# 四、其他選單參數

```htmlmixed= 
 @foreach($menus['請輸入ID']->getTree() as $menu)
    <li>
      @if(is_null($menu->getUrl())) 
      <!--第一層-->
        <div class="li-menu">
            <!--無連結-->
             {{ $menu->getName() }}<!--選單標題-->
        </div>
      @else
            <!--有連結-->
      <a class="col-auto {{ $menu->isActive() ? 'active' : null }}" 
      href="{{ $menu->getUrl() }}" {{ $menu->targetBlank() }}>
          {{ $menu->getName() }} <!--選單標題-->
      </a>
      @endif
     @if($menu->hasChildren())
     <!--第二層-->
        <ul class="subs">                                             
        @foreach($menu->getChildren() as $submenu)
           <li class="{{ $submenu->isActive() ? 'active' : null }}">
             <a href="{{ $submenu->getUrl() }}" {{ $submenu->targetBlank() }}>
                {{ $submenu->getName() }}
             </a>
           </li>
        @endforeach
       </ul>
     @endif


```



# 五、主選單增加圖片

### 顯示列表圖片
放置在menu.blade.php裡面
```
<img src="{{ $menu->getData()->image }}" alt="">
```
### 顯示首頁圖片
<span style="color:red;">需程式部報價</span>


# 六、內頁參數設定

## (1)頁面分類 增加Download 按鈕設置
### 參數設置
頁面最底層分類頁，附件顯示於外面
![](https://i.imgur.com/8URqDzI.png)

```htmlmixed= 
{{--按鈕寫法--}}

@foreach($content->attachments as $attachment)
   <a class="btn btn-dark" href="{{ $attachment->url }}" target="_blank">
      <i class="far fa-file-pdf"></i>&nbsp;
       {{ $attachment->name ?? trans('frontend/general.download') }}<!--按鈕名稱-->
  </a>
@endforeach

```

### 後台設置
![](https://i.imgur.com/TpY5bmH.png)

## (2)內頁編輯區預設顯示樣式變更

### <span style="color:#8DC21F;">預設樣式</span>

頁面php 位置
\frontend\contents\default.blade.php

預設是上架各個編輯區會是一段落的方式呈現

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

預設程式碼:
```htmlmixed= 
{{--內容--}}
<div class="post_content">
{{--內容區塊 - 預設：resources/views/frontend/page/zone/default.blade.php--}}
{{--內容區塊 - Tab：resources/views/frontend/page/zone/tab.blade.php--}}
{{--內容區塊 - Collapse：resources/views/frontend/page/zone/collapse.blade.php--}}
@includeIf('frontend.pages.zone.'. $content->zone_style, ['descriptions' => $content->parsed_descriptions])
</div>

```

### <span style="color:#8DC21F;">更改頁籤樣式</span>
頁籤程式碼寫法如下(可以直接複製使用):
```htmlmixed= 
@includeIf('frontend.pages.zone.tab', ['descriptions' => $content->parsed_descriptions])

```

產生說明:
'frontend.pages.zone.tab' 這段程式碼解釋是frontend資料夾 > pages資料夾>zone資料夾>取得tab.blade.php，如圖
![](https://i.imgur.com/y88L2Ru.png)

完成長這樣:
![](https://i.imgur.com/CcpWSKg.png)

### <span style="color:#8DC21F;">更改手風琴樣式</span>

頁籤程式碼寫法如下(可以直接複製使用):
```htmlmixed= 
@includeIf('frontend.pages.zone.collapse', ['descriptions' => $content->parsed_descriptions])

```

完成長這樣:

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













# 七、頁面

## (1)首頁-頁面模組

抓取過門頁連結
"$content->slug"來源，抓取參數關鍵字，如圖
![](https://i.imgur.com/kyQ6iOn.png)

實際得到成果
```htmlmixed= 
<a href="{{ action('Frontend\ContentsController@show', $content->slug) }}"></a>
```


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


## (2)首頁-頁面分類模組

### <span style="color:#8DC21F;">目前的模組</span>
##### 目前有分4種，為
##### 1.news_A_list 是 條列式
![](https://i.imgur.com/RPNqPcL.png)


##### 2.news_B_list 是 2個圖左文右
![](https://i.imgur.com/8J5bltN.png)

##### 3.news_C_list 是 圖上文下
![](https://i.imgur.com/NpHSvF4.png)

##### 4.news_D_list 是 圖左文右
![](https://i.imgur.com/AHZdKef.png)


#### php修改路徑位置:
resources\templates\frontend\contentCategories

_nodate 表示沒有日期
![](https://i.imgur.com/y2w4X8R.png)


#### 後台變更方式
步驟一、IsGod權限 > 頁面分類 >　資料管理的＂前台頁面顯示＂
![](https://i.imgur.com/abcWhpG.png)

步驟二、貼上php名稱，".blade.php"不用輸入









# 八、參數使用技巧




快易購使用的php 框架
https://docs.laravel-dojo.com/laravel/5.5/releases


### 迴圈參數
$loop->index 當前循環的索引值（從 0 開始）。
$loop->first 是否為第一次。
$loop->last 是否為最後一次。
$loop->even 是否為偶數次。
$loop->odd 是否為奇數次。

#### 當每個區塊長不一樣的寫法 
範例如下:
```htmlmixed= 


@if(isset($pages['newsArea']['data']->name))
<div class="row">
{{-- 迴圈開始 --}}
@foreach($pages['newsArea']['items'] as $product)
        @if($loop->first)
            <!--第一個樣式-->
            <div class="col-lg-4 col-sm-6 col-12 xs-mt-40"></div>
        @elseif($loop->index == 1)
            <!--第二個樣式-->
            <div class="col-lg-7 col-sm-6 col-12 xs-mt-40">
            </div>
        @else
            <!--其他樣式-->
            <div class="col-lg-12 col-sm-6 col-12 xs-mt-40">
               
            </div>
        @endif
@endforeach
{{-- 迴圈結束 --}}
</div>
@endif
```


# 九、其他
## 特定連結設定
### 因語系不同而自動連至該語系頁面的連結設定

例如：頁尾的「網站地圖」&「隱私權政策」兩只連結，會隨著語系不同而連結到不同的頁面，其設定方式為（以「隱私權政策」為例）：

```html=
<a href="{{ action('Frontend\ContentsController@show', 'privacy-policy') }}">
{{ trans('frontend/general.privacy_policy') }}
</a>
```

其中的這個部分：

```html=
{{ action('Frontend\ContentsController@show', 'privacy-policy') }}
```


就可將連結內後面「privacy-policy」改為自訂連結，
以下範例：

```html=
<a class="shopbtn index-more" href="{{ action('Frontend\ContentsController@show', 'quality-02') }}">
{{ trans('frontend/general.read_more') }}
</a>
```

## 背景延遲載入方法
div 直接寫data-src ，class 要有lazyload，這2個要同時存在
![](https://i.imgur.com/wXFoAvZ.png)










