template

自定Views 欄位輸出 Views fields display

開發多了以後, 慢慢發展了一個自己比較喜歡的 views templating 方式, 分享一下

1. Row style
絕大部份 "Row style" 都會使用 "fields",
是為了靈活性, 可以在 "Fields" 取需要的欄位
相反 "Row style" "node" 只可以選擇 "full node" 或者 "teaser"
而且它的輸出就會使用 node.tpl.php
不方便, 我習慣自己建立 "frontpage" 資料夾專門用作放置該 views 的 template 的

2. *.tpl.php 儲存結構
續上, 一個 views 在該 theme 之內都有一個資料夾
甚至是一個 display 一個, 例如 views "frontpage":
--theme_joe (資料夾)
----frontpage (資料夾)
------views-view-fields--frontpage.tpl.php
----taxonomy (資料夾)
------views-view-fields--taxonomy.tpl.php

3. 專注在 "Row style" 自定輸出
在 theme information 中的 views-view-field*.tpl.php 是最好用的
可以自定以一個 result 為單位的 templates,
通常我都將views 自定的 HTML tags 全部移除
換上我需要的, 以一個 row 為單位重覆的 HTML,

<div class="row">
  <div class="pic"><?php echo $field_picture[0]['view'?></div>
  <div class="right">
    <div class="title"><?php echo $title; ?></div>
    <div class="description"><?php echo $field_description[0]['view'?></div>
  </div>
</div>

要留意的是, 使用 <?php echo $field_description[0]['view'?>
便要自己設定 "display as"
上例的的 picture 便要使用 "image" 或者 "image link to node"
而不可以使用 "generic file" 或者 "URL to file"

又或者, 你打算 image 的 alt 使用 title,
pic 用 "URL to file", views-view-fields*.tpl.php:

<img src="<?php echo $field_picture[0]['view'?>" alt="<?php echo $title; ?>" />

進階 views 模版(一): 簡介, 設定, tpl 檔 Complex views templating, part 1, intro, config, tpl

views 的 theming/templating 是Drupal theming 的高級班了
之前一直沒有信心將這個部份的教做好, 但這次都要挑戰一下難度, 唯有試試用多一點圖片展示了

首先, 我們常用的theme developer 是不能夠幫我們查出 tpl 的檔名的 (但仍可以看到可用的 vars)
因為 views 的 templating 機制雖和 Drupal core 的極相似, 但卻是views 自己定義的
主要是為了應付更複雜, 更多變的情況
但也不需要擔心, 概念上, 操作上都和我們一向做的非常相似

既然theme developer 不適用, views 有自己的 tpl suggestion: Basic settings 內的 Theme: information(下圖1)

上圖二便是 tpl suggestions, 而粗體則是現正在使用的 tpl 檔

你可以看到, 一個views 便有三個為一組的 tpl,
而其實如果你使用 "fields" 的話, 你的 views display 更由四個 tpl 組成

我們看看三個 tpl 各自負責那一部份的 output:

你會發現, display output 和 row style output 重叠了
那是因為我正在使用 "unformatted", 如果你用 "table" 或者 "unordered list"
row style output 便會改變成 table, ul tags 了

假如你鎖定了某一個 tpl, 你可以從 views 內建的 code 開始
你只要點一下 "display output", 你便會得到views 自己內建的 tpl code了
而且內建的 code comment 都很清楚, 只是需要更多變數的話, 還是使用 theme developer 點一下就好了.

待續..

修改首頁的template

你可以使用一個和其他頁面完全不同的首頁, 只要你能應用 template suggestion.

打開你的theme_developer module, 指一下首頁,
你便會發現frontpage 是有一個特別的suggestion: page-front.tpl.php

你只要在你的theme folder 內建立/複製一個page-front.tpl.php,
然後你便可以開始加特別的class 到body,
或者使用完全不同的region (front-left, front-mid-left, front-mid-right, front-right)
把首頁變作4欄以應付首頁大量資料的需求

p.s. 記得清空你的cache 以使用新增的page-front.tpl.php
p.p.s 你當然也可以使用panels 之類的模組完成相同的效果

原文: http://drupal.org/node/317461

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) >Read more

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