使用 views 建立tabs, use view to build tabs

AttachmentSize
Image icon views-tab1.gif10.18 KB

上圖顯示了一個經過修改的 user page 的 tabs

tabs 其實來自一個 hook(), menu_local_tasks()
用 theme developer 指一下便可以看到
但這次介紹的並不是要修改這個 hook 的 theme template
而是使用 views, 新增一個tab 到這個地方

在上圖的例子,
一個 url 為 [root]/user 的 頁面,
要在 views 建立一個的 tab,

  1. 建立一個 page views
  2. 正常的輸入所需的資料 (sort, filter.....)
  3. page 的 path 要設定為 user/%/[joe] ([joe]為任何值)
  4. 在 page 的參數選項之中, 有一個 menu 的選項, 選 provide as menu tab

唯一有點難度的是設定 path
設定錯誤會令 tab 不在所需的頁面中出現
例子中, 因為user 頁 (即user profile 頁) 的正確 url 為 user/[uid]
你可以看到 edit tab 的 url 為 user/[uid]/edit
track 的 url 是 user/[uid]/track
所以, 在user 頁 輸出一個 tab 的正確 url 為 user/%/[joe]
% 是 [uid] 的萬用符

又例如, 現在的首頁的 url 為 frontpage
要提供一個首頁 tab, 便要將首頁的 url 改為 frontpage/[1]
首頁的 menu 是 default menu tab
tab 的 url 為 frontpage/[2], menu 為 menu tab
只要改變 tab 的weight 便可以控制 tab 的前後次序了

更多關於tabs:
在 drupal 的世界, tabs 的功能很多
它擔當了 "提供右鍵功能表" 的角式, 或者, "進階", "其他" 等等
從模組的角度, tabs 都是 menu 的一員, (註1)
但如果你並不是一個開發者

那你並不需要理解複雜的 menu 系統

只要懂得如何透過 views 使用它

正如你不需要輸入一句代碼便可以使用 Drupal 建立一個網站一樣

註1:
在 Drupal6+ 要清空緩存才會反映 menu 作出的修改
不過由於以上的例子是透過 views 設定, 而 views 已經替用戶清空

Devel block.tpl.php

AttachmentSize
Image icon devel-block.tpl.php.gif16.49 KB

devel 的 module block,
作為一個 Drupal 開發者, 是必須將它安放到 sidebar 吧
但這個 block 有一個很惱人的問題,
就是, 它太佔位置了
一整條長長的, 放了在 sidebar 之後
經常要使用滾動條, 十分不便

所以, 唯有用 theme 的方式, 將它獨立放到一個下拉式隱藏之內
省回些位置
做成了上圖的效果

製作:

先用 theme developer, 指向 devel block
它已經提供了一個最精確, 權限最高的 template 命名: block-menu-devel.tpl.php

將 theme 內的 block.tpl.php 複製,
並命名為 block-menu-devel.tpl.php
修改其內容:

//in block-menu-devel.tpl.php:

//加入 collapsible 所需的 jquery
<?php drupal_add_js('misc/collapse.js'); ?>

//框架
<fieldset class="collapsed collapsible">
  //標題
  <legend><?php print $block->subject ?></legend>
  //區塊內容
  <div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="clear-block block block-<?php print $block->module ?>">
    <div class="content"><?php print $block->content ?></div>
  </div>

</fieldset>

註: 由於 theme developer(Sep-11 6.x-dev) 的一個 bug, 開啟 theme developer 的情況之下, collapsible會失靈...

Theming search form, 搜尋框的模版

因為 drupal 原本內建的search form 搜尋框實在太單調的關係,
修改一下它的外觀, 模版...

當然, 先打開 search module(今天的主角), devel module, theme developer(開發用主角)
將search block 放到 sidebar,
用 theme developer 指一下,
便知道 search module 已經內建了搜尋框的 template 以供使用, 修改
search-block-form.tpl.php 是在 block 之內的 template
search-theme-form.tpl.php 便是其他情況下使用的 template
可以直接到 [base_path]/module/search 之內
複製所需的template 到你的 theme 之內
清空你的 cache 緩存, 你的theme 便會自動使用這個你新增的 template 檔了

其實一個搜尋框只有三種元素 (element)

  1. 輸入框 (textfield)
  2. 確定按鈕 (button)
  3. 隱藏參數 (hidden variable)

其中的按鈕和隱藏參數都可以在 template 內的 $search 陣列之內找到 (參考theme developer)
而餘下的輸入框只要複製原本的就可以了

但寫到這裏, 我的搜尋框還是和原本的一樣...

搜尋框內的預設值應該修改輸入框內的 value 值便可以了

<input type="text" class="form-text" title="Enter the terms you wish to search for." value="Type to seach!" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128"/>

但這樣便會出現一個問題, 就是, 當用戶點擊輸入框的時候
輸入框已經有預設值, 用戶要先清除預設值
才可輸入關鍵字
做成用戶不便
所以要用一小段 jquery 幫忙
  //使用輸入框的id 作定位
  $('#edit-search-block-form-1').click(
    function() {
      //清除預設字段值
      $(this).val("");
    }
  )

最後修改確定按鈕, 使用圖像作為確定用的按鈕

<input type="image" src="<?php print base_path().path_to_theme(); ?>/search.png" value="Search" id="edit-submit-2" name="op"/>

完整的 search-block-form.tpl.php 代碼:

//[path_to_theme]/search-block-form.tpl.php
//
<div class="container-inline">
  <input type="text" class="form-text" title="Enter the terms you wish to search for." value="Type to seach!" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128"/>
  <input type="image" src="<?php print base_path().path_to_theme(); ?>/search.png" value="Search" id="edit-submit-2" name="op"/>
  <?php //print $search['submit']; //預設的按鈕代碼 ?>
  <?php print $search['hidden']; ?>
</div>
<script>
  $('#edit-search-block-form-1').click(
    function() {
      $(this).val("");
    }
  )
</script>
AttachmentSize
Image icon theming-search-form.gif3.96 KB

mysqldump, DEV notes

DEV notes:

備份mysql:
mysqldump -u [user] -p [databasename] > [YYYYMMDDbackup.sql]

mysqldump -u [user] -p [databasename] [table1 table2] > [YYYYMMDDbackup.sql]

轉server, 抄DB:
mysqldump -u [user] --password=[password] [databasename] | mysql -u [user] --password=[password] [databasname2]

2008-07-13 cck 6.x-2.0rc4

既然views 和cck 已經成為Drupal 中不可或缺的元素,
當然也要寫一篇Drupal6.x cck 的rc 試用報告

如果你還在問什麼是cck, 它是用來做什麼的話,
建議你先看看 什麼是cck
這篇試用文假設讀者們已經有過簡單使用cck 的經驗為基礎的

假如還是有一點點不明白
用OOP 為比喻
內建的post, story 就是base class, 基類
cck 就提供了extend 擴展方法
令node 這個物件有它自己的子類
子類又有它自己的參數, 成員, 作為一種管理資料的手段

cck2.0 相對1.0 的版本
改變算不上多, 主要的加強包括內建了 "欄級權限控制"
和一些介面上的改進

欄級權限控制原是 content access 模組的功能
現在cck 將它內建了 cck, 作為一個子模組
它提供基於角式的每一個欄的 讀寫權限 控制
例如建立一個聯絡電話欄
但這個欄因為涉及個人資料
只可以向有相關權限的使用者存取的話
便可以到 使用者權限, 設定view, edit 權限予相關角式了

而介面上的改進都很直觀
"field type" 應該選擇相關資料的類型,
例如電話便使用 integer (沒有小數)
名字使用 text
性別也使用 text (M/F 或者 男/女 都是文字)
等等

"widget type" 則是一般使用者輸入資料的方法
名字使用 text field
性別使用 radio/checkboxes
等等

總結一下
cck 的2.0 功能上的改進只有新增一個權限控制模組
設定介面的改變輕微, 過渡的學習曲線不陡
所以, 還是將學習的精神放在views 的2.0 吧!

Pages

Google