四月 29, 2019 | 前端與Vue

【Drupal教學】更改tpl將網頁架構優化

為什麼需要更改tpl? 在寫Drupal網頁樣式的時候,可能會因為設定了很多功能,讓網頁的HTML架構變的非常複雜,也有可能會需要把分開的元素放在一起寫樣式的狀況,這時候只要可以簡化架構或是直接改成想要的樣子就能方便工程師的作業,在Drupal的網頁裡面可以很輕鬆的做到這個功能! 只要透過更改tpl就能把網頁的架構改成想要的樣子,接下來讓我們一起看看這個厲害的功能!

為什麼需要更改tpl?

在寫Drupal網頁樣式的時候,可能會因為設定了很多功能,讓網頁的HTML架構變的非常複雜,也有可能會需要把分開的元素放在一起寫樣式的狀況,這時候只要可以簡化架構或是直接改成想要的樣子就能方便工程師的作業,在Drupal的網頁裡面可以很輕鬆的做到這個功能!

只要透過更改tpl就能把網頁的架構改成想要的樣子,接下來讓我們一起看看這個厲害的功能!

使用說明

  • 從外觀設定選取網站正在套用的外觀
  • 拉到最下面找到Theme development settings並把將裡面的選項選中,別忘了儲存設定
  • 找到想要改的架構,會發現多了一些綠色字,那些就是會用到的檔案名稱,BEGIN OUTPUT from後面的路徑就是div class="content"這段架構使用的文件,到END OUTPUT from 結束,而FILE NAME SUGGESTIONS後面的檔名就是可以新增來取代原本架構的建議文件名稱
  • 從路徑找到原本使用的檔案
  • 在templates資料夾底下新增一個檔案,檔名要使用建議的替代名稱,把舊檔案的內容全部複製貼過來
  • 新增完成並儲存之後刷新網頁回去看那個架構,你會發現這段架構使用的文件換成了剛剛新增的那一份
  • 這時候就可以改變網頁的架構,例如我在裡面新增其他content的div
  • 回去刷新網頁會發現這些div已經加入在content底下,想要加什麼內容只要在文件裡面新增都能直接加入(如果碰到沒有被改的狀況可能是檔名有問題沒有被應用到或是網頁需要清除快取)
  • 也可以透過管理欄位找出該架構應用的機器名稱
  • 選出要用的並把舊的內容註解或刪除,可以隨意加入想要放的元素,render($form['field_check'] field_check是這個欄位的機器名稱
  • 回去刷新網頁會發現已經變成了你更改的架構

結語

文章總結有幾個部分

  1. 從外觀開啟設定讓網頁檢查的時候可以看到替換的名稱
  2. 選出要更改的架構,從上方提供的路徑找到這個架構是從哪個檔案抓資料並找出可替換名稱
  3. 用可替換的名稱在templates資料夾底下新增一個檔案,從原本抓資料的檔案複製全部內容貼上刷新頁面看看這個架構抓資料的路徑有沒有改成新增的檔案
  4. 替換成功之後開始加入想要的內容就可以開始編輯樣式囉!

如果為了複雜的架構在寫樣式上花更多力氣就太浪費時間了,既然用了Drupal這麼方便的工具來做網站,不如試試看這個方便的功能吧!相信透過將架構簡化改成想要的樣子,寫樣式可以省下更多時間!