用nodejs 改造移動版本的osc翻譯頻道

##前言## 在瀏覽移動版本的oschina的時候,發現,怎麼要找不到我最喜歡的翻譯頻道,正好我做爲一個打雜的會一點node, 正愁着拿着node 不知道幹什麼東西好,就試着用node 作一個殼的移動版本翻譯頻道,若是你只對代碼有興趣的話,能夠直接去 下載下來運行看看效果https://github.com/youxiachai/nodeScrapeOscTranslationChannel

##準備## 其實,所謂的套殼,就是咱們俗稱的採集類網站,把別人網站的數據,變成本身的網站,雖然,不是上得了檯面的東西,不過,若是不是用現成的採集工具,而是本身動手來乾的話,你會對dom樹的操做,網頁的處理有更好的理解.基於某種考慮,特別寫上.

###運用的技術與庫###

1. nodejs
2. jsdom
3. hashmap
4. express
5. mkdirp
6. downloader

###分析### 咱們要從外部改造一個網站,首先須要熟悉咱們要改造對象的網站結構,將oschina 翻譯頻道進行草稿化,以下圖 ![在此輸入圖片描述][1]

通過我簡單分析之後而後轉換爲移動版本的話 ![在此輸入圖片描述][2]

在個人設計中只保留了分類,和列表,而在接下來的代碼實現中,我只實現了列表的部分...

##譯文列表部分## 翻譯頻道譯文列表的解析轉換代碼 請移步到gist 查看..爲了方便閱讀,修改了一下跟最後源碼的實現會有點不一樣.

幸虧翻譯頻道的結構挺簡單的,因爲剛上手js不久,這個初版的dom解析代碼還能夠進行簡化,雖然,如今這個版本挺難看的可是,能夠跑起來.

這段代碼的主要乾了如下事情:

1. 迭代每一個div.article 結點獲取列表的信息,而且用<li />標籤進行包裝
2. 把連接轉換爲相對連接.

最終的效果:左邊爲原頁面,右邊爲移動版本

![在此輸入圖片描述][3] ![在此輸入圖片描述][4]

好了,這就完成了web -> mobile 頁面的轉換,接下來咱們轉化一下內容頁

##譯文部分 草稿部分忽略,拍照什麼的挺麻煩的.. 翻譯頻道譯文內容的解析轉換代碼 請移步到gist 查看..爲了方便閱讀,修改了一下跟最後源碼的實現會有點不一樣.

這部分就比較簡單了,dom的操做

1. 獲取譯文內容
2. 移除了譯者信息..

最終的效果:左邊爲原頁面,右邊爲移動版本

![在此輸入圖片描述][5] ![在此輸入圖片描述][6]

內容方面咱們就搞定了.下面的部分就是如何部署一個套殼的網站

##創建屬於本身的移動網站## 前提: 對express 有必定了解

要web 化很簡單,只須要把剛纔的解析代碼放到路由裏面便可,詳細實現看源碼..

app.get('/', callback);

app.get('/translate/:title', callback);

最終演示用地址掛在我本身的服務器上:演示網址用了google的短網址服務可能有轉換慢,或者沒法訪問的狀況 <s>至於文章裏面的圖片.....osc有防盜鏈,放在本地卻是沒這個問題....反正就是隻是用來展現一下node 的相關應用..有興趣的本身diy 好了</s> 發現實際解決起來很是簡單...而後如今暫時來看就沒這個問題了...

最近,kindle入華貌似變成了事實,特此貼上kindle瀏覽的效果..圖片壓縮了一下,可能效果差了很多,不過對於kindle3 而言中文字體的確很難看,有kpw能否貼下?

![在此輸入圖片描述][7] ![在此輸入圖片描述][8]

##展望## 因爲整個程序雖然代碼很少,不過須要的知識的廣度很多,例如,dom樹,jsdom ,express, html5, 每一個知識都只是用了那麼一點...寫起來真很差下手,有興趣的朋友,能夠fork 我github的項目,地址,開頭就給了.

話說,有人不知道osc git 的嗎:在osc git 也上傳了一份

固然,這個程序是一個半成品(一個晚上的代碼,再花了一個晚上寫這篇博文),不少東西都還沒加上...接下來,我應該會着手實現webapp離線化....對了後邊應該還有加上個列表分頁..實際上,我還沒想清楚怎麼移動web 裏面比較好的加上分頁導航這個功能,嘗試直接放在列表尾,怎麼看都不爽,感受這樣分頁很不帶感,某天想清楚了,再動手實現..

以爲還能夠又有15 積分別忘了頂一下.. [1]: http://static.oschina.net/uploads/space/2013/0506/015215_kJpt_185428.jpg [2]: http://static.oschina.net/uploads/space/2013/0506/015232_shBY_185428.jpg [3]: http://static.oschina.net/uploads/space/2013/0506/015244_tsUm_185428.png [4]: http://static.oschina.net/uploads/space/2013/0506/015253_JcUi_185428.png [5]: http://static.oschina.net/uploads/space/2013/0506/015303_o21I_185428.png [6]: http://static.oschina.net/uploads/space/2013/0506/015311_d7v6_185428.png [7]: http://static.oschina.net/uploads/space/2013/0506/015322_sDQt_185428.gif [8]: http://static.oschina.net/uploads/space/2013/0506/015332_OWRo_185428.gif