您在這裡

MediaWiki網站添加手機版網站

James Qi 在 2012年5月9日 - 15:51 發表

  前年底開始采用Drupal搭建新網站以後,以前的MediaWiki的網站就很少更新了,偶爾有需要删除内容、修改模闆、添加鍊接的時候才去動一下,版本也停留在當時的1.16,後來推出的1.17, 1.18, 1.19都沒有進行更新。

  最近嘗試了在Drupal中通過添加主題來實現同一套數據庫生成桌面電腦版和移動手機版兩種網站,已經搭建成功了,想到以前的MediaWiki網站應該也可以通過添加皮膚來實現同樣的功能,以前曾經為簡體中文版MediaWiki網站添加自動翻譯的繁體中文版,所以也有一些經驗,這幾天就把一個數據量比較少的英文網站來做實驗,算是基本實現了手機版:

  搭建中的一些要點記錄如下:

  • 采用了同一套數據兩個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做的網站又可以通過手機版煥發新春了。smiley

回應

我示範的站點内容更新不頻繁,所以可以用MediaWiki的File Cache功能來緩存頁面,電腦版、手機版我都是用了緩存,如果内容更新了需要更新緩存。
如果你希望實時更新的話,隻要把緩存關閉就可以,在LocalSettings.php中可以關閉File Cache或其它Cache設置,具體設置辦法要在MediaWiki官方網站中找。

James Qi / 祁勁松

萌娘百科我以前聽說過,剛才去看了一下,算是Wiki網站中很不錯的,有不少管理員、編輯者以及捐款者,這很難得。我看也有android/ios/windows phone移動應用以及微博、微信,确實應該有一個手機web版本才好,建議可以參考我上面的做法。

James Qi / 祁勁松

發表新回應

Plain text

  • 不允許使用 HTML 標籤。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。