查看“MediaWiki网站添加手机版网站”的源代码

<center><font size="5" color=blue;">'''MediaWiki网站添加手机版网站
'''</font></center> <font size="4" color="#545454>
James Qi 在 2012年5月9日 - 15:51 提交
内容摘要：前年底开始采用Drupal搭建新网站以后，以前的MediaWiki的网站就很少更新了，偶尔有需要删除内容、修改模板、添加链接的时候才去动一下，版本也停留在当时的1.16，后来推出的1.17, 1.18......

　　前年底开始采用Drupal搭建新网站以后，以前的MediaWiki的网站就很少更新了，偶尔有需要删除内容、修改模板、添加链接的时候才去动一下，版本也停留在当时的1.16，后来推出的1.17, 1.18, 1.19都没有进行更新。

　　最近尝试了在Drupal中通过添加主题来实现同一套数据库生成桌面电脑版和移动手机版两种网站，已经搭建成功了，想到以前的MediaWiki网站应该也可以通过添加皮肤来实现同样的功能，以前曾经为简体中文版MediaWiki网站添加自动翻译的繁体中文版，所以也有一些经验，这几天就把一个数据量比较少的英文网站来做实验，算是基本实现了手机版：

电脑版：http://en.18dao.net
手机版：http://en.m.18dao.net
　　搭建中的一些要点记录如下：

采用了同一套数据两个URL的方式，手机版本的域名中添加了一个m.，是参照维基百科系列网站的多语言手机版的设置，没有采用/m路径的方式；

在服务器上两个网站放在各种独立的目录，cache分来，image可以软链接到一起，在LocalSettings.php中设置指向相同的数据库，但采用不同的皮肤；

手机版本选用简单的myskin皮肤，然后通过修改MonoBook.php来去掉Sidebar, Language Box, Personal Tool, Copyright Icon, Footer, Page Tool, Logo等多余的代码；

手机版的AdSense广告固定放置了top320x50和bottom300x250两个，其它电脑版的AdSense广告代码都不显示；

在手机版、电脑版底部都添加了互相切换的链接，是在皮肤文件中实现；

修改LocalSettings.php来添加<meta name='HandheldFriendly' content='true' /><meta name="MobileOptimized" content="width"><meta name="viewport" content="width=device-width">（<meta http-equiv="Cache-Control" content="no-transform" />  <link rel="alternate" media="handheld" href="http://自引用手机版页面URL"/>在includes/OutputPage.php中修改）的标签；

修改[[MediaWiki:Myskin.css]]或者[[MediaWiki:Common.css]]来去掉“来自：某网址”的现实；

修改[[MediaWiki:Sitenotice]]来在手机顶部添加网站名称和回到首页的链接；

修改includes/Linker.php，让电脑版中的未创建页面红色链接在手机版中显示为一个灰色的纯文字；

修改includes/CategoryPage.php让分类页从三列变为单列，并去掉首字母小标题；

修改includes/specials/SpecialSearch.php，让内部搜索结果不显示作者、日期信息，甚至也可以去掉页面标题下的简要描述内容；

如果有必要，修改includes/OutputPage.php这个程序，过滤不需要在手机版中显示的内容；

在MediaWiki页面或者模板中，可以通过判断域名来对显示内容进行取舍。

　　在进行了上面这些设置后，一个手机版网站就可以使用了，但是用

http://validator.w3.org/mobile/ 来检查的时候，对mobile的友好度竟然只有1%，有好多地方需要修改，好在都有提示，可以逐项检查、修改，下面是进行的部分修改：

将图片进行优化，24位、32位颜色的png文件改为8位，尺寸可以减少到原来的10%，首页8个图片优化后，对mobile的友好度就提升到22%；
将首页中的表格嵌套等进行修改后，友好度进一步提升到74%；
图片尽量优化、压缩，可以使用网上在线优化、压缩的工具网站；
少用表格，多用div来进行布局控制，避免表格嵌套、过宽表格；
有些内容，例如参考链接，可以留在电脑版中，但在手机版中去掉；
检查主要的几级页面的模板，进行统一的修改设置；
逐项检查各个栏目页面、内页，进行单独的修改设置。
　　这样优化修改后，应该还是可以做出一个不错的手机版网站出来，起码比百度自动转换平台、DudaMobile进行的转换会好一些。

　　修改、测试完成后，可以做下面几项事情：

打开手机版的file cache功能，让站点生成html静态页面；
修改电脑版的皮肤文件，在底部添加“手机版 | 电脑版”的切换链接，在<head></head>之间（在includes/OutputPage.php中修改）加入<meta http-equiv="Cache-Control" content="no-transform" />  <link rel="alternate" media="handheld" href="http://对应手机版页面URL"/>来禁止转码并指明对应手机版网址，并清空缓存让电脑版重新生成html静态页面；
在apache中设置自动判断访问者终端类型，发现是手机用户则自动重定向到手机版；
将robots.txt和sitemap都从电脑版复制到手机版的目录中，进行相应的修改；
在Google Webmaster Tools、百度站长平台中提及网站地图。
　　注意要多用一些浏览器、模拟器和实际手机、平板电脑来进行测试，力求在各种平台、各种分辨率屏幕上都有比较好的显示效果，这样以前MediaWiki做的网站又可以通过手机版焕发新春了。
----
[https://jamesqi.com/%E5%8D%9A%E5%AE%A2/MediaWiki%E7%BD%91%E7%AB%99%E6%B7%BB%E5%8A%A0%E6%89%8B%E6%9C%BA%E7%89%88%E7%BD%91%E7%AB%99?mip= MediaWiki网站添加手机版网站]