一月 14, 2019 | 前端與Vue

【Drupal教學】Zen Theme的Layout設定

前置作業 首先,請先參考「使用Zen建立自己的Theme資料夾」,在外觀中安裝好 Zen 並依照步驟設定自己要使用的 Theme。 建立好後,進入你剛剛建立的 Theme ,在sass資料夾裡面你會看到 init 跟 layouts 這兩個資料夾! init資料夾:_variables.scss是我們主要設定breakpoint跟grid的地方 layouts資料夾:layout-3col、layout-center、layout-swap,這次的重點主要在layout-3col與layout-center 請記住~這是之後在設定 layout 時會使用到的兩個重點位置。那就正篇開始摟~ 步驟一、觀察網頁的內容佈局 拿到設計圖的當下,先觀察每個頁面的區塊組成。請看下圖:

前置作業

首先,請先參考「使用Zen建立自己的Theme資料夾」,在外觀中安裝好 Zen 並依照步驟設定自己要使用的 Theme。

建立好後,進入你剛剛建立的 Theme ,在sass資料夾裡面你會看到 init 跟 layouts 這兩個資料夾!

  • init資料夾:_variables.scss是我們主要設定breakpoint跟grid的地方
  • layouts資料夾:layout-3col、layout-center、layout-swap,這次的重點主要在layout-3col與layout-center

請記住~這是之後在設定 layout 時會使用到的兩個重點位置。那就正篇開始摟~

步驟一、觀察網頁的內容佈局

拿到設計圖的當下,先觀察每個頁面的區塊組成。請看下圖:

  • 首頁:不算上方的Banner部分,很明顯的底下這四個區塊都是滿版
  • 列表跟內頁:請看紅框部分內容,會發現內容整體的最大寬度是相同的

請先看 theme/zen/templates 中的 page.tpl.php,這是zen的基本網頁架構,你會看到內容全部被包覆在 layout-center 這個Div中。把樣式寫在.layout-center上,全部頁面都會吃到相同設定,就把列表跟內頁的內容寬度設定給完成了!

所以當看你完所有的設計圖時,就會清楚知道有哪些區塊是需要拉出來另外規劃的摟!當然你會想問,首頁是滿版不能跟其它頁一樣吃相同的 layout-center 設定耶?不要急,下一步驟就為你解惑。

步驟二、設定網頁breakpoint

到這相信你已經看完了全部設計的內容佈局,接下來要來設定你的網頁breakpoint嘍~這對於響應式網站來說是非常重要的設定唷~設計圖一般常見的寬度有320、480、768、1200、1440、1920的設計圖,請你看看你拿到的設計圖是有哪些尺寸的。

舉例來說,我們現在有480、768跟1200以上的設計圖,下一步就是到 init/_variables.scss 中來做設定摟:在檔案中你會看到已經預設好的 breakpoint。

這邊就是設定當網頁寬度來到1222px的時候新增一個名字叫xxxl的斷點。那我們就依照它的規則來新增我們需要的 breakpoint,像是下圖:

路徑:你的theme/sass/init/_variables.scss

所以當我們在寫樣式的時候,就能這樣寫。記住唷mobile first的概念,所以尺寸都是以上來看,例如:mobile(也就是320寬)以上時要padding: 0 30px;

步驟三、基本格線設定

外圍處理好了,接下來就是裡面的東西囉!接續上一個步驟,設定完 add-breakpoint 後,往下拉你會看到下圖:

路徑:你的theme/sass/init/_variables.scss

$zen-columns:控制網站內容區塊總共有幾欄(只算內容區塊的欄數) $zen-gutters:控制欄的左右兩側的間距總共多寬,也就是說左右各10px

這邊的意思是,初始值就是將內容的欄數設為1,在沒有breakpoint設定的情況下就是吃此設定。所以當我們有breakpoint時,就需要針對不同breakpoint設定不同的 columns 數。依照上述解釋會知道在這三個尺寸時要怎麼設定:

480寬 $zen-columns:5 ; $zen-gutters:10
768寬 $zen-columns:8 ; $zen-gutters:10
1200寬 $zen-columns:12 ; $zen-gutters:10

接下來!初始值也設定好了,其它三個 breakpoint 也在上面計算好了,請在同一隻檔案往下滑找到下圖,爽快地把三個 breakpoint 的 columns 設定寫上去吧~

到這邊以前的步驟都只是設定唷~接下來才是重頭戲,要拿這些設定來劃分我們的區塊寬度唷~

步驟四、設定layout-3col

接著來到設定各尺寸不同區塊寬度的部分囉!

這個檔案主要是設定的是網頁的內容佔據多少欄數~點開檔案後就能看到zen已經先幫我們設定好的東西。

路徑:你的theme/sass/layouts/layout-3col/_layout-3col.scss

這部分就是初始值設定,以下簡單說明

full是網頁滿版時會出現的class&__fullleft-content是網站內容在左側&__left-contentright-sidebar是右側欄&__right-sidebarright-content是網站內容在右&__right-contentleft-sidebar是左側欄&__left-sidebarcontent跟sidebar會一起出現

left-content、&__right-content、&__full會出現在``的class上面

&__right-sidebar、&__left-sidebar會出現在<aside>的class上面

@include zen-grid-item(1, 1);這就是各個區塊的欄數初始值唷,記得我們在「步驟三、基本格線設定」設定的初始值嗎?(1, 1)右邊的數字代表是從左邊1個開始,左邊的數字是開始算幾個。所以在進入480寬度前,內容的總欄數是1,從第一個開始算一個的欄數。

初始值設定之後,以下開始設定各個 breakpoint 的欄數

以480、768跟1200寬度的設計圖來看,以480跟1200設定來舉例~來回憶一下「這兩個尺寸的設計圖」跟「步驟三、基本格線設定」中設定好的columns跟gutters。

480寬 $zen-columns:5 ; $zen-gutters:10
768寬 $zen-columns:8 ; $zen-gutters:10
1200寬 $zen-columns:12 ; $zen-gutters:10

提醒:還記得我們 breakpoint 的名稱設定嗎?480(mobile)、768(pad)、1200(laptop)

  • 480寬的設定,記得看圖 & columns跟gutters設定
  1. 在 laptop 這個斷點的時候,全部區塊都是滿版
@include zen-respond-to(mobile) {
    // 滿版的時候是5欄數
    &__full{
        @include zen-new-row(both);
        @include zen-grid-item(5, 1);
    }
    
    // 左側欄
    &__left-sidebar {
      @include zen-new-row(none);
      @include zen-grid-item(5, 1);
    }
    
    // 右邊內容

    &__right-content {
      @include zen-grid-item(5, 1, right);
      @include zen-new-row(none);
    }
    
    // 左邊內容
    &__left-content {
      @include zen-grid-item(5, 1);
    }
    
    // 右側欄
    &__right-sidebar {
      @include zen-new-row(right);
      @include zen-grid-item(5, 1, right);
    }
}
  • 1200寬的設定,記得看圖 & columns跟gutters設定
  1. 在 laptop 這個斷點的時候full的部分是滿版
  2. 有左/右側欄的時候,左/右側欄佔據3欄、內容佔8欄
@include zen-respond-to(laptop) {
    // 滿版的時候是12欄數
    &__full{
        @include zen-new-row(both);
        @include zen-grid-item(12, 1);
    }
    
    // 左側欄
    // 從左邊有內容的第一個欄數開始算3欄,
    &__left-sidebar {
      @include zen-new-row(none);
      @include zen-grid-item(3, 1);
    }
    
    // 右邊內容
    // 從右邊有內容的第一個欄數開始算8個
    &__right-content {
      @include zen-grid-item(8, 1, right);
      @include zen-new-row(none);
    }
    
    // 左邊內容
    // 從左邊有內容的第一個欄數開始算8欄,
    &__left-content {
      @include zen-grid-item(8, 1);
    }
    
    // 右側欄
    // 從右邊有內容的第一個欄數開始算3個
    &__right-sidebar {
      @include zen-new-row(right);
      @include zen-grid-item(3, 1, right);
    }
}

@include zen-grid-item(4, 1, right);這個設定的是佔據幾(4)欄,從第幾(1)欄開始,從哪(right)邊開始算起

@include zen-new-row(both);這個則是設定clear的位置!

步驟五、設定內容最大寬度

最後,記得設定內容的最大寬度唷~

我們現在有480、768跟1200以上的設計圖。看1200寬內容最大寬度是800寬,那我們就知道1200以上時,內容寬度要限制最大寬度(因為mobile first)。

在第一步驟時,就知道內容是被包覆在 layout-center 中,所以就在 layout-center/_layout-center.scss 設定寬度唷~這部分有$zen-gutters主要是因為我們看到的是內容的寬度,假如我們的內容包含左側欄,若是不加,左側欄跟右邊內容區塊是會超出我們的最大寬度的(這部分就請各位自己去嘗試摟)。

路徑:你的theme/sass/layouts/layout-center/_layout-center.scss

知道你想問! 首頁是各自區塊滿版,但共用 layout-center 怎麼辦?

沒錯,問得好!你可以從首頁的``````上面找到front這個class,這是只有首頁才會有的class。可以參考以下的寫法,讓首頁的layout-center不受限制。當然還有其他辦法,但在這就不詳述了。

body.front {
  >.layout-center {
    margin: 0 auto;
    padding: 0px;
    max-width: 100%;
  }
}

結論

簡單五步驟就能輕鬆設定網站layout!

記得每個步驟都是層層相關,先觀察好大尺寸的區塊佈局、設定好網頁所需要的breakpoint,再依據上一部設定的breakpoint來計算每個斷點需要的基本格線數,然後你才知道在哪些breakpoint時,哪些區塊要設定幾個格線,最後別忘記要加上網頁內容的最大限寬。

當然,設定做久了你就會有自己邏輯的一套設定方式,但在你熟悉之前,你可以參考本篇或者是參考Zen的官方文章