讓 Drupal 產生適合餵給 AJAX 的精簡版 HTML 文件

Drupal 預設會盡力生出能通過 HTML validator 檢驗的文件,並且會盡力為各個 tag 添加各種 attributes 如 id, class, alt, title 等。在 Drupal 7 裡頭,搭配 Zen 5 的版型引擎,甚至能直接生出 HTML5 & Responsive Design Friendly 的文件。

相對來說,如果要用 Drupal 生出的網頁來餵給 AJAX 函式庫如 jQuery 處理,這樣鉅細靡遺的文件反而是個效能上的負擔。為此,我們可以透過簡單的幾行程式,讓 Drupal 生出比較不那麼囉唆的 HTML 文件。

首先就是實作 hook_preprocess_page(),比如這樣:

function my_module_preprocess_page(&$variables) {
  if ( isset($_GET['ajax']) && $_GET['ajax'] == 1 ) {
    $variables['theme_hook_suggestions'][] = 'page__ajax';
  }
}

透過自訂新增 theme_hook_suggestions,我們可以告訴 Drupal 系統:「如果我後頭指定 ajax 變數為 1,請優先採用 page--ajax.tpl.php 這個模板來輸出資料」。

再來我們實作 hook_preprocess_html():

function my_module_preprocess_html(&$variables) {
  if ( isset($_GET['ajax']) && $_GET['ajax'] == 1 ) {
    $variables['theme_hook_suggestions'][] = 'html__ajax';
  }
}

舉一反三,當 ajax=1 時,我們要系統優先採用 html--ajax.tpl.php 這個模板來輸出資料。

至於 page--ajax.tpl.php 長什麼模樣呢?在我們啟用的版型 (theme) 裡的 templates 子目錄裡(例如:sites/default/themes/mytheme/templates/),我們可以加進一個內容只要一行打死的 page--ajax.tpl.php 如下:

<?php print render($page['content']); ?>

意思就是說:我的頁面部份只要把主要內容 (content) 印出來就好,其餘什麼側欄啦頁首啦頁尾啦導覽工具列啦我全~部都不要。

然後接著就是同樣一行打死的 html--ajax.tpl.php 如下:

<?php print $page; ?>

類推,我們不需要輸出 <html>, <head>, <body> 等我們在做 AJAX 呼叫時用不到的資料,請給我重點部份就好。

這就是大概的施作方法,只要 URL 後頭補個參數 ajax=1(在 jQuery 裡可以放在 data 裡自動餵食)就會赤裸裸地展露該 resource 的重點部位。(怎麼寫得有點 A 的感覺…?)

CC BY-SA 4.0 This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Leave a Reply

Your email address will not be published. Required fields are marked *