JohnAlbin sets out to give a Theme talk at DrupalCamp Chicago

去看了slide，很instructive。尚未深入，但zen好像比garland有更大的flexibility。

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 Wilkins是Zen 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年出的。
• "語法辭典" 比書好入手，查索引，看一下辭典中的例子，立刻懂了。

大叔可以參考這裡的影片：
http://drupaltaiwan.org/node/3782