Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
深入淺出 Drupal 版型設計         Chris Wu / Fliegen Creative
Chris Wu aka. Amouro 賦格創意/ 集緻設計   網站設計   會議企劃 Drupal 經驗 2.5 年
Theme 版型? 佈景主題,視覺介面,介面設計   Drupal Core        Module             Interface                         User
Skills            工程師                             設計師 程式設計師,前端工程師                    UI 設計師,網頁設計師 PHP? Of course!      ...
Find & Select a theme Easy   找個喜歡的漂亮版型   版面規劃符合需求 Advance   設計!   尋找並安裝適合發展的基礎版型   切圖,改寫CSS Hardcore   親手從頭打造
EASY
EASY
SUPER EASY!
SUPER EASY!              http://boldy.dev.garethalexander.co.uk/
HARDCORE!
ADVANCE Base Themes    ZEN – John Albin    Adaptive theme    Fusion    Blueprint    Omega Documents of Contributed ...
Theme Guide認識版型程式
Basic – 基本中的基本 Drupal 6 - Garland Drupal 7 - Bartik 安裝版型
How the Theme system Works
.info (必備)
.info (必備) 編碼:UTF-8 檔首無BOM (Byte Order Mark) Keys   screenshot = screenshot_theme.png   regions[left] = Left Sidebar  ...
Region Variables regions[left] = Left Sidebar   regions[right] = Right Sidebar   regions[content] = Content   regions[my_...
區塊比較  Drupal 6   Drupal 7
清除版型快取 修改過 .info 檔案後,務必清除 Cache 才能以新設定運作 清除方法  Drupal 7: Administration > Configuration > Development > Performance    ...
樣板 .tpl.php
.tpl.php用以輸出各階段的內容•   Region 在 Page 呈現的版型配置•   Block 在 Region 呈現的版型配置
page.tpl.php 產生主內容 (Drupal 7)<div id="content">  <?php print render($page[content]); ?></div>
page.tpl.php 產生主內容 (Drupal 6)<div id="content">  <?php print $content; ?></div>
regions[name] = Region Name               D7 Regions                                   D6 Regions $page[content]: The mai...
Override 覆寫 .tpl.php 核心模組當中都有預設樣板                     Block  (.tpl.php)                          “module/block/…”       ...
Override 覆寫 .tpl.php block--[region|[module|--delta]].tpl.php    node--[type|nodeid].tpl.php   1.   block--module--delta...
以 Adaptive theme 為例Take AT for instance.
.tpl.php 版本差異比較         Drupal 6                     Drupal 7 page-node-edit.tpl.php    page--node--edit.tpl.php node-m...
撰寫 .tpl.php
整形前
整形後node-product.tpl.php
找出要使用的資料(value)<pre> <?php print_r($node); ?></pre>$node->nid$node->status
找出要使用的資料(value)$node->field_fieldname[0][“view’]$node->field_main_image[0][“filepath”]
Layout with DIV<div id=“custom-id”>  <h2> Title </h2>  <p> Body </p>  <div id=“sub-custom-id”>    <div class=“first”> <?ph...
After edit*再次清除版型快取(cache)
Feature Blocks設計漂亮的區塊標題
DIV + CSS配合 Firebug 或是 Chrome 的開發人員工具小技巧: F12
Time for Q&Aamouro@laconique.com.tw
Upcoming SlideShare
Loading in …5
×

Drupal 版型設計 - 瞭解版型程式

7,289 views

Published on

Published in: Design, Technology

Drupal 版型設計 - 瞭解版型程式

  1. 1. 深入淺出 Drupal 版型設計 Chris Wu / Fliegen Creative
  2. 2. Chris Wu aka. Amouro 賦格創意/ 集緻設計  網站設計  會議企劃 Drupal 經驗 2.5 年
  3. 3. Theme 版型? 佈景主題,視覺介面,介面設計 Drupal Core Module Interface User
  4. 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. 5. Find & Select a theme Easy  找個喜歡的漂亮版型  版面規劃符合需求 Advance  設計!  尋找並安裝適合發展的基礎版型  切圖,改寫CSS Hardcore  親手從頭打造
  6. 6. EASY
  7. 7. EASY
  8. 8. SUPER EASY!
  9. 9. SUPER EASY! http://boldy.dev.garethalexander.co.uk/
  10. 10. HARDCORE!
  11. 11. ADVANCE Base Themes  ZEN – John Albin  Adaptive theme  Fusion  Blueprint  Omega Documents of Contributed themes (http://drupal.org/node/196218)
  12. 12. Theme Guide認識版型程式
  13. 13. Basic – 基本中的基本 Drupal 6 - Garland Drupal 7 - Bartik 安裝版型
  14. 14. How the Theme system Works
  15. 15. .info (必備)
  16. 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. 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. 18. 區塊比較 Drupal 6 Drupal 7
  19. 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. 20. 樣板 .tpl.php
  21. 21. .tpl.php用以輸出各階段的內容• Region 在 Page 呈現的版型配置• Block 在 Region 呈現的版型配置
  22. 22. page.tpl.php 產生主內容 (Drupal 7)<div id="content"> <?php print render($page[content]); ?></div>
  23. 23. page.tpl.php 產生主內容 (Drupal 6)<div id="content"> <?php print $content; ?></div>
  24. 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. 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. 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. 27. 以 Adaptive theme 為例Take AT for instance.
  28. 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. 29. 撰寫 .tpl.php
  30. 30. 整形前
  31. 31. 整形後node-product.tpl.php
  32. 32. 找出要使用的資料(value)<pre> <?php print_r($node); ?></pre>$node->nid$node->status
  33. 33. 找出要使用的資料(value)$node->field_fieldname[0][“view’]$node->field_main_image[0][“filepath”]
  34. 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. 35. After edit*再次清除版型快取(cache)
  36. 36. Feature Blocks設計漂亮的區塊標題
  37. 37. DIV + CSS配合 Firebug 或是 Chrome 的開發人員工具小技巧: F12
  38. 38. Time for Q&Aamouro@laconique.com.tw

×