您在這裡

首頁 » 部落格 » James Qi 的部落格

Drupal網站AMP和MIP版本中搜索框的替代

由 James Qi 在 2017年6月6日 - 11:18 發表

　　Drupal網站中自帶的搜索框中，form采取了post方式，然後跳轉到search/node/xxx這樣的頁面，我們在添加AMP和MIP版本的時候post form都遇到跨域提交的報錯問題，暫時還沒有解決，但可以自定義一個搜索框form，采取get方式，然後也是跳轉到search/node/xxx這樣的頁面，下面把實施步驟記錄下來：

　　在AMP版本對應的主題ampsubtheme_example下新建一個block：search form for amp，放置在所有AMP頁面頂部，PHP代碼内容如下：

<?php
global $language_url;
$prefix_url = $language_url->prefix;
$path = ($prefix_url == '') ? "" : "/$prefix_url";
global $base_url;
$button = t("Search");
$output = "<form action=\"$base_url$path/search_redirect\" method=\"get\" target=\"_top\">
    <input type=\"text\" name=\"keyword\">
    <input type=\"submit\" value=\"$button\">
    </form>
    ";
print $output;
?>

　　在MIP版本對應的主題mipsubtheme_example下新建一個block：search form for mip，放置在所有MIP頁面頂部，PHP代碼内容如下：

<?php
global $language_url; 
$prefix_url = $language_url->prefix; 
$path = ($prefix_url == '') ? "" : "/$prefix_url";
global $base_url;
$button = t("Search");
$output = "<mip-form method=\"get\" url=\"$base_url$path/search_redirect\">
    <input type=\"text\" name=\"keyword\">
    <input type=\"submit\" value=\"$button\">
    </mip-form>
    ";
print $output;
?>

　　2017-6-13補充：百度mip表單默認引入了css style "display: block;"導緻按鈕與輸入框不在同一行，可以在上面兩個input中加入class=search_form，再在miptheme的mip-custom-styles.css文件中添加.search_form {display: inline-block;}就可以讓輸入框和按鈕在同一行了。

　　再新建一個頁面用于跳轉到search/node/xxx，路徑設置為“/search_redirect”，PHP代碼内容如下：

<?php
global $language_url; 
$prefix_url = $language_url->prefix; 
$path = ($prefix_url == '') ? "" : "/$prefix_url";
global $base_url;
    $query_string = $_SERVER['QUERY_STRING'];
    $keyword = substr($query_string,strpos($query_string,'keyword=')+strlen('keyword='));
    $http_referer = $_SERVER['HTTP_REFERER'];
    if (strpos($http_referer,'?amp') != FALSE || strpos($http_referer,'&amp') != FALSE) {
        $amp_mip = '?amp';
    } elseif (strpos($http_referer,'?mip') != FALSE || strpos($http_referer,'&mip') != FALSE) {
        $amp_mip = '?mip';
    } else {
        $amp_mip = '';
    }

    if ($keyword != NULL) {
        $url = "$base_url$path/search/node/$keyword$amp_mip";
        header("location: $url");
    }
?>

　　這樣浏覽者在AMP和MIP頁面頂部的搜索框中輸入關鍵詞、按“搜索”提交後，會把keyword轉交到search_redirect頁面，再由search_redirect頁面跳轉到搜索結果頁search/node/xxx對應的AMP和MIP版本頁面。

　　而搜索結果頁面中又帶有Drupal搜索模塊提供的搜索表單，導緻搜索結果頁面不符合AMP和MIP标準，浏覽者在這個新表單中輸入内容也無法獲得搜索結果，可以通過在AMP和MIP主題中去掉搜索結果頁中的這個表單來解決，具體辦法是修改對應主題中的template.php：

　　AMP版本的ampsubtheme_example主題修改：

<?php

/**
 * Preprocess all templates.
 */
function ampsubtheme_example_preprocess(&$vars, $hook) {
  $vars['ampsubtheme_path_file'] = DRUPAL_ROOT . '/' . drupal_get_path('theme', 'ampsubtheme_example');
}

/**
 * Implements hook_preprocess_HOOK() for HTML document templates.
 *
 * Example of a preprocess hook for a subtheme that could be used to change
 * variables in templates in order to support custom styling of AMP pages.
 */
function ampsubtheme_example_preprocess_html(&$variables) {

}

function ampsubtheme_example_page_alter(&$page) {
  // kpr($page); //use this to find the item you want to remove - you need the devel running.
  // Remove the search form from the search results page.
  if (arg(0) == 'search') {
    if (!empty($page['content']['system_main']['search_form'])) {
      hide($page['content']['system_main']['search_form']);
    }
  }
}

　　MIP版本的mipsubtheme_example修改：

<?php

/**
 * Preprocess all templates.
 */
function mipsubtheme_example_preprocess(&$vars, $hook) {
  $vars['mipsubtheme_path_file'] = DRUPAL_ROOT . '/' . drupal_get_path('theme', 'mipsubtheme_example');
}

/**
 * Implements hook_preprocess_HOOK() for HTML document templates.
 *
 * Example of a preprocess hook for a subtheme that could be used to change
 * variables in templates in order to support custom styling of AMP pages.
 */
function mipsubtheme_example_preprocess_html(&$variables) {

}

function mipsubtheme_example_page_alter(&$page) {
  // kpr($page); //use this to find the item you want to remove - you need the devel running.
  // Remove the search form from the search results page.
  if (arg(0) == 'search') {
    if (!empty($page['content']['system_main']['search_form'])) {
      hide($page['content']['system_main']['search_form']);
    }
  }
}

　　另外，AMP和MIP版本的html.tpl.php中需要分别添加對form的支持：

　　AMP版本添加下面一行到<head></head>之間：

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

　　MIP版本添加下面一行到</body>之前：

<script src="https://mipcache.bdstatic.com/static/v1/mip-form/mip-form.js"></script>

　　我已經在自己的博客中這樣實現了。準備後面再實施到其它系列網站中，系列網站設置後可以通過drush來批量設置和清除緩存讓設置生效。

　　補充：在有自定義模塊的系列網站中，在drupal_example_com.module文件中增加一下内容：

function drupal_example_com_block_info() {
$blocks=array();

$blocks['search_form_for_amp']=array(
  'info'=> t('Search').' '.t('Form').' '.t('For').' '.t('AMP'),
  'cache'=>DRUPAL_NO_CACHE,
  'weight'=>0,
  'status'=>1,
  'region'=>'header',
  'visibility'=>BLOCK_VISIBILITY_NOTLISTED,
  'pages'=>'',
);

return $blocks;
}

function drupal_example_com_block_view($delta = '') {
$block=array();
  switch($delta){
    case 'search_form_for_amp':
        $block['subject'] = '';
        if(user_access('access content')){      
            global $language_url;
            $prefix_url = $language_url->prefix;
            $path = ($prefix_url == '') ? "" : "/$prefix_url";
            global $base_url;
            $button = t("Search");
            $output = "<form action=\"$base_url$path/search_redirect\" method=\"get\" target=\"_top\">
                <input type=\"text\" name=\"keyword\">
                <input type=\"submit\" value=\"$button\">
                </form>
                ";
            $block['content']=$output;
        }
    break;
    default:
  }
  return $block;
}

function drupal_example_com_menu() {
  $items= array();
 
  $items['search_redirect'] = array (
    'title'=>'search redirect',
    'page callback'=>'search_redirect',
    'access arguments'=>array('access content'),
  );
  return $items;
}

function search_redirect() {
    global $language_url; 
    $prefix_url = $language_url->prefix; 
    $path = ($prefix_url == '') ? "" : "/$prefix_url";
    global $base_url;
    $query_string = $_SERVER['QUERY_STRING'];
    $keyword = substr($query_string,strpos($query_string,'keyword=')+strlen('keyword='));
    $http_referer = $_SERVER['HTTP_REFERER'];
    if (strpos($http_referer,'?amp') != FALSE || strpos($http_referer,'&amp') != FALSE) {
        $amp_mip = '?amp';
    } elseif (strpos($http_referer,'?mip') != FALSE || strpos($http_referer,'&mip') != FALSE) {
        $amp_mip = '?mip';
    } else {
        $amp_mip = '';
    }

    if ($keyword != NULL) {
        $url = "$base_url$path/search/node/$keyword$amp_mip";
        header("location: $url");
    }
}

　　在批量設置的sh文件中設置block、清除緩存：

drush sql-query "UPDATE block SET status='0',region='-1' WHERE module='drupal_example_com' AND delta='search_form_for_amp' AND theme='responsive_bartik';"
drush sql-query "UPDATE block SET status='1',region='header',weight='0' WHERE module='drupal_example_com' AND delta='search_form_for_amp' AND theme='ampsubtheme_example';"
drush cc all

　　其它的修改template.php、html.tpl.php等與前面單個站點設置是一樣的。

自由标簽:

發表新回應

更多關於文字格式選項的資訊

Plain text

  • 不允許使用 HTML 標籤。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。