Drupal网站生成AMP版本页面

由 James Qi, 2017年3月21日

　　上周四去北京Google公司参加AdSense方面的研讨会，Juliana也专门讲了AMP方面的发展，特别是面向国外用户的网站可以首先采用。我上上周五和Juliana通过电话后，上周末自己也进行了一些摸索，记录了两篇博客文章《准备尝试Google推荐的AMP》、《AMP (Accelerated Mobile Pages) “加速移动网页”中的广告》，做了一个测试例子：https://drupal7.adsensebook.cn/?amp ，也算有了一点经验。在去北京期间与Google的人以及其他做过百度MIP的发布商一起探讨了一些相关问题。

　　回来后准备在面向国外用户的站点上实施，今天就在一个系列上来安装调试，把过程记录下来：

下载模块、主题：drush dl amp、drush dl amptheme、drush dl composer_manager，(需要使用adsense功能也可以不下载专门的adsense插件)
运行主题：drush en amptheme -y、drush en ampsubtheme_example -y
安装模块：drush en composer_manager -y、drush en amp -y（amp模块在做了其它设置后再设）
设置AMP：drush vset amp_google_analytics_id "UA-241337-59", drush vset amp_google_adsense_id "pub-9094871827609791"
修改那些内容类型的定制显示的设置，让amp版本可以查看，设置：Page is disabled: Enable AMP in Custom Display Settings，批量设置办法：drush ev '$info = field_bundle_settings("node","story"); $info["view_modes"]["amp"]["custom_settings"] = true; field_bundle_settings("node","story",$info);'注意运行上面后需要清理缓存才生效：drush cc all
遇到报错：RuntimeException: Error creating directory: public://composer in composer_manager_file_dir，是目录权限的问题，chown -R apache:apache sites/example.com/files/composer/ --from=root:root，然后报错就消失了；
设置Block：在amp主题中关闭一些常规web网站主题里面开启的block，例如：drush sql-query "UPDATE block SET status='0' WHERE module='search' AND delta='form' AND theme='ampsubtheme_example';"

设置AdSense广告：前面已经设置了amp_google_adsense_id，再设置4个AMP AdSense Block就可以：

drush vset amp_google_adsense_1_width 320
drush vset amp_google_adsense_1_height 100
drush vset amp_google_adsense_1_data_ad_slot 9814520596
drush vset amp_google_adsense_2_width 300
drush vset amp_google_adsense_2_height 250
drush vset amp_google_adsense_2_data_ad_slot 5244720195
drush vset amp_google_adsense_3_width 320
drush vset amp_google_adsense_3_height 50
drush vset amp_google_adsense_3_data_ad_slot 6721453390
drush vset amp_google_adsense_4_width 200
drush vset amp_google_adsense_4_height 90
drush vset amp_google_adsense_4_data_ad_slot 9674919791

drush sql-query "UPDATE block SET status='0' WHERE module='lang_dropdown' AND delta='language' AND theme='ampsubtheme_example';"

drush sql-query "UPDATE block SET status='1',region='content',weight='-20' WHERE module='amp' AND delta='amp_google_adsense_1' AND theme='ampsubtheme_example';"

drush sql-query "UPDATE block SET status='1',region='content',weight='0' WHERE module='system' AND delta='main' AND theme='ampsubtheme_example';"

drush sql-query "UPDATE block SET status='1',region='content',weight='20'  WHERE module='amp' AND delta='amp_google_adsense_2' AND theme='ampsubtheme_example';

如果验证的时候报错：
The tag 'amp-ad extension .js script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error.
可以在head中添加一句：
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

添加一个切换block：修改web版和amp版对应的html.tpl.php

<?php
$server_name = $_SERVER['SERVER_NAME'];
$request_uri = $_SERVER['REQUEST_URI'];
$query_string = $_SERVER['QUERY_STRING'];
global $theme;
if ($theme == 'responsive_bartik') {
  $normal_url = "//$server_name$request_uri";
  $amp_url = "//$server_name$request_uri?amp";
} else {
  $position = strpos($request_uri,'?amp');
  $request_uri_before_amp = substr($request_uri,0,$position);
  $normal_url = "//$server_name$request_uri_before_amp";
  $amp_url = "//$server_name$request_uri";
}
$normal = l('原始Web页',$normal_url);
$amp = l('AMP页⚡',$amp_url);
$output = "<p>$normal | $amp</p>\n";
print $output;
?>

修改模板：在amp的主题下修改node--xxx.tpl.php文件，参考常规web的主题下对应的node--xxx.tpl.php；
修改链接：从手机搜索引擎中点击带有amp闪电标志的页面会进入缓存的amp版本，此后再点击其中网站内部链接有三种可能性：1、继续进入缓存的其它amp版本页面；2、跳到网站本身的amp版本页面；3、跳到网页本身的常规web版本页面，这三种都是可行的，可以根据实际情况采纳，有必要就修改page.tpl.php以及前面说到的html.tpl.php、node--xxx.tpl.php；
修改模块：发现amp页面的<link rel="canonical" href="https://..." />在多语言情况下语言代码重复了，例如.../zh-cn/zh-cn/...，修改sites/all/modules/amp/amp.module中的canonical前后代码纠正；
node/xxx以外页面：目前amp模块暂不支持，可以通过修改amp.module和custom.module文件中与homepage有关的地方来实现首页加amp版本；
测试：拿典型页面来测试，看是否有报错的地方，测试工具有几种（需要翻墙使用）：
- Google AMP测试
- AMP validator
- 安装AMP Project的Chrome插件（安装要翻墙，使用不需要翻墙）
修改xmlsitemap.page.inc，添加amp版本链接（尚未进行，听说不需要）；
一段时间后在Google Webmaster Tools中观察是否收录了AMP版本页面（已经观察到有了，对报错可以检查修改）。