1. 深入淺出 Drupal 版型設計
Chris Wu / Fliegen Creative

2. Chris Wu
 aka. Amouro
 賦格創意/ 集緻設計
 網站設計
 會議企劃
 Drupal 經驗 2.5 年

3. Theme
 版型? 佈景主題，視覺介面，介面設計
Drupal Core
Module
Interface
User

4. Skills
工程師 設計師
 程式設計師，前端工程師  UI 設計師，網頁設計師
 PHP? Of course!  HTML + CSS + DIV Layout
 Drupal Template/ API  Drupal Template
 .info / .tpl.php  .info
 Core API/ additional API  .tpl.php
 CSS + DIV Layout  PHP? Yes!
 Print
 Array

5. Find & Select a theme
 Easy
 找個喜歡的漂亮版型
 版面規劃符合需求
 Advance
 設計！
 尋找並安裝適合發展的基礎版型
 切圖，改寫CSS
 Hardcore
 親手從頭打造

6. EASY

7. EASY

8. SUPER EASY!

9. SUPER EASY!
http://boldy.dev.garethalexander.co.uk/

10. HARDCORE!

11. ADVANCE
 Base Themes
 ZEN – John Albin
 Adaptive theme
 Fusion
 Blueprint
 Omega
 Documents of Contributed themes (http://drupal.org/node/196218)

12. Theme Guide
認識版型程式

13. Basic – 基本中的基本
 Drupal 6 - Garland
 Drupal 7 - Bartik
 安裝版型

14. How the Theme system Works

15. .info (必備)

16. .info (必備)
 編碼：UTF-8 檔首無BOM (Byte Order Mark)
 Keys
 screenshot = screenshot_theme.png
 regions[left] = Left Sidebar
regions[right] = Right Sidebar
regions[my_region] = Customized Region
 stylesheets[all][] = style.css //D6 default
stylesheets[all][] = theStyle.css
;Add a style sheet with media query
stylesheets[screen and (max-width: 600px)][] = theStyle600.css
 scripts[] = myscript.js

17. Region Variables
 regions[left] = Left Sidebar
regions[right] = Right Sidebar
regions[content] = Content
regions[my_region] = Customized Region
 輸出 Region 的內容
 <?php print $left; ?>
 <?php print $my_region;?>
 <?php print render($page[‘left’]); ?>
 <?php print render($page[‘my_region’]); ?>

18. 區塊比較
Drupal 6 Drupal 7

19. 清除版型快取
 修改過 .info 檔案後，務必清除 Cache 才能以新設定運作
 清除方法
 Drupal 7: Administration > Configuration > Development > Performance
(admin/config/development/performance)
 Drupal 6: Administer > Site configuration > Performance
(admin/settings/performance)
 Admin menu, Drush, 版型設定(Zen, Fusion, AT)
 小技巧：前往版型列表
 D6: 網站建置 -> 版型 (Site building -> Themes)
 D7: 外觀 ( Appearance)

20. 樣板 .tpl.php

21. .tpl.php
用以輸出各階段的內容
• Region 在 Page 呈現的版型配置
• Block 在 Region 呈現的版型配置

22. page.tpl.php 產生主內容 (Drupal 7)
<div id="content">
<?php print render($page['content']); ?>
</div>

23. page.tpl.php 產生主內容 (Drupal 6)
<div id="content">
<?php print $content; ?>
</div>

24. regions[name] = Region Name
D7 Regions D6 Regions
 $page['content']: The main content of  $content
the current page.
 $sidebar_first
 $page['sidebar_first']: Items for the first
sidebar.
 <?php if ($page[‘sidebar_first’]): ?>  <?php if($sidebar_first): ?>
<?php print render($page[‘content’]); ?> <div id=“sidebar-first”>
<?php endif; ?> <?php print $sidebar_first; ?>
</div>
<?php endif; ?>

25. Override 覆寫 .tpl.php
 核心模組當中都有預設樣板  Block
(.tpl.php) “module/block/…”
 block.tpl.php**
 以 D7 為例：
 System:  Taxonomy
“module/system/…” “module/taxonomy/…”
 page.tpl.org  taxonomy-term.tpl.php*
 maintenance-page.tpl.php
 region.tpl.php*
 User:
*: new in D7
“module/user/…”
 user-picture.tpl.php **: was in “module/system/…”
 user-profile.tpl.php

26. Override 覆寫 .tpl.php
 block--[region|[module|--delta]].tpl.php  node--[type|nodeid].tpl.php
1. block--module--delta.tpl.php 1. node--nodeid.tpl.php
2. block--module.tpl.php 2. node--type.tpl.php
3. block--region.tpl.php 3. node.tpl.php
 comment--[node-type].tpl.php  page--[front|internal/path].tpl.php
1. page--node--edit.tpl.php
2. page--node--1.tpl.php
3. page--node.tpl.php
4. page.tpl.php
 field--[type|name[--content-type]|content-type].tpl.php

27. 以 Adaptive theme 為例
Take AT for instance.

28. .tpl.php 版本差異比較
Drupal 6 Drupal 7
 page-node-edit.tpl.php  page--node--edit.tpl.php
 node-mytype.tpl.php  node--mytype.tpl.php
 node--long-content-type.tpl.php

29. 撰寫 .tpl.php

30. 整形前

31. 整形後
node-product.tpl.php

32. 找出要使用的資料
(value)
<pre>
<?php print_r($node); ?>
</pre>
$node->nid
$node->status

33. 找出要使用的資料
(value)
$node->field_fieldname[0][“view’]
$node->field_main_image[0][“filepath”]

34. Layout with DIV
<div id=“custom-id”>
<h2> Title </h2>
<p> Body </p>
<div id=“sub-custom-id”>
<div class=“first”> <?php ?> </div>
<div class=“second”></div>
<div class=“third”></div>
</div> <!-- end of #sub-custom-id -->
</div> <!-- end of #custom-id -->

35. After edit
*再次清除版型快取(cache)

36. Feature Blocks
設計漂亮的區塊標題

37. DIV + CSS
配合 Firebug 或是 Chrome 的開發人員工具
小技巧: F12

38. Time for Q&A
amouro@laconique.com.tw