为什么我们的微信文章版式比较好看？

　　为什么我们的微信文章版式比较好看？

　　不知道多少次了，我在微信公众号后台收到询问“你们的微信文章版式是怎么做的”等问题了。其实，我本来觉得这没什么值得问的，也不值得保密，但是总是有人问，我觉得还是写一篇小文来介绍一下吧，下次有人问我，我就直接丢链接好了~

　　我本身不是做美工和 UI/UE 出身的，但是我们的（前）联合创始人 DeadFire 是专门做这个的，奈何他再也不可能为 Linux 中国做任何的 UE 调整了，/cry。不过我们的 UE 在他的努力之下，目前还算不错，也仅以这些样式来纪念他吧。

　　下面我来说说我们的微信文章版式的几个算是亮点的地方吧。

　　先说一个前提，Linux 中国的文章都是通过自身网站的 CMS 进行编辑的，并没有使用外部的那些第三方的微信编辑器。因此，如果你有一个可以编辑内容并形成网页的 CMS，那么以下技巧可能就比较适合你使用；如果你没有 CMS，理论上说你手工编辑 HTML 页面也是可以的；或者，其实你可以复制我们的文章的格式到一个可视化HTML 编辑器中，修改内容也可以。

　　1、代码高亮

　　作为技术网站，刊载的文章中出现代码是必不可少的，之前我们也用过一些代码高亮插件，但是因一些不足后来就放弃了。

　　目前我们使用的代码高亮插件是 Google 的code-prettify[1]，最初它是放在 Google Code 上的，现在也托管到了 GitHub：。

　　code-prettify 的优点是体积小，使用简单，而且自动识别所高亮的语言（虽然有时候识别的不对，但是其实没几个人真的在意对不对，大致能区分不同的语言成分就好了）。目前这个软件已经有比较长的时间不更新了，虽然还有 bug，不过大致上的功能没有什么问题。

　　使用方法很简单，首先你得在页面中引入code-prettify 的 js 文件，然后在你要高亮代码外使用

　　...

　　或...标签即可。比如：

　　<p>class Voila {

　　public:

　　  // Voila

　　  static const string VOILA = "Voila";

　　}

　　然后看起来效果就是：

　　<p>class Voila {

　　public:

　　  // Voila

　　  static const string VOILA = "Voila";

　　}</p>

　　可能你使用了code-prettify 之后也发现和我们的代码样式不同，其实，这只是我们使用了自己定制的一个 CSS 样式罢了，稍微研究下我们的页面代码，你就能找到这个CSS[2]的，你可以根据你的喜好进行修改。

　　当你做好了一个可以在浏览器中满意呈现的页面之后，你只需要复制该页面内容，贴到你的微信后台的编辑器中即可。

　　2、英文注释标签

　　我们经常会发布各种英文文章的译文，但是有时候，一些词汇需要附上英文才能比较好的避免歧义。通常大家的做法都是在中文后面用括号圈上对应的英文，但是随着 HTML5 规范的普遍支持，其实还有另外一种新的标签可以更好的用于这种情况。那就是 RUBY 标签。

　　RUBY 是振假名的意思，用于在 HTML 中标注注音。各个浏览器对 RUBY 标签的支持程度不同，不过最基本的用法都是支持的，包括微信内的浏览器。

　　简单的来说，RUBY 标签的基本格式如下：这里写中文English here，这个标签用浏览器看的效果是这样的：这里写中文English here。

　　当然，实际上 RUBY 标签还许多子标签和不同的格式变体，但是一方面各个浏览器支持效果不同，另外一方面对微信浏览器而言仅支持这种基本格式。需要深入研究的同学可以自行搜索。

　　目前应该还没有支持 RUBY 的 CMS，所以，一般情况下你需要手工编辑你的页面的 HTML 来插入这种标签——当然，我是自己开发了一个我的 CMS 的插件。

　　此外， RUBY 标签也是可以嵌入链接的，这种情况也比较常见。你可以自行摸索下。

　　最后，RUBY 标签自然有默认的显示样式，显然，作为在意用户体验的你，肯定会给它单独调整下 CSS 的，是吧？

　　3、其它

　　实际上，除了以上两点，我们并没有特别不同的地方，不过用户体验的细节还是有所调整的，但是这些就是见仁见智的地方了，大家可以根据需要参考我们或其它一些在页面体验方面有所特长的页面进行学习。

　　除此以外，做了几年的微信文章发布，我还有一点点小经验可以分享给大家：

　　好了，大致我就总结这些，希望对大家有所帮助，如果有什么问题，请留言讨论，也欢迎大家分享自己的经验。

　　（题图来自：[4]）