打印出来是一团糟：目录站那份一直没写的打印样式
打
打印页面这件事听着过时，但在目录站的场景里并不罕见：有人要把某个分类的站点清单打出来做汇报，有人要把条目信息留给同事，还有人只是习惯把有用的一页存成 PDF。
而绝大多数站点打印出来的东西是没法看的——导航栏占掉小半页、深色背景变成一块黑、链接点不了也看不出指向哪、卡片被从中间切成两半。
图片来源：网络，版权归原作者所有，侵权请联系删除
核心就是一段媒体查询
打印样式不需要额外的文件、额外的请求，写在 print 媒体查询里就行：
@media print {
/* 打印时的规则 */
}这段 CSS 只在打印或另存为 PDF 时生效，对屏幕显示零影响，也不会增加任何加载成本。它是那种投入半小时、能让页面在另一个场景里体面起来的东西。
该藏什么
打印时页面上大部分装饰性内容都应该消失：
| 元素 | 处理方式 | 原因 |
|---|---|---|
| 顶部导航、侧边栏 | 隐藏 | 纸上没法点，纯占地方 |
| 搜索框、筛选器 | 隐藏 | 同上 |
| 广告位、推广条 | 隐藏 | 纸质材料上出现广告很尴尬 |
| 悬浮按钮、返回顶部 | 隐藏 | 屏幕专属 |
| 深色背景、大色块 | 改成白底黑字 | 费墨，且多数打印机效果差 |
写法上给这些元素统一加个类名会更省事，比如约定 .no-print，打印时一条规则全部隐藏，不用逐个列选择器。
@media print {
.site-header .nav, .sidebar, .search-box,
.ad-slot, .back-to-top, .no-print { display: none !important; }
body { background: #fff; color: #000; }
.card { background: #fff; border: 1px solid #ccc; }
}该显什么：链接地址
这是打印样式里最有价值的一条。屏幕上链接可以点，纸上不行，所以要把地址直接印出来：
@media print {
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 11px;
color: #555;
word-break: break-all;
}
}这条规则会在每个外链后面加括号印出完整地址。对目录站来说，这一条几乎就是打印功能的全部意义——用户打出来的那份清单，每条站点后面跟着能手动输入的网址。
几个要注意的地方：
- 只给
href^="http"的加，别给页内锚点（#xxx）也印一堆片段。 - 地址长的要允许断行（
word-break: break-all），否则会撑破版面。 - 导航里那些已经隐藏的链接不会显示，这正好——它们本来就不该出现。
别让内容被切开
打印分页是浏览器自己决定的，经常把一张卡片从中间劈成两半。几个控制断页的属性可以改善：
@media print {
.card, .entry-item { break-inside: avoid; page-break-inside: avoid; }
h2, h3 { break-after: avoid; page-break-after: avoid; }
}break-inside: avoid 是标准写法，page-break-inside 是老写法，两个都写上兼容性更稳。break-after: avoid 加在标题上，能避免标题孤零零留在页底、内容全跑到下一页。
目录站的列表页卡片通常都很规整，加上这两条之后打印效果会明显改善。
顺手补上的几件小事
- 把完整 URL 印在页脚。打印件散出去之后，别人得知道它出自哪里。可以用一个只在打印时显示的元素：
.print-url { display: none }，打印时改成display: block。 - 打印日期。同上，可以在打印时显示「打印于某年某月某日」，提醒这是快照不是实时数据。
- 图片降质或去掉装饰图。缩略图保留（它们是有用信息），纯装饰的大图隐藏。深色模式的站点尤其要确认打印出来不是黑底。
- 字体调小一点。屏幕上 16px 舒服，纸上偏大，正文 11 到 12pt 更合适。
- 去掉阴影和圆角。打印机表现不好，还费墨。
不要为打印单独建一套 URL
有人会想：既然打印要特殊处理，不如做个 /print/category/x 的打印专用页。不建议。
理由有三：一是它制造了重复内容，需要靠 canonical 或者 noindex 收拾；二是多一套 URL 就多一份维护，改版时最容易漏掉；三是用户分享的往往还是原页面，你拦不住。
用 print 媒体查询就够了。原页面打印出来体面，用户也不会去记一个专门的打印地址。
如果你的站点确实有「导出成 PDF」的功能需求，那是另一回事——那是生成文件，不是打印样式，可以用服务端生成或者浏览器的打印接口，但要给导出接口加限流，别让它成为抓取放大的入口。
怎么测试
不用真打印。Chrome DevTools 里有个专门的开关：命令面板搜「Rendering」，找到「Emulate CSS media type」，选成 print，页面立刻按打印样式渲染，改 CSS 时实时生效。
检查清单：
- 导航栏、搜索框、广告是否消失。
- 每个条目外链后面是否印出了地址。
- 卡片有没有被从中间切开（拖动打印预览翻几页看看）。
- 深色模式用户打印出来是不是白底黑字。
- 页脚有没有带上站点名和完整 URL。
整套做下来大概几十行 CSS。这在所有优化里算是性价比很高的那一类——工作量小，而且真有人用得上的时候，体验差别很明显。