這一篇可真是費盡了心神, 開發時間估計有十小時以上...
請多多支持.....
一切事, 源於要修改 node/add 的form
因為太多摺了的選項, 想摺成一個"advanced options" 之內
(圖為最後成果)

這一篇可真是費盡了心神, 開發時間估計有十小時以上...
請多多支持.....
一切事, 源於要修改 node/add 的form
因為太多摺了的選項, 想摺成一個"advanced options" 之內
(圖為最後成果)

繼續鑽研
先弄清上一篇的一些疑問, 關於"需要重新載入theme, 令theme 可以使用新增的 *.tpl.php"
主站有一個官方的說明:(翻譯)
但有一個例外, forms表格不需要, 也不會註冊(往後的Drupal版本可以會改變做法)
更多的資源你可以參考theming 手冊
重要! 當你新增
上一次的更新已經是....九月!?!?
吐血中, 讀者們...不要走.....^^
留言的....多謝你們~無言以報
入正題
從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>結語
有了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
修正
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/
又再消失了兩個星期,
實在是對不起我的讀者..
近來因為在做一單很有趣,
而且之前從沒有做過的類型的網站
而費枕忘餐的, 將工餘的時間都放了上去
連Drupal6 beta1 都還沒有下載
而且工作的過程之中, 更加發覺Drupal 的應用方面的強大
終於來到預定的templates 最後一章
這次只是給多一個例子給大家參考
並沒有新的技術, 函數要認識, 使用
在一個用戶登入之後,
預設會到逹 user/[uid] 頁面
今次的目的就是改動這個頁面
例如:
等等
建立社區主導的網站應該會使用到這個教學
原本以為之前的一篇文章總結了*.tpl.php 的用法
但今天還是忍不住寫了這一篇:
content-type 決定comment template
例如, 如果有一個 comment-book.tpl.php 檔存在,
而你正在訪問的node 的node-type又是 book 的話,
drupal 就會使用comment-bookk.tpl.php, 而不使用comment.tpl.php
作為此系列的第二篇,
先從編程的角度解釋整個工作原理
再提供相關的代碼
原本打算講解一下views 的theming
但發覺contemplate 的部分太草率
還是再詳盡解說一下應用技巧
contemplate 的設定介面分成三個群組
teaser, body, RSS (圖中紅框)
teaser 是撮要, 一般的首頁都使用撮要的顯示
雖然撮要的內容可能和正文一樣
題外話:
Drupal 內建的撮要機制令撮要獨立的放到一個field 中處理
所以當儲存node 的時候沒有設定撮要,
則及後再開撮要都沒有顯示撮要
contemplate 可以對teaser, body, RSS 作特定的顯示方式
而修改的方法則完全一樣
左面的窗口是輸出的php, html 代碼 (圖中藍框)
右面為一些可用的php 變數 (圖中綠框)
先按Affect body output 激活左面窗口
然後隨意修改html, php
再在右面的窗口按你想加入的變數, 如$node->title, $node->type 等
相關的code 就會加到左面的窗口了
按submit 就大功告成了

隨著持續的對views, cck, contemplate, template, css 等等的theming 方面的研究
發覺drupal 的theming 的確很自由
起碼比一般的CMS 強得多(無謂點名)
上面寫出的模組或技術都可以幫你定義表示方式
但它們職權分散, 部份功能有重疊
而且同一種表示方式可以有多種code+css 組合來實現
稍為不留神便連自己都忘記了是從那裡修改
令開發人員左改一點右改一點
令維護工作百上加斤
但其實只要分清模組之間的職權, 工作
理清theming 的思路都不算太難
加上Drupal6 之後cck 會內嵌到Druapl core
會令當中的關係更加清晰
註1: 以下假設你已經對cck, template和views 有基本使用的認識
註2: 以下的template 指 node-contenttype.tpl.php (或名為content type template),
可以對特定的content type 作版面修改, 非指template.php
註3: 我不敢說我介紹的這個分類方式是最正宗, 但已經是我多年的html css 經驗綜合的
先針對cck theming,
cck 自己只應該當作一種資料集合的儲存
各種field 模組(imagefield, link, email...) 都只為了豐富資料集合的種類
cck 的工作是集合需要的fields 之後, 集中到作為一個node 處理
而contemplate, template, css 就會負責顯示node部分
至於contemplate 和 template 之間,
contemplate 和template 都只對某一個指定的content type 起作用
他們的分別, 在於被修改的對象
contemplate 只可修改 cck 新增的fields
例如imagefield, textarea, user_ref, node_ref......
改動什麼都可以, 加減tags, class, id, fields 之間的排位
分成多少行, 兩排, 三排等等(圖一)
但不可以改動原有的 node title, author, submit time,
body , comment 的出現位置之類的部分
這些都留了給template 負責
node.tpl.php 中應該就 submitted time, content, node title 等排版(圖二)
設定相關的class, id, tags.
又, 要留意,
以上的這些改變都對用views 做的table, list view 的情況完全沒有影響
full node, teaser view 等便有影響
明日再談views 的theming
可供擺放javascript 和jquery 的地方有好幾個
要視乎javascript 的性質,
放到適當的位置
雖然放錯位置都不會影響效能
但為了維護的方便,
必需保持 顯示-控制分離
其實使用jquery 的情況好很多
從優化視覺效果到幫助使用者
到流行的ajax, 偏門點的繁簡轉換等等
都會用上jquery
jquery 可能會放到一個獨立的js 檔內
或inline 放到相關的html, php 檔都有
先從開發模組的角度看
取tabbed block 為例,
要讓unordered list 化成 tabbed block
便要用jquery 隱藏一部分內容
按下tab 的時候便顯示另一塊
加減某些class 等等, 都用上jquery
因此, 沒有了jquery, tabbed block 可算不上是tabbed block
所以, jquery 的部分一定要嵌入到模組之內
而且因為jquery 行數超過十,
順理成章放到一個獨立的 tabbed_block.js 之內
也是加jquery 最簡單的方法
<?php
drupal_add_js("tabbed_block.js");
?>而一般界面的優化
通常都會放到theme 之內
例如這站的淡入效果, 便將joe.js 放到其中一個theme 之內
page.tpl.php:
//包含js 文件:
<script src="<?php print base_path() . path_to_theme() ?>/joe.js" ></script>
//直接inline
<script>
$(document).ready(function(){
//....
});
</script><?php
base_path().parth_to_theme()
?>最後, 大家可能發覺我寫的文字很多
但例子少一點
實際使用時可能還要自己查一下API
這裡算不上什麼好地方
但個人覺得,
是因為"使用概念"比"使用方法"更重要
Drupal 發展真的一日千里
即將零七年六月一日, Drupal 6.0 就code freeze 了
也即基本寫好6.0 會加入的功能
只餘下測試, 除蟲的工作
當中一代接一代的代碼改變
API 改變等等都會令"使用方法"落伍, 不適用
但"使用概念"卻不會因為升級而改變
都會循一定的大方向而提升
所以有很多的篇幅描述這樣做那樣做的原因
而解決的思路又如何一步一步的推進
希望可以令大家有能力自己嘗試解決
而這裡只作一個穿針引線的作用