theming

print.css

JOE — Thu, 17 Apr 2008 09:59:54 -0700

Drupal 內的一個常用的theme, Garland
經常給我用作範本, 東改改西改改成為一個新的theme
因為他左右sidebar 都可以, header, template.php 變數都很齊備
這次簡單說明一下theme 內的print.css

簡介 *.tpl.php

JOE — Mon, 24 Mar 2008 09:25:01 -0700

這是Drupal 使用 *.tpl.php 的基本之中的基本 (無論Drupal5.x, Drupal6.x)
因為很多讀者始終不明白 *.tpl.php 的運作
所有後加這一篇最簡單的篇章
這一篇完成後, 你可以:
story 不顯示作者, 提交時間,
但page 則顯示

Drupal6.x 自定form template

JOE — Mon, 25 Feb 2008 06:58:41 -0800

這一篇可真是費盡了心神, 開發時間估計有十小時以上...
請多多支持.....

一切事, 源於要修改 node/add 的form
因為太多摺了的選項, 想摺成一個"advanced options" 之內
(圖為最後成果)

Drupal6.0 theming 模版初探(二)

JOE — Wed, 20 Feb 2008 07:26:09 -0800

繼續鑽研
先弄清上一篇的一些疑問, 關於"需要重新載入theme, 令theme 可以使用新增的 *.tpl.php"
主站有一個官方的說明:(翻譯)

現在所有的theme 都需要註冊到資料庫(是之為theme registry). 在5.x 的環境, theme 是即場更新的. 但在6.x, theme 的每一個輸出都會經過hook_theme() 但不需要擔心, phptemplate 會幫你註冊新的theme 到hook_theme()

但有一個例外, forms表格不需要, 也不會註冊(往後的Drupal版本可以會改變做法)
更多的資源你可以參考theming 手冊

重要! 當你新增

Drupal6.0 theming 模版初探

JOE — Tue, 19 Feb 2008 02:25:40 -0800

上一次的更新已經是....九月!?!?
吐血中, 讀者們...不要走.....^^
留言的....多謝你們~無言以報

入正題
從freelance 的血海之中抽身,
花了些許時間研究Drupal6.x 的theming system (模版系統)
一句說話, 驚為天人

前言
http://drupal.org/node/171188
講得很清楚, Drupal6.x 和5.x 一樣,
所有個人化, 修改代碼的工作都應該發生在 /sites 資料夾之內
這次的目標是在 /user/* 的頁面,
用戶名之後加代碼 (這次是簡單的加一個"a")

準備
Druapl6.x 的theming 修改都是屬於某一theme 的
即是說, 修改garland 之後, 用戶轉到其他theme 便看不到修改了
(當然, 有其他方法"強行"用到全部theme...)
先將 /themes/garland 抄到 /sites/themes/garland (需要自建資料夾)
雖然Drupal6.x 不會再用theme 資料夾名決定theme 名稱,
但為了分別, 還是改: /sites/themes/garland -> /sites/themes/garland2
真正的修改theme 的名稱, 就要修改garland.info -> garland2.info
theme 資料夾內的 *.info 決定theme 的名稱
當然, 順手改一下 garland2.info 內的 name 參數
先不要到administer 改theme 成garland2

另外, theme 的開發者在6.x 之後得到一個極強力的幫手,
devel module
內裏的theme developer 便是"drupal 內的 firebug"
下載devel, 解壓到 /sites/modules/devel (需要自建資料夾)
到URL: /admin/build/modules 啟用模組
你就會看到

代表安裝成功了

正題
到目標URL: /user/1
點擊theme developer 以啟用
然後你只要指到你想要修改的element 之上, theme developer 就會告訴你要修改那裏:

/modules/user/user-profile.tpl.php (你指的可能是 user_profile_category.tpl.php 但這 tpl 是包在user-profile.tpl.php 之內的)
將/modules/user/user-profile.tpl.php 抄到 /sites/themes/garland2/user-profile.tpl.php
打開 /sites/themes/garland2/user-profile.tpl.php, 改成:

<div class="profile">
a
  <?php print $user_profile; ?>
</div>

儲存, 完成.
到URL: /admin/build/themes 改用garland2 作為預設theme

結語
有了devel module, 開發快了很多很多, 免除了追蹤xhtml 來自那裏個檔案的麻煩
修改的門檻低了很多, 只要安裝了devel module, 一般人只要些少訓練就可以改theme 了
現時關於Drupal6.x theming 的資料只是剛好足夠明白基本原理
主站的 handbook 還需要很多很多教學, 例子才可以令人看得懂....
最後一點, 有點奇怪的是, theme 只可以在安裝的時候找一次theme 內的 *.tpl.php(修正1)
即是說, 轉到新的theme 之前要決定好theme 內有那些 tpl.php
只是這點比較麻煩

連結
Overriding themable output - 這次的主要參考
http://drupal.org/node/173880

修正

2008-02-20: 這是因為theme registry

Drupal6 theming 模版

JOE — Tue, 19 Feb 2008 01:43:40 -0800

因為Theming 在Drupal 6.x 中有許多改變,
有些之前5.x 的教學已經不適用了

又,
因為連我自己都在觀察Drupal 6.0 的當中
移走之前的也....太可惜,
先開一個版放6.x 的東東

Theming 模版雜燴

JOE — Wed, 26 Sep 2007 09:11:45 -0700

Theming 的其中一個難題一定是多瀏覽器支援的問題
巿佔最高的品牌不跟足標準, 幾乎每一個瀏覽器都"think different"
難倒, 抓狂不少開發者
但既然每一個開發者都面對這樣的問題,
在這個web2.0 的時代就自然有解決的方法

下面是一些CSS 的 framework
這些framwork 就像drupal 內建的jquery 一樣
集合一些難纏的CSS, 變作一個框
你再將你自己的內容放到裏面就可以了
用作開發新的主題應該很合用

YAML builder
一個實用的WYSIWYG framework
可以自定一些常用的元素進去
http://builder.yaml.de/

Yahoo 大廠的出品
使用不簡單, 英文說明為主
http://developer.yahoo.com/yui/grids/#available-templates

Intensivstaion
一些已經建好的常用layout
http://www.intensivstation.ch/en/templates/

使用templates 自定user 頁

JOE — Wed, 15 Aug 2007 04:16:39 -0700

終於來到預定的templates 最後一章
這次只是給多一個例子給大家參考
並沒有新的技術, 函數要認識, 使用

在一個用戶登入之後,
預設會到逹 user/[uid] 頁面
今次的目的就是改動這個頁面
例如:

令登入都立即看到自己建立的nodes ( 配合使用views )
不同的登入id 使用不同的頁面
不同的roles 使用不同的頁面
不同的profile fields(例如"城市")到不同的頁面

等等
建立社區主導的網站應該會使用到這個教學

content-type 決定comment template

JOE — Mon, 13 Aug 2007 02:30:42 -0700

原本以為之前的一篇文章總結了*.tpl.php 的用法
但今天還是忍不住寫了這一篇:
content-type 決定comment template

例如, 如果有一個 comment-book.tpl.php 檔存在,
而你正在訪問的node 的node-type又是 book 的話,
drupal 就會使用comment-bookk.tpl.php, 而不使用comment.tpl.php

作為此系列的第二篇,
先從編程的角度解釋整個工作原理
再提供相關的代碼

Regions

JOE — Mon, 06 Aug 2007 21:24:53 -0700

新的模版有一個比較特別的地方,
就是自定了三個位於頁尾的regions,
而沒有使用panels.

當然, 第一是效能的考慮,
二來, 因為每一頁都會有這三個頁尾區
製作眾多panels 只費時失事

增加regions是theme 的管轄範圍
初初我也感到意外, 但為了保持彈性和可定製性
留在theme 的層面也是相當的合理
定製也只需要初階的編程能力
一般的模版開發者是可以應付得來的

在template.php 之內, 定義一個函數:

<?php
function mytheme_regions(){
  return array(
    'right' => t('right sidebar'),
    'content' => t('content'),
    'header' => t('header'),
    'footer' => t('footer'),
    'bottom_left' => t('bottom left'),
    'bottom_center' => t('bottom center'),
    'bottom_right' => t('bottom right'),
  );
}
?>

mytheme 是這個theme的名字,
那樣, $bottom_right, $bottom_left, $bottom_center 等的變數就會出現在page.tpl.php 之內
你可以將它們放到自定的位置, div 之內

//page.tpl.php
<?php if ( $bottom_left || $bottom_center || $bottom_right || $feed_icons ):?>
......

到 admin->site building->blocks 就會看到有'bottom left' 等等的選項了