本文约 4,641 字，预计阅读 12 分钟。文中命令与配置均经过实测，可直接参考执行。
引言：HR 只给你三十秒，PDF 还导出成一团乱码
找工作时你会发一个 PDF 简历，但它有个致命缺陷：版本会过期、链接无法点击、看不到作品的实际效果。做一份在线简历页能解决这些——HR 打开链接看到的是最新状态，作品可以点击跳转，联系方式一键拨号。可很多人做完发现两个新问题：一是页面用主题搭出来，花里胡哨的导航和侧边栏占了半屏，HR 找不到工作经历；二是 HR 想存档时点了浏览器打印，结果导航栏、页脚、背景色全印进去了，两页纸里有一页是垃圾。
这两个问题的本质是同一个：简历站的输出媒介有两个（屏幕和纸张），但你只设计了其中一个。屏幕版追求信息密度和可读性，纸张版追求结构化和留白。两者必须分别设计，而不是指望一次打印自动搞定。
原理分析：屏幕媒介与纸张媒介的差异
| 维度 | 屏幕版 | 打印版 |
|---|---|---|
| 导航 | 需要锚点跳转 | 必须隐藏 |
| 交互 | 悬停、折叠、灯箱 | 全部失效，需默认展开 |
| 链接 | 可点击 | 需显示 URL 文本 |
| 颜色 | 品牌色、深色块 | 黑白为主，省墨 |
| 分页 | 连续滚动 | 需避免内容跨页断裂 |
| 尺寸 | 响应式 | A4 / Letter 固定宽度 |
CSS 的 @media print 就是为这个场景存在的，但默认主题几乎都没写。你需要自己补：隐藏 .site-header .site-footer .sidebar，把折叠面板强制展开，去掉背景图，控制分页断点。
保姆级实操
步骤 1：用单页结构，别用多页面
整站只做一个页面（设为首页静态页），结构顺序固定：
<header class="resume-hero">
<h1>张明</h1>
<p class="tagline">后端工程师 · Go / Kubernetes · 8 年经验</p>
<p class="contact">
<a href="mailto:hi@example.com">hi@example.com</a> ·
<a href="tel:+8613800000000">+86 138 0000 0000</a> ·
<a href="https://github.com/example" rel="me">GitHub</a>
</p>
</header>
<section id="skills">核心技能</section>
<section id="experience">工作经历（倒序，最近一份最详细）</section>
<section id="projects">代表项目（3 个足够）</section>
<section id="education">教育背景（一行）</section>
<section id="contact">联系表单</section>
顺序遵循”招聘方最想先看什么”：技能 → 经历 → 项目 → 教育。经历必须倒序，最近一份写 4–5 条成果，更早的写 2 条即可。
步骤 2：写打印样式
这是本文的核心，直接放进子主题 style.css。重点是隐藏无关区块、强制展开折叠、控制分页：
@media print {
.site-header, .site-footer, .sidebar, .contact-form,
.breadcrumb, .social-share, nav.anchor-nav { display: none !important; }
/* 去掉背景与阴影，纯黑白 */
body { background: #fff !important; color: #000 !important; font-size: 11pt; }
* { box-shadow: none !important; text-shadow: none !important; }
/* 折叠内容默认展开，防止打印出来是空的 */
details { display: block; }
details > *:not(summary) { display: block !important; }
details[open] summary ~ * { display: block !important; }
/* 链接后附加 URL，纸张上才能看到地址 */
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
a[href^="mailto"]::after,
a[href^="tel"]::after { content: ""; }
/* 避免区块被截断在两页之间 */
section { break-inside: avoid; page-break-inside: avoid; }
h2 { break-after: avoid; page-break-after: avoid; }
.resume-hero { break-after: avoid; }
@page { margin: 15mm; }
}
步骤 3：加一个”下载 PDF”按钮
页面顶部放一个按钮，点击调用 window.print()，让浏览器另存为 PDF。比装任何 PDF 插件都轻：
<button type="button" class="btn-print" onclick="window.print()">保存为 PDF</button>
如果确实需要服务端生成，可用 Print Friendly 这类插件，但它会引入外部请求；纯打印样式方案零依赖、零延迟，也更可控。
步骤 4：加 Person 结构化数据
让 Google 在搜索人名时能把你的职业信息展示出来。通过 wp_head 输出 JSON-LD：
add_action( 'wp_head', function () {
if ( ! is_front_page() ) {
return;
}
$data = array(
'@context' => 'https://schema.org',
'@type' => 'Person',
'name' => '张明',
'jobTitle' => '后端工程师',
'email' => 'hi@example.com',
'url' => home_url( '/' ),
'sameAs' => array(
'https://github.com/example',
'https://www.linkedin.com/in/example',
),
'knowsAbout' => array( 'Go', 'Kubernetes', 'MySQL' ),
);
echo '<script type="application/ld+json">' .
wp_json_encode( $data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES ) .
'</script>';
} );
步骤 5：提供 vCard 下载
给 HR 一个 .vcf 文件，双击就能把联系人存进手机。手工写一份放站点根目录即可：
BEGIN:VCARD
VERSION:3.0
N:张;明;;;
FN:张明
TITLE:后端工程师
EMAIL;TYPE=WORK:hi@example.com
TEL;TYPE=CELL:+8613800000000
URL:https://example.com
END:VCARD
步骤 6：移动端优先检查
HR 常在手机上看链接。字号不小于 16px、行高 1.6、联系区固定在底部、点击区域不小于 44px。
常见踩坑
- 打印时折叠面板内容是空的：
details默认收起，打印不会自动展开，必须在@media print里强制display:block。 - 背景色打印成大片黑块：深色主题的简历页打印出来像被涂黑，务必在打印样式里重置
background:#fff。 - 链接打印后地址丢失：纸张上看不到 URL，必须加
a::after { content: " (" attr(href) ")" }。 break-inside: avoid只对现代浏览器有效：老版 Chrome 需要同时写page-break-inside: avoid，两个都写才稳。- 个人信息全站暴露：邮箱直接明文写在页面会招爬虫，建议用表单承接，或用
obfuscate方式输出。 - 案例：某设计师的”两页垃圾”：在线简历用深色主题带大图背景，HR 打印出来第一页是纯黑的封面图，第二页才勉强看到经历，最终这份简历被认为”不专业”。加上 30 行打印样式后，导出的 PDF 变成紧凑的两页 A4，反馈立刻好转。
- 超过两页：简历 PDF 超过两页，HR 基本只看第一页。项目只留 3 个，早期经历压缩成一行。
总结
判断简历站是否合格，用三个”一”来检验：一屏能看完核心信息、一键能存成两页以内的 PDF、搜索人名时能出现结构化摘要。做不到就说明结构或打印样式有问题。行动清单：先把内容压成单页并按”技能—经历—项目—教育”排序，再补这段 @media print 样式并实际打印一次检查分页，然后加 window.print() 按钮和 Person JSON-LD，最后放一个 vCard 下载入口。做完这些，你的简历在屏幕和纸张上都是专业的。想展示更多作品可配合 WordPress 作品集站搭建，如果要把它变成可售卖的产品页，见 SaaS 官网落地页结构。
