云优cms采集插件 微信文章版式是怎么做的的？亮点的地方吧！

　　云优cms采集插件 微信文章版式是怎么做的的？亮点的地方吧！

　　不知道有多少次，我在微信公众号后台收到了诸如“你的微信文章版式怎么做”之类的问题。其实我觉得没什么值得问的，也不值得保守秘密，但总有人问，我觉得还是写个小文章介绍一下比较好，下次有人问我就直接掉链接了~

　　我不是背景艺术家或 UI/UE 背景，但我们的（前）联合创始人 DeadFire 专门从事这方面的工作。但是，他已经不可能再对Linux China做任何UE调整了，/cry。不过我们UE还是挺不错的，就用这些风格来纪念一下吧。

　　说说我们微信文章布局的一些亮点。

　　首先，让我谈谈一个前提。 Linux中国的文章全部通过网站的cms编辑，不使用外部第三方微信编辑。所以，如果你有一个cms可以编辑内容，形成网页，那么下面的技巧可能更适合你使用；如果没有cms，理论上可以手动编辑HTML页面；或者，实际上，您可以将我们的文章 格式复制到可视化 HTML 编辑器中，或者修改内容。

　　1、代码高亮

　　作为技术网站，已发布的文章中的代码是必不可少的。之前我们用过一些代码高亮插件，但是因为一些缺点我们放弃了。

　　目前我们使用的代码高亮插件是谷歌的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 是 Rakana 的意思，用于在 HTML 中标记注音符号。各个浏览器对 RUBY 标签的支持程度不同，但都支持最基本的用法，包括微信中的浏览器。

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

　　当然，其实RUBY标签也有很多子标签和不同的格式变体，但是一方面每个浏览器的支持效果不同，另一方面微信浏览器只支持这个基本格式。需要深入研究的同学可以自行搜索。

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

　　此外，RUBY 标签也可以嵌入链接中，这也很常见。你可以自己探索。

　　最后，RUBY 标签自然有默认的显示样式。很显然，你这个关心用户体验的人，肯定会单独为它调整CSS吧？

　　3、其他

　　其实除了以上两点，我们并没有什么特别的区别，只是在用户体验的细节上还是有所调整的，只是这些都是大家意见不一的地方。您可以根据需要参考我们或其他页面体验。从具有特色的页面中学习。

　　另外，在微信文章发了几年之后，有一点心得分享给大家：

　　好的，我就粗略的总结一下，希望对大家有所帮助，有什么问题欢迎留言讨论，也欢迎大家分享自己的经验。

　　（标题图片来自：[4]）