您在這裡

Firebug:Drupal改版型、theme必備工具

jesselue's 的頭像
jesselue 在 2009-12-27 (周日) 13:18 發表

Firebug:Drupal改版型、theme必備工具:2009年12月22日星期二
適用於:Drupal初學者,想更改Drupal theme外觀 的人,css。
由於HOM的介紹,認識了Firebug,覺得它真是Drupal改版型、theme必備工具。
(一)安裝Firebug:
firebug是firefox的一個附加元件,打開firefox後(在安裝前需先升級Firefox,我已升級至Firefox/3.5.6) ,Click 工具/ 附加元件/取得元件,並在<搜尋所有附加元件>欄鍵入firefox,再Click搜尋放大鏡,就會出現firebug及drupal for firebug兩個元件,下載安裝後,再Click 工具/ 附加元件/擴充套件,就會看到已安裝的Firebug 1.4.5及DrupalForFirebug 0.0.5。如下圖:

(二)使用Firebug:
Firebug最好用之處在於找到theme內style.css中id及class的名稱,如下圖,這是drupaltaiwan,我們想看看drupaltaiwan右欄css的名稱是什麼?先Click<工具/Firebug/開啟Firebug到新視窗>,就會出現螢幕正中的<Firebug視窗>,接著Click <body ...>左方的+號,會出現一排div,試著將滑鼠移至某個div的id=...或class=...,會發現drupaltaiwan網站的畫面會跟著反白,而右欄則是相對於id="sidebar-right" class="sidebar" 的那個div ,這時候到style.css(以我的網站為例,我用garland theme,style.css在c:/xampp/htdocs/drupal/themes/garland內),再找到id sidebar-right及class sidebar,更改css,即可改變右欄的外觀。有關如何改css,可以參考css文件及JohnAlbin講Drupal版型(節譯)

 

使用 firefox 的 DrupalForFirebug 附加元件
drupal 網站那邊也必須啟用相對的模組:http://drupal.org/project/drupalforfirebug

1. Download and install the module.
2. Set the appropriate permissions for user's to see debugging information. By default only UID 1 can see anything.
3. Make sure that your theme is outputting the $closure variable. Most themes do, but some do not (and should).
4. Download the latest version of the Firefox plugin (see links above) and make sure its enabled.

  1. 下載並安裝 drupal 模組 drupalforfirebug
  2. 設定檢視 debug 資訊的使用者權限,預設只有 uid 為 1(最高管理者)能夠看到所有資訊
  3. 確認版型的 page.tpl.php 內有在結尾輸出 $closure 變數,大部分版型有(預設版型皆有),但少部分版型沒有(必須要加上)
  4. 安裝最新版本的 firefox 附加元件 Drupal For Firebug 並啟用,網址:https://addons.mozilla.org/en-US/firefox/addon/8370

功能方面的話
我沒有實際試過
看起來是 drupal 那邊可以把一些內部流程與資訊($node, $user...)傳給 firebug
或是透過 firebug 呼叫 drupal 那邊跑 php 指令的樣子
與 Devel 模組搭配好像還可以顯示 sql query
詳細功能請有空的人來 try try 看吧

---------------------------------------------------------------------------
見上附檔
隨便選一個node,其內容為:

---------------------------
testuser試CCK改 theme,theme副標題try1

<?php firep("hello there from firep"); ?>

line after phptttt

-----------------------

並選輸入格式為PHP code,這時php中的hello there from firep會出現在firebug/Drupal/General上,見上圖中firebug視窗中,General下有兩行:

  • Drupal for Firebug General Messages。
  • hello there from firep

有什麼用,不知?
我本來想找的是,是否能trace .tpl.php file,讓其print message到firebug/Drupal/General上,似乎不行。
若將這行放在page.tpl.php內,沒作用。firebug/Drupal/General console出現的是下列message。

  • There were no messages sent to the general log. Please use "firep($item, $optional_title)" to output messages to this console.

用firep($item, $optional_title)股溝搜,可在此http://drupal.org/node/352836#comment-2175364找到用FirePHP library可將.tpl.php內的message放到firebug的console 。

以上有些無厘頭,不過,這是我想try改theme的歷程,還搞不清楚,但devel似乎有用。
又,
装了drupalForFirebug,一定要有devel,firebug視窗內才會有最右那個"Drupal"(見上圖)。而且,少不了<啟用module/設權限>那一套。
自從裝了這一堆後,我的螢幕已變得一堆東西,大多看不懂,但至少看到一些來龍去脈。
我最好奇的一點是:
由index.php是如何跳至page.tpl.php的?trace index.php,主要只有五行,

  • require_once './includes/bootstrap.inc';
  • drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
  • menu_execute_active_handler();
  • print theme('page',$ return);
  • drupal_page_footer();

這五行,以drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);最具威力,它:

  • call bootstrap.inc內的drupal_bootstrap。
  • drupal_bootstrap再call其中的_drupal_bootstrap,
  • drupal_bootstrap中的1077行會 require_oncecommon.inc,
  • 然後在1078行call _drupal_bootstrap_full();
  • _drupal_bootstrap_full()在 common.inc中的2583行。
  • _drupal_bootstrap_full()內2592行又require_once './includes/menu.inc。
  • 在menu.inc內有menu_execute_active_handler() function。

因此,menu_execute_active_handler();這一行可執行了。
.....在這些code中,又陸續 require_once一堆 .inc file,最終讓print theme('page',$ return); 可以執行。
詳見Drupal 6.14 .php 原始碼瀏覽

我猜print theme('page',$ return); 就是將page.tpl.php print出來,theme('page',$ return); return的是page.tpl.php內所有的content。
但一方面不確定,而且,實在看不出來怎麼過來的。
再另文請教諸位先進了。

當然,這一切跟改theme有無關係也不知了,目前想法是由page.tpl.php著手,才栽進這一堆裡,先看page.tpl.php及如何做個sub-theme,再請各位指點了。

我的firefox都裝了firebug....
我也改了zen要來設計一些版型....
由放資質不好....
在firebug中..可以看到很多css html等等..
我不知道這些改好之後可以存起來嗎?
又如何去修改style.css
page.tpl.php
node.tpl.php
block.tpl.php
page-front.tpl.php
comment.tpl.php
等等

如何去修改style.css?
我是用dreamweaver去改style.css,另一文Drupal區塊捲軸(http://blog.xuite.net/jesselue/4664/29681382)舉例說明如何改style.css。
不知是否合用。
改.php file也可用dreamweaver。

另有免費的vim軟體改style.css或.php檔都很好用,最近覺得vim軟體比dreamweaver好用(可設line number)。
我有些心得(或是遇到的困難)文章在我blog的Drupal tag(http://blog.xuite.net/jesselue/4664?st=tag&p=1&w=2676b6be1297d42dc05a3bf...),有些也轉貼至此網站(http://drupaltaiwan.org/tracker/3543)。

不知以上資訊有用否?