如何为自己的博客文章自动添加移动版本（目前仅支持博客园）

时间：2014-05-12 15:02:59 收藏：0 阅读：429

前言

从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中的，当前我使用的是免费模式，可能有时候比较慢。请见谅。

【备注】我将一直会保留这个网站。