您在這裡

JohnAlbin sets out to give a Theme talk at DrupalCamp Chicago

John is set for giving another theming talk at DrupalCamp Chicago. http://www.drupalcampchicago.org/sessions/new-adventures-drupal-theming. Once he is done, I will ask him to share his experience and the slides.

JohnAlbin講Drupal版型(節譯):2009年12月21日星期一
適用於:Drupal初學者,想了解Drupal theme(版型)基本概念的人。(本文同步發表在我的部落格)
"JohnAlbin講Drupal版型(節譯)"譯自John Albin Wilkins在2009-12-12&13 DrupalCamp的演講,原文Roadmap to learn Drupal theme ,本譯文圖片均取材自原始幻燈片John Albin WilkinsZen Theme這一個園地的園丁。

阿羯說明:自從寫部落格以來,theme、版型似乎是個遙不可及的東西,接觸Drupal後,很想試試自己操控版型,多所摸索,不得其法,仍是對Drupal theme畏懼不已。幸好,經 水隆頭兄建議閱讀Pro Drupal Development線上節錄Hom的幫忙解說firefox + firebug後,再用firebug搜尋drupaltaiwan.org的結果,詳讀了這四頁,有些似懂非懂。今日看了John Albin Wilkins的演講Roadmap to learn Drupal theme ,豁然開朗,將演講中最基本的十頁節譯於下。

Page 9: Drupal版型-theme的組成:是由HTML、php、CSS三者組成theme

阿羯解釋:下面這個圖有深意。

  • 首先用陰陽太極(而非用一刀兩斷、兩個方塊的表示法)來表示,是種"你泥中有我、我泥中有你"之意。也就是說HTML和CSS相互為用組成了Drupal版型,是種融合,而非你是你我是我的情形。所以,要了解Drupal版型-theme,一定要會HTML及CSS(最好買一本兼有HTML和CSS的書,例如這一本)。
  • 其次,在這陰陽交融中,HTML是陽,CSS是陰,表示頁面表面上是由HTML建構而成,實際背後的黑手是CSS,所以,要詳讀CSS
  • HTML中有一段<?php print"with some PHP" ?>告訴大家,theme除了用到HTML之外,更加上些PHP程式。一講到"程式",立刻嚇倒Drupal初學者,其實,對一個簡單的站,根本不會用到"程式",Drupal初學者如果懂PHP,很好,不懂,就表示跟你無關,只要知道有這麼一回事即可。
  • 重點:HTML、php、CSS組成了theme


Page 10:Drupal theme 版型的層次:一個data進來,經過 Core -> Module -> theme engine -> base theme -> sub-theme,產生html、css、js,構成了頁面。以下這一張圖十分清楚地表示了Drupal theme的基本概念。 一般來說,我們講Drupal theme,指的是base theme,以下圖來說,就是Zen Theme、"禪"版型

Page 11: "Zen Theme、禪版型"的結構:由下圖可看到css、example.info、images、js、logo.png、template.php、templates、theme-settings.php八要素,templates又含有block.tpl.php、comment.tpl.php、node.tpl.php、page.tpl.php四個子項。這就是Zen Theme。

Page 12 page.tpl.php和版面: 由這一張圖及Page 13可以看到版面和page.tpl.php程式的關係。

阿羯解釋:怎麼看?
本圖右上的$search_box即為Page 13圖中Search box那一行<div id="search-box"> <?php print $search_box; ?> </div>產生的。

詳解這一行:div是個HTML,<?php ....?>是插入的PHP程式。

同理可知,本圖中的$primary_links、$left、$title、$right、$content、...都在Page 13的page.tpl.php圖中有相對應的HTML及PHP程式。或者說,本圖的頁面根本就是由Page 13的page.tpl.php產生的。


Page 13 page.tpl.php程式。見Page 12相對應的頁面元素。

Page 14page.tpl.php中的變數(variables)從那兒來的?

阿羯解釋:看下圖page.tpl.php右的$left,再順著箭頭,可知$left是由region.tpl.php來的,再順著箭頭,可知是由不同的block.tpl.php來的。其他的$right、$content同理。


Page 15 重點在於:

  • 你的版面、theme不一定需要所有的樣板、template(block.tpl.php就是個template)。
  • 你不需知道所有的變數、variables(variables就是$left、$right這些)。
  • Drupal會建構部份的版型(theme)。

阿羯解釋:事實上,簡單的網站,Drupal會建構好你需要的版型(theme),不會需要動到這些樣板、template。如果想小小的修改一下,改css(見下圖,有一個css folder)即可。


Page 16 Sub-theme: 若有能力、時間,可自己做一個外加版的sub_theme。而sub_theme只要加上所需的template、css,其他的仍是用原來base theme、modules、core的template、css。

Page 17 前處理,下圖加上Page 18共同解說了如何先在template.php更改了template變數(variables)的過程,以[theme name]_preprocess_[hook] function來呼叫。

Page 18:在template.php中,[theme name]_preprocess_[hook] function以STARTERKIT_preprocess_page、STARTERKIT_Preprocess_node為例,更改template變數。

詳解JavaScript & HTML & CSS 語法辭典:

  • 我的這一本是博碩文化2004年出的。
  • "語法辭典" 比書好入手,查索引,看一下辭典中的例子,立刻懂了。