iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 7
0
Modern Web

drupal入門筆記系列 第 7

Day7.版型(themes)與Panels模組介紹

  • 分享至 

  • xImage
  •  

話說

今天來會來介紹如何設計自己的網頁版面。

版型(themes)

這應該是所有的CMS都會有的東西,讓使用者可以輕易的設計自己的網站風格,前面我們已經介紹過如何安裝與啟動,今天會再介紹如何做頁面版面調整。

區塊及區域

在管理者選單上面點選區塊,可以在表單的上方看到示範區塊及區域的超連結,點進去之後可以看到這個版型所擁有的區域設定。
區塊(block)是讓drupal頁面配置很有彈性的一個元素,可以把他想成是裝著內容的盒子,你可以把它設置在設定好的區域內。
在區塊的設定面裡面,你可以用拖曳的方式或是用下拉是選單來將特定的區塊放到你想要放的區域當中,操作的欄位中可以選擇設定,可讓使用者設定該區塊出現的頁面、全限等。管理表格上方有個新增區塊可以讓使用者自治區塊並作相對應的設定。
不過假如這個版型的風格符合自己的要求,但設計的區域卻不符合怎麼辦呢?你可以去改的它的程式碼,或是用下面介紹的模組Panels

Panels模組

Panels是一個可以幫助你設計不同版面配置的強大模組,而且你不用寫任何程式,不過效能上可能就會差一點。寫程式來改版型的部份我們會將來的文章中介紹。

  • 製作第一個模板頁面 [模板資訊]

  • 於上方操作台選擇 架構(structure),並選擇 模板(panels)。

  • 新增一個新的 模板頁面(panel page),填上自己的 模板標題(title)及描述(description)並在路徑(Path)的地方輸入想要模板頁面設定的連結 ex: home, articles,...。

  • 你可以勾選 將本頁設為我的首頁 (Make this your site home page.) 來設定此頁面為首頁。

  • 製作第一個模板頁面 [模板分割]
    這裡有一些預設的模板分割可供選擇,這個規劃就是未來這個模板的劃分方式。從預設好的 column1, column2,column3 中選擇適合自己需求的分割後,並繼續。

  • 製作第一個模板頁面 [模板設定]
    將 Disable Drupal blocks/regions 勾選取消後,簡單的再按繼續。

  • 製作第一個模板頁面 [模板標題]
    為自己的模板命名標題後,在底下就會看到自己模板的分塊狀況了。最後按下,完成。就製作出第一個模板頁面了呦!

使用Panel模板

馬上來實作看看頁面要怎麼使用這塊模板頁面吧!!

  1. 在操作台選擇架構(structure)->頁面(pages)就會看到你剛剛建立好的模板名稱。選擇編輯。
  2. 添加模板內容
    左邊列表點選,內容(content)之後,會看到這個模板的區塊分割。每個區塊的左上角都有個齒輪,點選後就可以開始加入各種內容了喲!
  3. 添加模板內容
    點選齒輪,按 添加內容(add content)後,會看到各式各樣的內容物可以添加。包括自訂的區塊,頁面元素,小工具等等。選定添加內容後,點下儲存並更新。燈燈燈~內容就會出現在模板區塊裡相應的位置了!!以這種方法,你就可以自己新增區塊並添加在自己需要的位置喔!

Panel + View

到第七天,使用Panel+View熟練的話已經可以做出基本的網站了。像是官方網站、介紹產品的網站、個人網站等等,按照自己的風格和需求來做。有任何不清楚或是發現錯問的地方,歡迎留言討論喔!


上一篇
Day6.Drupal中的內容與Views模組介紹
下一篇
Day8.用Drupal打造類似iT邦的網站
系列文
drupal入門筆記9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言