Drupal網站生成AMP版本頁面

By 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版本頁面（已經觀察到有了，對報錯可以檢查修改）。