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

December 14, 2016

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

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

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

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

1、代码高亮

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

目前我们使用的代码高亮插件是 Google 的 code-prettify，最初它是放在 Google Code 上的，现在也托管到了 GitHub： https://github.com/google/code-prettify 。

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

使用方法很简单，首先你得在页面中引入 code-prettify 的 js 文件，然后在你要高亮代码外使用 <pre class="prettyprint">...</pre> 或 <code class="prettyprint">...</code> 标签即可。比如：

<script src="run_prettify.js"></script>
<pre class="prettyprint">class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
}</pre>

然后看起来效果就是：

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
}

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

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

2、英文注释标签

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

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

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

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

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

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

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

3、其它

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

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

不建议调整正文字号，就用默认的 16px 即可，虽然看起来比较大——但是现在移动设备分辨率越来越高了，所以较小的字号可能会让部分用户看起来比较累。当然，也可以考虑使用 14px，如果你的文章不全是密密麻麻的字的话。
正文文字的颜色不要出现太多，除了黑色以外，最多有两种为宜。此外，在特殊情况下，你还可以考虑使用加粗，甚至斜体效果。
中英文混排时，以及掺杂数字时，尽量在英文单词与汉字之间加个空格，关于这方面，网上有篇《中文排版指北》，会有更详细的建议，不过我认为最重要、最基本的就是这条了。
文内配图，如果有可能尽量尺寸一致，最少要考虑保证图片宽度一致比较好。配图下方，必要时可以用另外一种文字样式来做图片说明。比如我们就是用斜体、灰色、下划线样式的字体作为图片说明。模糊的配图不要也罢，除非必要，用动图会显得很 low——有些老网友或许还记得 20 年前的网页上的那种 GIF 动画展览吧？
题图，如果你的标题不够好，那就选张好的题图吧，如果你能有一张切题的壁纸级题图，那显然会让你的公众号订阅者更高兴一些——如果细心的话，或许你可以放上这张壁纸级题图的高分辨率原图的 URL 地址？
微信后台的文章编辑器对很多 HTML 标签是不支持的，比如 DIV。所以，大家如果采用 div 布局的话，会发现桌面浏览器上看的好好的样式，复制到微信后台的编辑器中会变得惨不忍睹。这种情况下，你可以考虑用一些新的块级元素，比如 SECTION。
链接，微信文章仅在一些特定的情况下支持文内链接，所以，对于大部分公众号的微信文章来说，都是没办法在文内加上链接的。但是作为 Web 世界，有时候明明有链接的地方你不提供链接，你可以想象读者的怒火。这时候，我们有两种方式可以稍微补救。
1. 对链接的文字加上特定样式（如加上下划线），以暗示此处有链接，然后在后面加个上标，比如 [1]，并在文末单独对这个上标提供链接，这样需要的读者可以复制该链接访问。不过要注意的是，微信文章不支持 SUP 标签，你可以用 SPAN 标签来达成类似效果。
2. 如果文内链接不多，链接本身也不算长，你可以用括号圈起来写上链接，不过如果链接太多，也太长时，这会影响正文阅读效果的。其实这两种方式都是仿照纸质书籍这种无法做到超链接的出版物的。
对于长文章，你应该考虑在文内提供不同层次的大小标题。如果有可能，你还应该在页首提供一个目录、摘要等信息。当然，我们使用了 CMS，这种信息是自动提取生成的，可能要方便一些。

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

（题图来自：picswalls.com）