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

[TOC]

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

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

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

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

# 二、前台文字區

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

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

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

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

## 後台設定
#### 步驟一、新增

#### 步驟二、輸入前台所需出現的文字

#### 步驟三、輸入ID

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

@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)陳述式
適用於每區塊都長不一樣

@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，才會出現


注意 : 藍色圈起來都要一樣，也可以自訂變數名稱

## 後台設定

#### 步驟一、新增模組

#### 步驟二、輸入必填項目(名稱、ID)

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

ID是要跟前台，名稱一模一樣， "$item->請輸入ID"

(範例: {!! $item->title !!}) 


# 四、其他選單參數

 @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 按鈕設置
### 參數設置
頁面最底層分類頁，附件顯示於外面

{{--按鈕寫法--}}

@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

### 後台設置

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

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

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

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


預設程式碼:

{{--內容--}}
<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>
頁籤程式碼寫法如下(可以直接複製使用):

@includeIf('frontend.pages.zone.tab', ['descriptions' => $content->parsed_descriptions])

產生說明:
'frontend.pages.zone.tab' 這段程式碼解釋是frontend資料夾 > pages資料夾>zone資料夾>取得tab.blade.php，如圖

完成長這樣:

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

頁籤程式碼寫法如下(可以直接複製使用):

@includeIf('frontend.pages.zone.collapse', ['descriptions' => $content->parsed_descriptions])

完成長這樣:


# 七、頁面

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

抓取過門頁連結
"$content->slug"來源，抓取參數關鍵字，如圖

實際得到成果

<a href="{{ action('Frontend\ContentsController@show', $content->slug) }}"></a>


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

### <span style="color:#8DC21F;">目前的模組</span>
##### 目前有分4種，為
##### 1.news_A_list 是 條列式

##### 2.news_B_list 是 2個圖左文右

##### 3.news_C_list 是 圖上文下

##### 4.news_D_list 是 圖左文右

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

_nodate 表示沒有日期

#### 後台變更方式
步驟一、IsGod權限 > 頁面分類 >　資料管理的＂前台頁面顯示＂

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

# 八、參數使用技巧

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

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

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

@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

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

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

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

其中的這個部分：

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

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

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

## 背景延遲載入方法
div 直接寫data-src ，class 要有lazyload，這2個要同時存在