sorcererxw's blog

尝试实时渲染"截图"

January 21, 2019
声明:这篇文章其实是2018年8月写的,但是由于当时使用 Wordpress,而现在使用了自建的 Notion 博客,所以对网页渲染方式修改了一下,重新发布了文章。

今天看到 v2ex 上有人分享这篇博文, 比较有意思的是文章内的截图使用了 HTML+CSS 直接渲染, 而不是贴图. 觉得这个方式非常有意思, 首先就是图片不需要托管在图床上面了, 直接内嵌在文章当中, 方便备份. 而且, 因为是直接渲染的原因, 可以做到最大程度的高分辨率, 网页加载速度也会更快. 不过缺点就是麻烦, 而且各个平台的显示效果会存在差异. 不过不管怎样, 不如实践一下.

渲染 HTML

因为我一直都是使用 markdown 进行编辑文章, 正好我现在使用的博客系统是 WordPress, 所以我使用了WP Editor.MD进行文章编辑. 在设置当中开启支持HTML即可 当然, 其他的 md 编辑器, 只要支持 HTML 渲染都是没问题的. 这样一来, 不需要其他标记, 直接写 dom 就能渲染出来, 试着渲染一个 button 出来

HTML
example:
渲染 CSS

渲染了 HTML之后, 如果要真的渲染成一张图片, 还需要加入 CSS 样式.

inline-style

这是最直观的方式, 是直接将样式属性写在 tag 的 style 属性里面

style 标签

直接行内写样式最大的缺点就是不方便管理, 无法享受到 CSS 的好处. 在不加载 CSS 的前提下, 可以在 HTML 里面插入 <style> 标签, 来实现 CSS 的使用.

HTML
span

paragraph

这里我就用 div 来模拟了 pre 标签的样式 值得注意的是, style 标签的载入, 其中的样式会覆盖页面中已有的样式, 所以不能直接对标签进行加样式. 应该通过自定义 class 名或者 id 来配置样式, 就算是这样, 也要避免和页面中其他元素重名. 如果需要用到对标签加载样式, 请通过 CSS 选择器选中根元素下方的标签.

CSS 文件加载

WordPress 是不支持为单篇文章配置 CSS 样式的, 但是可以通过插件的实现. 但我还是不推荐这种做法, 因为这样, 这一篇文章就没办法轻易地复制到其他编辑器里面显示, 失去了 markdown 易迁移的优点, 实在得不偿失.

实操
6:00
6:00
Todoist
Photos
Play Store
Telegram X
WeChat

背景图片来自于unsplash

我就拿我的手机主屏幕来试了一下, 似乎效果还不错, 不过有点问题就是会被文章原先的主题的样式影响到, 实际做的过程还是要花点时间的, 具体细节都懒得扣了. 而且之前我说的不依赖于外部图片, 其实不对, 你看上面各种图标其实还是要载入外部图片的. 这一段代码我发在 Gist 上面了, 欢迎改进.

总结

结论就是我喜欢这种“截图”方式, 以后也会继续使用, 但是也只会在相对比较简单的, 而且对于整篇文章相当关键的图片上面.

license by-nc-nd 4.0