線上使用者

目前共有 0 位註冊使用者8 位訪客 在線上。

新會員

  • hihi
  • lady8904
  • xyz
  • arsisthesis
  • selly

書籍推薦

自定 "麵包屑 (breadcrumb)" 的顯示方式

Arthur Yu 的照片
Average: 4.2 (5 votes)

什麼是 "麵包屑 (breadcrumb)" 呢 ? 就是在網頁上面,會顯示各位大德所在位置的字串,這個也是可由各位大德自己來修改的,像阿舍之前的版型是顯示成 首頁 » 管理 » 網站建置 ,但是阿舍想改成 「首頁」 » 「管理」 » 「網站建置」,所以就要自己動手來改一下囉 !! ( PS. 要會一點 PHP 比較好 )...

在 Drupal 的資料夾下面,有個叫 includes 的資料夾,裡面有很多的 .inc 檔,這些就是 Drupal 內建的函數 ( Functions ) 存放的地方,依據功能和用途的不同,分別放在不同的檔案裡,其中有一個叫 theme.inc 的檔,這個,就是在 Drupal 中,存放各種與版型相關的函數的所在,今天阿舍要動到的函數叫做 "theme_breadcrumb()",不過,請各位大德別急,不是直接對這個檔來開刀的....=____=!!。

各位大德不知有沒有看過阿舍介紹 page.tpl.php 檔的那篇文,裡面有提到用 template.php 可覆寫 Drupal 的函數, 覆寫 ? 應該也可以說是取代吧 !? 只要在 template.php 檔裡加了一個和 theme.inc 相同名稱的函數,就可達到取代的效果。

但是,這裡講的相同名稱,並不是指真的取成一模一樣的名字,而有一定規則的,以阿舍要來取代的這個函數來說,在 theme.inc 裡,叫做 "theme_breadcrumb()",到了阿舍的 template.php 檔裡,就要變成 "phptemplate_breadcrumb()",各位大德有沒看出個端倪哩 ? 有沒看到從後面看來都一樣,只有前面不一樣,是啊 ! 這就是傳說中的 Drupal 掛勾 ( Hook ) 系統,就是透過特殊的函數命名方式,Drupal 在執行特定功能時,就會把這些有相同名稱的函數收一收,然後執行。

所以,今天阿舍就在 template.php 加了這個 phptemplate_breadcrumb() 函數之後,這個 "麵包屑 (breadcrumb)" 就要任我擺佈了...呵呵...(想太多...=____=!!)。


function phptemplate_breadcrumb($breadcrumb) {     
//<< 原來在 theme_breadcrumb() 有設的參數也要有。
	if ( $breadcrumb ) {
		foreach ($breadcrumb as $link) {
			$new[]= "「".$link."」";
		}
		return '<div class="breadcrumb">'.implode("»",$new)."</div>";
	}
}

上面這個就是阿舍把 "麵包屑 (breadcrumb)" 改成 「首頁」 » 「管理」 » 「網站建置」 的程式碼,阿舍稍為來講解一下。原則上,這個函數已經完全取代預設的那個 theme_breadcrumb() 函數,所以,等於是由這個函數來產生 Breadcrumb 的 HTML 碼。

傳進來的 $breadcrumb 變數是個陣列 ( Array ),所以,阿舍用一個 foreach 來把每個陣列的元素取出,每一個都在前後加上 "「" 和 "」" 符號後存到新陣列去,為什麼要存到新陣列呢 ? 因為阿舍偷懶,不想自己去加那個元素之間的 "»"符號,所以就放在陣列中,再交給 implode() 函數來處理,這個函數就是用來把陣列裡的元素,用指定的字串或符號組合成單一字串。

最後用 return 把組合好的字串送回去,但是要注意,記得在字串的前後加上 <div class="breadcrumb"> 和 </div> 的字串,這樣這個自定的 Breadcrumb 才能套用到版型所設定的 CSS 樣式。

另外,如果各位沒有要想阿舍這樣,要在元素的前後頭加入東西,只是要改中間的連結符號 ( 像阿舍是用 » 符號 ) 的話,那就更簡單了,就是在元素中間加入 div 標籤,再經由 CSS 來控制即可,請參考下列程式碼:


function phptemplate_breadcrumb($breadcrumb) {
	if ( $breadcrumb ) {
           $div = '<div class="breadcrumb-split"> </div>";
           return '<div class="breadcrumb">'.implode($div,$new)."</div>";
	}
}

如果是要在放入圖檔在元素之間,則在所使用的版型裡的 style.css 檔裡,加入下列設定:


.breadcrumb-split {
     background : url(xxx.jpg) no-repeat top left;
     width : 10 px ;     /*  請依圖檔大小設定 */
     height : 10px ;
}

其實,好像不太需要用到很多的 PHP 程式,只要觀念懂,就可以做出很多變化的....^^。

HongChi (未確認)
想請教關於breadcrumb用法

你好,
我和同學正在努力的研究如何做出「首頁」 » 「管理」 » 「網站建置」
,這樣的功能
我看了你兩篇的文章,一篇是
Views 模組 - 建立一個條列式清單 ( 中 )裡的
Breadcrumb trail should not include "Home" 介紹,
另一個就是這篇,
想請問你是不是要先把Views的相關模組先載好,
在去「管理」> 「Views」> 「Add」 加入Breadcrumb功能
才能如你所說的在theme.inc 文件裡寫CSS的語法?
因為我在theme.inc 文件並沒有看到這個theme_breadcrumb() funtion
到是有看到$variables['breadcrumb'] = theme('breadcrumb', drupal_get_breadcrumb());
我用的版本是Drupal6,想請你告訴我,我該用Views的方法做出這個功能,還是如這篇文章所說加入funtion,還是兩個都要做?
又或著我該參考你哪篇文章?
第一次問問題,不知道你看不看的懂,還麻煩你替我解答了...

Arthur Yu
Arthur Yu 的照片
User offline. Last seen 2 日 8 小時 ago. Offline
Joined: 12/17/2007
有幾種作法..

Hello,

阿舍這個程式碼好像是 Drupal 5 的,不太適用 Drupal 6 了,要弄這個breadcrumb,應該是不用用到 Views,最快的方法就是去找一個有內建 breadcrumb 的 Theme,不然,可以考慮用 http://drupal.org/project/custom_breadcrumbs 這個模組看看,如果都不滿意的話,就要自己改版型來弄了,請參考下面幾篇文...

http://drupal.org/node/64067
http://www.prolucid.com/node/47
http://drupal.org/node/698666

供參囉 ! ^^=

阿舍...
阿舍的 Drupal 架站經驗談
http://drupal.soa.tw

HongChi (未確認)
真的非常謝謝你~~

真的非常謝謝你~~

BloggerAds

Facebook Page

Drupal 新聞

Translate


訂閱服務...

最新回應

阿舍的隨手....