Drupal 版型設計 - 瞭解版型程式
7 likes5,458 views
本文件详细介绍了顿谤耻辫补濒主题设计的基础知识，包括主题的安装、模板文件的使用以及如何通过清除缓存来更新设置。它还探讨了不同版本顿谤耻辫补濒的模板文件差异和自定义区域输出的方法。提供了一些设计和开发的技巧，适合希望深入了解顿谤耻辫补濒主题设计的工程师和设计师。
![.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](https://image.slidesharecdn.com/drupalonline-120218100137-phpapp01/85/Drupal-16-320.jpg)
![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’]); ?>](https://image.slidesharecdn.com/drupalonline-120218100137-phpapp01/85/Drupal-17-320.jpg)
![page.tpl.php 產生主內容 (Drupal 7)
<div id="content">
<?php print render($page['content']); ?>
</div>](https://image.slidesharecdn.com/drupalonline-120218100137-phpapp01/85/Drupal-22-320.jpg)
![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; ?>](https://image.slidesharecdn.com/drupalonline-120218100137-phpapp01/85/Drupal-24-320.jpg)
![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](https://image.slidesharecdn.com/drupalonline-120218100137-phpapp01/85/Drupal-26-320.jpg)
![找出要使用的資料
(value)
$node->field_fieldname[0][“view’]
$node->field_main_image[0][“filepath”]](https://image.slidesharecdn.com/drupalonline-120218100137-phpapp01/85/Drupal-33-320.jpg)
Drupal 版型設計 - 瞭解版型程式
- 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)
- 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. 整形前
- 32. 找出要使用的資料 (value) <pre> <?php print_r($node); ?> </pre> $node->nid $node->status
- 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 -->
- 37. DIV + CSS 配合 Firebug 或是 Chrome 的開發人員工具 小技巧: F12