你试过“打印”博客文章吗?

413 6

前几天看到有人讨论“将博客文章批量导出为PDF文档”的相关话题,这让我想到:如果将博客文章打印出来,会是什么效果?

我打开浏览器,点开一篇博客文章,按下Ctrl+P,看到了弹出的打印预览效果:很一般,和显示在A4纸大小的屏幕上的博客文章没什么两样。而且由于这种“屏幕”的特殊性,“打印”出来的内容是会被分页的,而且每一页都有顶部的LOGO、菜单和搜索图标,底部还有各种链接、评论框、标签等在这种特殊的“屏幕”上显得很多余元素,而且这种针对屏幕的排版对纸面空间的利用率非常低。

通过简单的搜索,我了解到CSS可以为打印指定专用的样式。操作方法也很简单,如果你用的也是WordPress,那么你可以在当前主题(或子主题,下同)文件夹下的header.php文件中的<head>和</head>之间添加如下代码:

<link rel="stylesheet" href="/wp-content/themes/[your-theme]/printstyle.css" media="print" />

将上述代码中的[your-theme]修改成你当前主题文件夹,并在此文件夹下新建一个printstyle.css,接下来,将需要用于打印的CSS代码写入其中即可。其他的CMS操作方法也是类似的,这里就不赘述了。

要将网页内容更好地打印在纸上,我首先想到的是以下几个优化方向:

  1. 删除“在纸上不可用没必要展示的内容”,如分类、标签、评论框、小工具、推荐文章、背景;
  2. 增加“在纸上不可用有必要展示的内容”,如链接、来源声明;
  3. 优化“在纸上可用有必要展示的内容”的显示效果,如文章、评论等内容的颜色、排版;
  4. 保留一部分可以体现网站风格但不影响打印效果的元素,如颜色、字体、边框。

经过一些尝试后,初步确定了目前的风格。虽然仍有一些BUG,不过总的来说也无伤大雅,至少比优化之前好太多了。如果你正在使用电脑查看这篇文章,你可以立即按下Ctrl+P来查看当前的打印效果;如果你想知道优化之前的效果,只需打开浏览器控制台,将“printstyle.css”文件内容清空后再按下Ctrl+P。

当然,“打印网页”这种需求现在应该几乎不存在了,但它还有一个用法是:将文章保存为PDF。如果你想将某一篇文章分享给你的网友,却发现你的网站链接已经被各平台“特殊关照”,那这个功能就很可能派上用场了,至少会比截图和纯文本好一些。

我又随机访问了几位博友,尝试查看他们的博客文章打印样式,发现其实WordPress官方的主题对文章打印效果是有一定的优化的,而第三方的主题往往并没有很重视这个问题,直接打印的效果十分惨不忍睹,经常出现背景复杂、排版错乱、内容重复交叠等情况。当然,还有一些像我一样喜欢“魔改”主题的人,把人家本来优化得好好的效果给改得面目全非了。

欧阳桂花

欧阳桂花

本站特约作者、没文化、没技术、喜欢思考、热爱生活、是个好人。

6条评论

  1. 我试了一下默认什么都不调整。
    我的一篇文字需要打印七页,不过其中有三页是空白的。

    1. 这就是我说的“惨不忍睹”。
      不过问题也不大,可以在打印样式里隐藏掉左侧边栏、评论框,然后优化一些细节就可以得到还不错的效果。

  2. 曾经添加过这个功能,后来又去掉了,感觉对图片支持不太好。macOS Safari 可以直接使用阅读模式打印,但遇到图片跨页问题时仍然不好看。

    1. 是啊,这并不能彻底解决这个问题,只是尽可能做一点优化。对于比较大的图片,想做好的话只能重新排版,没有其他捷径。

  3. 真要保存住博客文章,打印版是必须了。

  4. 尝试了PDF,很有趣,不一样角度。

发表回复