一月 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 時會使用到的兩個重點位置。那就正篇開始摟~
步驟一、觀察網頁的內容佈局
拿到設計圖的當下,先觀察每個頁面的區塊組成。請看下圖:
- 首頁:不算上方的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
&__full
left-content是網站內容在左側&__left-content
right-sidebar是右側欄&__right-sidebar
right-content是網站內容在右&__right-content
left-sidebar是左側欄&__left-sidebar
content跟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設定
- 在 laptop 這個斷點的時候,全部區塊都是滿版
@include zen-respond-to(mobile) {
// 滿版的時候是5欄數
&amp;__full{
@include zen-new-row(both);
@include zen-grid-item(5, 1);
}
// 左側欄
&amp;__left-sidebar {
@include zen-new-row(none);
@include zen-grid-item(5, 1);
}
// 右邊內容
&amp;__right-content {
@include zen-grid-item(5, 1, right);
@include zen-new-row(none);
}
// 左邊內容
&amp;__left-content {
@include zen-grid-item(5, 1);
}
// 右側欄
&amp;__right-sidebar {
@include zen-new-row(right);
@include zen-grid-item(5, 1, right);
}
}
- 1200寬的設定,記得看圖 & columns跟gutters設定
- 在 laptop 這個斷點的時候full的部分是滿版
- 有左/右側欄的時候,左/右側欄佔據3欄、內容佔8欄
@include zen-respond-to(laptop) {
// 滿版的時候是12欄數
&amp;__full{
@include zen-new-row(both);
@include zen-grid-item(12, 1);
}
// 左側欄
// 從左邊有內容的第一個欄數開始算3欄,
&amp;__left-sidebar {
@include zen-new-row(none);
@include zen-grid-item(3, 1);
}
// 右邊內容
// 從右邊有內容的第一個欄數開始算8個
&amp;__right-content {
@include zen-grid-item(8, 1, right);
@include zen-new-row(none);
}
// 左邊內容
// 從左邊有內容的第一個欄數開始算8欄,
&amp;__left-content {
@include zen-grid-item(8, 1);
}
// 右側欄
// 從右邊有內容的第一個欄數開始算3個
&amp;__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的官方文章。