当前位置

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标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。