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,'&') != 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,'&') != 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等與前面單個站點設置是一樣的。
评论