如何為自己的部落格文章自動添加移動版本（目前僅支援部落格園）

標籤：style   blog   java   c   color   http   

前言

從2005年開始撰寫第一篇技術部落格，我也算是國內最早的一批技術部落格作者之一了。其中中斷過一段時間，但2008年重新啟用之後，這個習慣一直保留到現在，目前已經累積的文章數量已經達到1226篇。這些文章絕大部分都是原創的，轉載的有特別註明，文章內容大多是自己實際工作中遇到的問題和解決方案，或者我為企業做顧問服務、培訓服務時解決的問題，我尤其喜歡在解決問題後做一點總結，並整理成一篇部落格文章分享出來，一來是對思路的重新梳理，同時也希望也許日後能對其他人也有所協助。

這些年隨著移動互連網逐漸佔據主流，我也參與一些移動Web開發的實踐中，有幾次都想過這樣一個問題：如何讓這些部落格文章更好地在行動裝置上進行閱讀呢？從技術上說，PC版本的瀏覽器，因為螢幕較寬，所以更加易於閱讀部落格文章，而同樣的網頁在手機上面來看，效果就會差很多。

大家可以看到，如果不做任何地處理，那麼手機瀏覽器只會簡單地將頁面按照比例縮小。這樣的結果往往就是字型很小，閱讀困難。但如果像下面這樣，是不是會更加好一些呢？

從這些年的實踐來看，我總結出來移動化Web頁面應該有幾個特點

1.字型要略大一些，內容上應該要有所過濾，去除幹擾元素，讓使用者可以專註內容

2.布局上面要適應行動裝置的寬度和高度

3.互動方式，應該考慮到使用者是用觸摸，而不是用滑鼠。連結和按鈕要醒目。

4.不要過多地讓使用者輸入內容

 

所以說，網站的移動化其實涉及到頁面配置的重新設計。而可喜的是，在移動化Web 開發方面，已經有一些較好的架構。我很推薦的是jquerymobile。請參考官方的網站：

 

解決方案

今天早上起來花了一點時間，做了一個功能，能夠直接將部落格文章轉換為手機的版本。使用方式是這樣的：

1. 找到你要轉換的部落格文章地址，例如 http://www.cnblogs.com/chenxizhang/archive/2013/05/20/3088196.html 

在PC版瀏覽器看起來是下面這樣的

2. 通過在這個地址前面添加一段首碼( http://webfeed.azurewebsites.net/home/displayonlineblog?url=) ,也就是說，完整的地址是：http://webfeed.azurewebsites.net/home/displayonlineblog?url=http://www.cnblogs.com/chenxizhang/archive/2013/05/20/3088196.html。 如果有做過MVC開發的朋友一看就知道，這個是我設計的一個特別的Action。裡面的功能其實也不難，就是先下載部落格原文的內容，然後再結合架構進行重新格式化。

【重要】需要注意的是，我做的這個功能，是會自動識別瀏覽器的，如果你仍然是用PC版瀏覽器開啟上面提到的地址，那麼看到的介面將是下面這樣

但如果你真的使用行動裝置，例如手機來訪問，就會看到下面的效果

值得一說的是，我並不是簡單地改了部署，對其中的內容元素也會有些特殊的處理。例如針對圖片，我會添加一個樣式表，讓他們能自動適應手機螢幕尺寸。（哪怕實際上它的寬度是很大的）。同時，對於部落格文章一些內部連結（連結到部落格園的任意其他文章），會自動將連結地址換成移動化版本的），細心的朋友可以從中看到實際上裡面的連結地址是換掉了。

 

上面說到的這個方法，很簡單實用，你可以不受任何限制地使用這個地址格式，為你的部落格文章自動“產生”一個移動的版本，你可以將這些連結分享給你的朋友，讓他們在行動裝置上面可以更好地瀏覽你的文章。

 

【備忘】大家可以會對webfeed.azurewebsites.net這個網站感興趣，這是我最近的一個企業培訓練習項目（大家還沒有完全做完），這個網站分別示範了如何整合PC版瀏覽器和移動版瀏覽器（上面說到過了，他們會有不同的布局和互動功能），使用的技術是ASP.NET MVC 4 + jQuery Mobile + Knockoutjs 等。這個網站是託管在微軟的Microsoft Azure中的，當前我使用的是免費模式，可能有時候比較慢。請見諒。

【備忘】我將一直會保留這個網站。

 

改進的解決方案

我很快意識到，上面那個地址有點複雜，讓你去每次拼接地址似乎有點麻煩。所以我想了一個辦法，能不能讓這些網頁開啟的時候，就自動地產生好移動化版本的連結呢？感謝javascript，我們能做到。

首先，你可以進入你的部落格管理後台

你可以將下面這一段指令碼引用放在任何你想要的位置

<script src="http://webfeed.azurewebsites.net/mobilelink.js"></script>

例如，我是放在頁面頂部的

 

儲存設定後，在任何部落格文章顯示出來後，就會在頂部自動顯示一個連結，如所示

【備忘】你的部落格首頁，因為不是文章，所以實際上點擊之後，不會產生具體的內容

如果你開啟了具體的部落格文章，則那個連結就會有作用了。

 

 

順便提一下，如果大家希望更好地搜尋我所有的部落格文章，可以直接存取http://webfeed.azurewebsites.net

在手機端訪問的效果是下面這樣的

這個網站甚至已經整合到了裡面，如果有興趣，可以添加 dev2db 這個公眾號，直接在裡面可以搜尋部落格文章，詳情請參考下面這個文章

http://mp.weixin.qq.com/s?__biz=MjM5ODEyNjE5OA==&mid=200117429&idx=1&sn=239ab455e80f4bfe1ac5bdeb9c94d41b#rd

 

 

以上，希望對大家有所協助，拋磚引玉，如果大家有更好的做法，也歡迎分享。