Drupal 7 選單入門

一、 選單基本概念

注意: 請先建立至少五六個頁面, 再做本頁的實驗。 Basic pages 比較適合放在選單裡; 不過如果只是要做實驗而已, articles 也無差。 以下假設你已建立 node/1、 node/2、 ... node/6 等等頁面。

Drupal 選單的設定, 在 「架構」 => 「選單」 底下。 Drupal 預設內建好的, 有四個常用選單

  1. Main Menu (主選單): 用來導覽本站、 連至站內各主要頁面的選單。
  2. Management (管理選單): 放置網站管理相關的功能; 通常只有 貴族 網站長工才需要用到。 就是你用 admin 登入時已經很習慣看到 (而且使用) 的最上面黑色選單。
  3. Navigation (導覽選單): 也許應該改名叫做 「有帳號人士的特權選單」 會比較清楚一點、 比較不會令人產生誤解。 對於有權限貼文的用戶而言, 這個選單讓他們新增內容。 可以想像, 其他 「特權」 相關的功能連結 (例如 「登出」), 應該也放在這裡。 這是官網的 熱門頁面 所說的。 (請在這頁搜尋 "permissions")
  4. User Menu (使用者選單): 還沒研究到這裡; 反正預設是沒在用的。 (從 「架構」 => 「區塊」 可以看得出來。)

這篇剩下來的部分我們就只編輯主選單了。

二、 批次匯入選單描述檔

要 手動編輯選單 逐一將已建好頁面的連結加進選單, 也是可以啦; 不過貴哥很懶惰, 遇到大量重複性機械化的動作, 只要是 「可以用文字編輯器處理」 的事, 就很不喜歡用滑鼠一個一個慢慢點。

請先安裝兩個模組:

  1. drush dl menu_import
  2. drush dl special_menu_items

裝完後記得啟動。 然後用文字編輯器建立一個純文字的選單描述檔, 長得類似這樣 sts-menu.txt。 語法說明:

  1. 每列代表一個選項。
  2. 每列最左側若沒有 「-」號, 這就是最上層的一個選項; 「-」 號越多, 在選單樹狀結構當中就是越下層的選項。 「-」 號之間不能有空格。 也可以用 「*」 取代 「-」。
  3. 每列可以有二至四個欄位, 用 「|」 分隔開來。 最左欄是顯示文字; 第二欄是連結; 第三欄是提示字串 (滑鼠移到顯示文字上方時所出現的較長解釋字串); 第四欄是特殊設定。 也可以用 「;」 取代 「|」。
  4. 第二欄可以是:
    • <front> : 整個 drupal 網站的首頁
    • (相對於網站首頁網址的) 文章路徑 : 例如這欄如果是 node/12 而你的 drupal 網站首頁如果是 http://localhost/drupal7/ 那麼它所代表的網址就是 http://localhost/drupal7/node/12 。
    • nolink : 這個選項帶領著一個子選單; 它本身沒有連結。

在 「架構」 => 「選單」 => 「import menu」 分頁裡面, 選擇欲匯入的選單 (就選 「主選單」 吧)、 挑選 (依據貴站內容被你修改過後的) sts-menu.txt、 勾選 「Link to existing content」 跟 「Remove existing menu items」 (把選單內原先舊的內容清掉!)。 按下 「update & review」 如果確認沒問題的話, 就按匯入。

離開管理畫面之後, 看到純文字檔裡面所定義的第一層選項已出現在主選單當中; 但是因為範例檔 sts-menu.txt 的第一層選項全都設為 nolink, 所以搆不到更底下的選項 orz!

三、 建議關掉 「主連結」 (primary links)

事實上主選單的顯示不同於一般選單; 而這也將給我們帶來一些困擾。

一般的選單都會有一個對應的 (相同名字) 區塊 (block), 這個區塊必須被拉到頁面某處, 這個選單才會出現。 請到 「架構」 => 「區塊」 底下查看, 你會發現確實有 「主選單」 這個區塊, 但它卻是被放在 「停用」 的區域裡 !? 請把它拉到 「首側欄」 (「sidebar first」 ; 在某些版型底下, 相對應的位置叫做 「左欄」), 儲存區塊, 然後離開管理畫面。 你會看到: 主選單出現兩次!

這是因為橫跨在頁首 (版面上側) 的主選單, 其實是透過另一個特殊機制 「主連結」 (primary links) 顯示出來的。 在 「架構」 => 「選單」 => 「設定」 分頁裡面, 可以看到 「主連結的來源」 (primary links)。 許多版型 (themes) 都會把這個 「primary links」 放在最明顯的地方, 橫跨頁首; 而它所顯示的內容, 通常也正是 「主選單」。 建議不要去動這個設定。

不僅不要去動 「主連結的來源」, 而且貴哥個人甚至還建議要把它關掉。 請到 「外觀」 => 「設定」 分頁 => 「全域設定」 分頁, 把 「主選單」 的勾取消掉。 儲存設定之後, 頁首的主選單就不見了。 左邊的主選單是用一般正常方式產生的, 等一下 superfish 模組的效用才能發揮在它身上。 事實上你可以看到原先的範例檔 sts-menu.txt 裡面凡是在第四欄出現 「expanded」 的選項列, 在左邊的主選單裡它的都會被展開來。 這在原先頁首的主選單裡就顯示不出來。

四、 優雅展開選單的 superfish 外掛模組

javascript + css 可以做出 「自動下滑選單」 (dropdown menu) 的效果, 相信 drupal 一定也可以做得到。 搜尋 「drupal dropdown menu」 找到 Comparison of various drop down menus, 最後我決定安裝 superfish。 這個模組還需要用到另一個模組: libraries 以及 superfish 的 js 函式庫:

    drush dl libraries
    drush dl superfish
再來下 cd 進入 sites/all 或 sites/default 子目錄， 然後 
    mkdir libraries # 也可能本來就已有這個目錄
    unzip mehrpadin-Superfish-for-Drupal-1.0-2-g9dbdd14.zip
    mv mehrpadin-Superfish-for-Drupal-9dbdd14 superfish

請注意: 因為我是在 2012 年 8 月初安裝的, 所以按照官網的指示, 配套的 js 函式庫用的是舊版。 你看到這篇講義時, 情況可能略有不同; 請以官網建議的版本為主。

安裝完成之後,

  1. 在 「模組」 底下啟用 superfish 模組。
  2. 在 「架構」 => 「區塊」 底下, 找到四個名為 「Superfish n (Superfish)」 的新區塊。 把其中一塊拉到 「首側欄」 (或 「左欄」 -- 視你所用的版型而定) 取代掉原來的 「主選單」 (把 「主選單」 的 「區域」 改成 「無」)。 記得按下頁面最下方的 「儲存區塊」。
  3. 再按下剛剛那個 superfish 區塊的 「設定」, 進入設定畫面。
  4. 「Menu parent」 選 「主選單」; 「Menu Type」 選垂直。 我自己還加上: 「Slide-in effect」 選 「Diagonal」; 「Auto-arrows 」 打勾。
  5. 順便檢查一下: 在其他版型裡面, 是不是也應該分配版面 (「區域 region」) 給這個區塊?

按下 「儲存區塊」、 離開管理畫面之後, 好用的滑動展開式選單就出現了!

[2015/12/26] 不知為何 superfish 選單突然失效了。 查到 這個問答， 降級成 1.x 舊版 就 OK 了。

五、 補充說明

日後如果只是要局部修改選單, 當然可以用 drupal 內建的選單編輯功能 (「架構」 => 「選單」)。 詳見圖文並茂的 Understanding Drupal 7 Menu Concepts。 但如果要大幅度變動架構, 還是這樣做比較簡單:

  1. 「架構」 => 「選單」 => 「Export menu」 把選單下載到自己的電腦。
  2. 用 vim 或 nano 之類的文字編輯器編修。
  3. 「架構」 => 「選單」 => 「Import menu」 再上傳回 drupal 網站。

這就是我一直強調的: 重複, 機械化, 有規律的動作, 就不應該是人做的事! 不論是用滑鼠或用鍵盤在做這種事, 就變成了電腦在用人, 而不是人在用電腦。 詳見我的講稿: 「長線投資的電腦學習策略」。

如果當初沒有關掉系統預設的 「主連結」 (primary links), dropdown menu 還能不能用呢?

  1. 如果你用的版型是預設的 Bartik, 可以參考 How to apply Bartik main-menu styles to other menu modules similar to Superfish。
  2. 有些版型不必修改就可以用 superfish。 在 比較文 當中, 列出 Fusion、 Pixture Reloaded、 Danland、 Acquia Marina 等等版型。
  3. 這一頁所列出來的版型 都支援 drop down primary links。 有些用的可能不是 superfish 吧。

所以現在你知道為什麼貴哥要建議把 primary links 關掉了。 本文的方法不必改 css, 也不會讓你因為要用 dropdown menu 而導致版型的選擇範圍受限。

指正/建議/問題/討論? 請到 「Drupal 選單匯入及自動下滑效果」 這帖部落格留言。