修改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>

• 添加新评论