Skip to main content

Drupal 8 教學 - 如何增加主頁面選單

Submitted by admin on Mon, 12/09/2019 - 11:51

這篇文章會帶著大家新增一個主頁面導引標籤,順帶介紹Druapl中的Menu與Views Page Display物件。

在一個剛部署好的Drupal網站中,我們的主頁面內容應該像是下面這張圖一樣,在主頁面的標籤欄位上只有一個「Home」分頁。這次我們要示範如何新增一個分頁標籤到一般稱之為navigation bar的地方。

如果對這個名詞有些陌生的話,可以參考下面的示意圖,新增的標籤大概會在其中的綠色框框處。

menu_setting_01.png

 

在實際操作之前,先來講解一下Drupal的選單(Menu)是如何運作的。

Drupal的Menu物件定義了一組名稱與連結的配對,而當中的連結指向一個已經存在的頁面。因此,我們這一章節的介紹會涵蓋以下內容:

  1. 建立一個Views Page,這個頁面只會顯示帶有「模組介紹」tag的article內容類別。
  2. 編輯預設的Menu物件,並連結剛剛建立的page物件

讓我們一步一步開始吧。

 

1.建立一個Views Page

Drupal當中的Page物件會帶有一個自己的路徑,其實就是網址上[domain]之後的部分。以我們正在閱讀的這片文章而言,抬頭看看瀏覽器的網址列,目前正在瀏覽的page的路徑就是/blog/drupal-add-navigation-bar。

Drupal 新增第一篇文章中我們已經學會如何發表內容,也知道文章可能會帶有article或是basic page的Content type屬性。如果需要作個內容固定的「關於我們」頁面,我們知道該創造一個Basic page類別而不是article類別來在裡面撰寫文章。

但如果今天預想的頁面名稱是「產品列表」,預想內容是一個能夠列舉出所有產品文章標題的頁面,甚至還要能點擊標題文字來進入獨立產品的頁面,此時該怎麼做?

我們當然可以繼續利用Basic page來完成「產品列表」頁面的構想。只要在建立了每個產品獨立的頁面介紹後,複製每個產品的網址路徑,並在我們的Basic page產品列表頁面中列出產品名稱的文字列,再一行行的賦予每一行文字超連結的屬性就可以了。

但這種做法耗時費工,每次新增或移除產品時我們都要手動編輯一次Basic page產品列表,能不能把這一切自動化呢?

這時候就輪到Drupal核心裡面自帶的views模組登場了。

 

View的功能不少,在這篇教學裡面全部帶過一遍會顯得有些離題,所以在這篇文章中僅注重在如何產生預想中的頁面。後續的基本操作系列文章會再帶大家深入了解Views。

首先我們先列出這個範例所需要的頁面規格:

  • 是一個page。 (Drupal中還有其他的清單呈現方式,例如側邊攔屬於block)
  • 這個page顯示一個清單,裡面列出所有的文章(article)標題。
  • 點擊文章標題可以連結到文章內文。
  • 只顯示tag欄位中包含「#module」字樣的文章

 

好了,這些規格應該差不多了。我們可以透過管理員列表中的Structures > Views > +add view頁面新增一個能夠實現上述規格的page。

在點下+add view按鈕前可以先在這個Views總覽頁面先看一下,可以看到目前的Views底下已經有系統定義的多個預設頁面,例如Comments, Content, Custom block library, Files...等等。我們可以試著點擊DISPLAY欄位底下,顯示為藍色字樣可點擊的連結,然後觀察自己被帶向網頁中的哪個頁面,瀏覽器上方的網址列URL又如何變化。

menu_setting_11.png

 

回到正題。點擊按鈕進到+add view頁面之後,我們網頁所顯示的畫面應該如同下圖。

紅色框框處的View name是指這個『view規則』的稱呼,顯示在上一張圖的最左邊。

綠色框框描述了這個新建立的規則,要顯示Content類別中的article type,同時也要帶有"#module"的標記,以最新文章在上面的方式排列。

藍色框框則規範了根據上面規則產生的page的細節設定,要在Create a page打勾後才會出現。這裡的Page title是進入這個頁面後會顯示的標題,path則是這個頁面的網站路徑。titles(linked)則是規定要顯示可連結到內文的標題。

menu_setting_07.png

 

 

按下save之後我們可以看到如下圖的畫面,這個是剛剛所建立的views的內容資訊。如果日後想要變更設定的話可以來到著個頁面,只要透過管理員列表中Structures > Views,找到自己定義的view name欄位,按下edit就可以回到這個頁面了。

menu_setting_08.png

這邊針對上圖做幾個說明。

畫面中央的PAGE SETTING底下的path就是這個view頁面的路徑,以這個網站作為例子,只要我沒有移除這個view或是做一些其他的重導向設定,只要輸入http://www.industion.com/drupal_module_introduction就能連到這個頁面上。

畫面左邊的FIELDS描述了這個view頁面要呈現的內容,以這張圖而言就是Content類別的title。

畫面左邊偏下的FILTER CRITERIA描述了濾鏡規則,要已公開的內容、類別屬於Article,有"#module"標籤。三個條件都滿足後才會顯示在頁面上。

 

2.編輯預設的Menu物件,並連結剛剛建立的page物件

首先我們要來介紹Menu是什麼。

我們可以在管理員選單中的Structure底下找到Menus這個項目,進去後可以看到目前已經定義的所有選單。在Drupal中,所謂的Menu指的是一個名稱與連結的集合,下面用 「名稱」=>「連結」的記述來舉兩個Menu的例子。

選單甲 {

「Content」=>「/admin/contents」

「Structure」=>「/admin/structure」

「Structure」=>「/admin/structure」

「Appearance」=>「/admin/appearance」

「Extend」=>「/admin/modules」

選單乙 {

「首頁」=>「/」

「公司簡介」=>「/introduce」

「產品列表」=>「/products」

「最新消息」=>「/news」

「聯絡我們」=>「/contact」

注意到了嗎,選單甲其實就是管理員列表第一層的前五項內容,我們可以在/admin/structure/menu底下看到他們的定義。選單乙則是一般公司網站常見的內容,常常可以看到這幾個項目就列在一個網頁最醒目的地方。現在重點來了,Menu結構定義了「名稱」=>「連結」的關係,但其中並沒有告訴我們這個選單要放在網頁的何處。

 

Menu要放在哪裡

Drupal將網頁劃作若干區域,而我們可以選擇要將自己的物件放在哪個區域中。區域的範圍會根據目前所套用的佈景主題不同而稍微改變,但基本上變動幅度不大。下面這張圖片以預設主主題所謂例子,顯示了每個區塊的大致範圍。在這個範例中我們感興趣的是其中的Primary menu區域,想要在其中放置我們的Menu物件。

menu_setting_03.png

如果你所使用的是預設的佈景主題,我們可以在/admin/structure/block/demo/bartik找到這張示意圖。

在/admin/structure/block裡面,紅色框框所圈選的地方,我們可以看到目前有哪個區域已經放置了哪些物件。每個區域名稱旁邊都有一個名為Place block的按鈕,點擊後會出現選單,可以讓我們決定要把什麼物件放入所選擇的區域中。

我們在這個範例中感興趣的位置是Primary menu區域,可以在藍色框框處看到系統預設已經幫我們放置一個CATEGORY屬於Menu的物件了。

menu_setting_15.png

好了,現在我們將目標再次整理一遍:「想要增加自己的分頁頁面標籤」。這句換成Druapl的語言描述即是「增加一組描述『名稱』=>『連結』關係的紀錄到現有的Main navigation Menu,這個Menu目前被放在Primary menu的區域中」。

我們在剛剛介紹了何謂一個Menu結構以及如何定義它,也介紹了能夠放置Menu的各個區域以及如何放置。從上圖可得知,系統預設已經幫我們在Primary menu區域中放置了一個名為Main navigation的Menu物件,我們要作的就是新增一筆名稱為「模組介紹」的名稱。


把所有東西串在一起

好了,終於來到了最後一步。

在這篇文章的最開頭,我們透過Views建立了一個放置在/module_introduction的頁面,這個頁面會顯示所有帶有"#module"標記的文章的標題。

接著,我們介紹了Menu的概念,也知道了系統已經有一個預設定義好的Menu叫做Main navigation,而這個叫做Main navigation的Menu被放在Primary menu的區域裡面。

現在我們要編輯Main navigation這個Menu,加入一個叫做「模組介紹」的名稱,並連結到/module_introduction頁面上。我們可以從管理列表中的Structures > Menu > Edit Menu > Main navigation的add link來進入操作頁面。

menu_setting_16.png

設定頁面看起來應該像是下圖

menu_setting_13.png

Menu link title是會顯示在標籤頁上的名稱。

Link是按下這個標籤頁後會導向的頁面。

Enabled可以在不刪除這個標籤頁的情況下控制標籤頁是否出現,之後可以編輯。

Description是滑鼠移到標籤頁上但沒有點擊時會顯示的提示信息。

Parent link描述了這是放在Main navigation區塊底下的一員

Weight控制這個標籤頁是靠左邊還是靠右邊,垂直頁面的話就是靠上面還是靠下面。

 

接著按下Save去看看主畫面的成果吧

menu_setting_14.png

 

enjoy~