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

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

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

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

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

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

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 themes (http://drupal.org/node/196218)

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 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

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’]); ?>

區塊比較 Drupal 6 Drupal 7

清除版型快取 修改過 .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)

樣板 .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 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; ?>

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

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

以 Adaptive theme 為例Take AT for instance.

.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

撰寫 .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”> <?php ?> </div> <div class=“second”></div> <div class=“third”></div> </div> </div>

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

Feature Blocks設計漂亮的區塊標題

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

Time for Q&Aamouro@laconique.com.tw

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

by amouro on Feb 18, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Drupal 版型設計 - 瞭解版型程式 — Presentation Transcript