• 搜索

做一点点,让文章看着更舒服

漂亮的文章应该是由丰富的内容和精致的排版构成。相对漂亮的内容,漂亮的排版会在读者第一次的阅读中产生更明显的冲击。

内容的美化是慢慢积累的,而对于排版的美化却是可以立竿见影的。近来尝试着写点东西,首先做的也是对于自己文字的排版美化。由于自己前端开发的职业优势,对页面渲染的原理是熟悉的。在阅读过「可能吧」阿蝉前辈写的关于排版的问题之后,更是学到许多。

理解微信文章的渲染

朋友圈中传播的文章是否有那么几篇从外观上让你铭记?是否为某一篇图文在掌上精致的效果而好奇?我们在浏览器(无论是手机,平板还是电脑)中浏览的文章,都是由文字,链接,图片等元素的 HTML 片段组成的,首先是浏览器内置的 HTML 渲染样式不同,再者是文章的宿主站点实现的渲染样式不同,呈现给我们的效果自然是有差异了。微信内置的是 X5 Blink 内核浏览器,微信文章的宿主是微信公众平台。

实现微信文章的美化

为了生产一篇看着比较美的文章,我们所要做的就是去改变浏览器对文章内容的渲染。为了达到目的,我们照搬几件工作。

1 形成基本的文章格式

微信文章,内容主要由分级标题,图片,列表,引用,段落,粗体,斜体元素组成。为了专注于内容本身,采用 Markdown 作为最基本的格式编排是极好的。Markdown 语法本身是很简单的,例如,用 ## 文字 表示二级标题,**文本** 表示粗体,- 文字 表示无序列表的一项。为了我们打造的样式能够在之后的一段时间内复用,形成基本的文章格式是有必要的。

2 将内容转换为浏览器可识别的

浏览器是不支持 Markdown 直接浏览的,我们需要将文章转换为浏览器可识别的 HTML 片段。我使用 Pandoc 实现两者之间的转换,Pandoc 是一个很强大的工具,有文本类型转换的朋友了解之后会发现新大陆的哟。

当然,很多 Markdown 编辑工具也是支持到处 HTML 文件的。

3 定义内容渲染样式

渲染样式决定了文章的最终效果,包括字体大小,颜色,行距,背景色… 样式定制是前端开发日常工作之一,对于初学者并不难,加之微信对于可自定义的样式的限制,需要学的更少一些。

如果是自建的站点,我们可以通过引入外部样式实现想要的效果,如同这样:

1
<link rel="stylesheet" href="/css/app.css">`

在微信公众平台中,我们需要通过创建内联样式实现,如同这样:

1
<strong style="background-color:#e4e4e4">2</strong>

我们是可以通过手动编辑生成的 HTML 文件实现目的,更高效的是编写脚本全局修改 HTML 元素的内联样式。方式很多,我是利用 Javascript 修改 HTML 元素实现的。

4 拷贝,预览,拷贝,预览

将最终生成的带有内联样式的 HTML 片段(注意是<body>标签中的内容)拷贝至在线编辑器中的源码模式,预览得到我们想要的结果,将编辑器中的内容拷贝至微信公众平台编辑器,预览最终效果,一切顺利,发布…

应用扩展

使用此方式实现的内容效果一般可以适用于支持自定义文章样式的文章发布站点,同样适用于大部分邮件模版。