修改Drupal網站為響應式設計隻需更改一個自适應的主題

　　早在幾年前我們就開始趕移動Web的大潮了，2011年就有“公司内部技術講座：雲計算與移動互聯網、移動手機網站、搜索引擎優化”，然後“再次嘗試Drupal搭建手機版網站”，也進行了“MediaWiki網站添加手機版網站”，在這方面算是積累了不少經驗。一直到現在依然在采取電腦版+手機版兩種版本的方式來發布網站。

　　不過在這中間也了解到另外一種方式和趨勢：響應式設計網站，Google早就在推薦這種方式，AdSense也有配套的自适應廣告格式，但國内百度站長平台中推薦還是電腦版、手機版兩種分開的方式。我們前兩年也購買了一些講解響應式設計，HTML5/CSS3等的書籍，不過一直都沒有花時間精力深入了解和嘗試。為了讓頁面盡量多、占據搜索引擎的各種版本入口，做兩種版本也算我們一種策略。

　　今年以來，把國内托管和國外租用的服務器逐漸改為雲服務器，以前不太在乎的服務器CPU性能、内存大小、硬盤空間、網絡帶寬等，在向雲服務器上遷移的時候就顯得需要考慮成本了，特别是阿裡雲的RDS升級規格相當昂貴、ECS增加帶寬也開支不小。在考慮降低負載的時候，除了設法優化服務器設置、平衡反采集需要這些以外，也考慮是否采用響應式設計來減少各種爬蟲的抓取，而且随着手機性能的提升、3G/4G/5G網絡的到來，簡化、醜陋的專門手機版也确實該考慮退休了。

　　前些天把以前購買的幾本書都拿出來看了看，講的内容都比較多，不過具體到我們的Drupal網站上實施，其實非常簡單，就是換一種響應式設計的主題就可以，我以前也嘗試過Bootstrap、Zen等名聲比較大的幾種，但看上去太簡單、甚至到醜陋，還需要自己進行一些子主題的開發，當時沒有時間搞也就放下了，這次找了一個叫做Responsive Bartik的主題，看上去與Drupal 7自帶默認主題Bartik非常相近，沒有什麼不協調變化的感覺，雖然官方網站上這個主題已經停止更新開發了，但我還是決定就用它！

　　這幾天在幾個小的網站（包括祁勁松的博客）中進行了實施，很順利，隻需要改用新主題，并在html.tpl.php, page.tpl.php中做很少的廣告位等修改就可以，然後把以前的手機版取消，用.htaccess重定向到現在的響應式版本。今天又在以前的多語言系列網站中進行了批量實施，把步驟和遇到的問題記錄一下：

1. 在系列網站的目錄下，下載新主題到sites/all/themes下：運行drush dl responsive_bartik；
2. 對比以前修改過的主題模闆文件，修改新主題中的模闆文件：sites/all/themes/responsive_bartik/templates/html.tpl.php, page.tpl.php, node--xxx.tpl.php, search-result.tpl.php等，注意Google廣告可以改為自适應代碼，并增加新的網頁級廣告代碼page level ads；
3. 如果有必要，修改自定義模塊中與主題有關的布局及廣告，例如sites/all/modules/my_module/my_module.module 文件中定義的首頁、block（多語言網站的電腦版以前左側放置了語言切換block，響應式主題以後改為内容下方放置下拉式語言切換block，左側如果隻有搜索框也可以轉移到内容上方）等，如果還有各個子網站中單獨創建的頁面，也單獨去編輯修改；
4. 批量運行腳本來在各個子網站實施：drush en responsive_bartik; drush vset theme_default responsive_bartik; drush cc all，如果是清理緩存後依然遇到Notice: Trying to get property of non-object in _theme_load_registry之類的報錯，還需要清理memcache或者阿裡雲OCS的緩存；
5. 在各種終端、各種分辨率下檢查各子網站、各種頁面，确認各種顯示布局、各種鍊接、各種廣告等等都無誤；
6. 修改系列網站的.htaccess，去掉以前對手機終端的判斷及跳轉，新增以前手機版網址跳轉到現在的自适應版本；
7. 如有必要，修改robots文件、xmlsitemap文件，在Google Webmaster平台、百度站長平台去删除以前提交的手機版。

　　我在百度聯盟後台咨詢過百度是否有自适應的廣告代碼或者其它合适的解決辦法，回複是目前暫時還沒有，那就隻好先放一放中文站點。下一步還準備去修改采用Google AdSense的更多外文網站，其中還有一點問題，就是以前的電腦版、手機版中調用不同的Google Maps API如何解決，現在先用的是以前手機版的，如果遇到以前電腦版、手機版中更多不同的地方，也還要考慮如何來在響應式設計中統一。

　　是否有大的負面或者正面影響、用戶反映如何，還有待觀察反饋及後台流量和廣告數據分析。另外，MediaWiki中如何實施也還有待考慮、嘗試。

　　補充：在查看帶有需要驗證碼的留言頁面時，屏幕被撐開了，導緻上方不能正常顯示，查看是驗證碼輸入框css被定義為800px、500px、320px固定寬度，在sites/all/themes/responsive_bartik/css/style.css 中找到，都改為90%、刷新網站緩存就可以了。

.no-sidebars .comment-form .form-text {
  width: 90%; /* 800px; */
}
.one-sidebar .comment-form .form-text {
  width: 90%; /* 500px; */
}
.two-sidebars .comment-form .form-text {
  width: 90%; /* 320px; */
}

　　另外，responsive_bartik的node.tpl.php與bartik的node.tpl.php對比也有幾處改動為html5标記，在修改node--xxx.tpl.php的時候可以留意：

81c81
< <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
---
> <article id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?> role="article">
92c92
<     <div class="meta submitted">
---
>     <footer class="meta submitted">
95c95
<     </div>
---
>     </footer>
124c124
< </div>
---
> </article>

• 發表新回應