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

6,235
-1

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

×