LapisCV Typora 英文简历模板实战：Markdown 结构、图标系统与 PDF 导出配置全解析

• 前端
• 文档

LapisCV 是一套使用 Markdown 语法制作简历的开源方案，支持 VSCode / Typora / Obsidian 三大编辑器。本文以仓库中的 Typora 英文模板 为绝对主体，逐行解析其 Markdown 结构、内嵌 HTML 标记与图标转义字符的写法，并结合 Typora 主题样式源码 说明每个标记背后的渲染原理，最后给出从主题安装到 A4 PDF 导出的完整实操流程。读完本文，你将能够直接基于该模板替换个人信息，并通过 CSS 变量将简历调整出适合自己的版式。

模板整体骨架：一条简历由哪几部分组成

打开 templates/typora/template-en.md，可以看到一份完整英文简历模板的全部内容。它由以下 6 个部分按固定顺序组成：

1. 姓名标题：# The Octocat（H1，居中显示）
2. 联系信息栏：一个>引用的 blockquote，内含电话、邮箱、个人主页三个条目
3. 头像：一行<img alt="avatar" src="...">HTML
4. 教育经历：## Education板块
5. 工作经历：## Work Experience板块
6. 项目经历：## Projects板块
7. 专业技能：## Skills板块

模板的英文版示例内容为示例人物 "The Octocat"，对应的 中文模板 与其结构完全一致，只是板块标题换成"教育经历 / 工作经验 / 项目经历 / 专业技能"。如果你需要制作英文简历，直接以本模板为基础替换内容即可。

# The Octocat > <span alt="icon">&#xe60f;</span> `(123)456-7890`&emsp;&emsp; <span alt="icon">&#xe7ca;</span> `octocat@github.com`&emsp;&emsp; <span alt="icon">&#xe600;</span> [octocat](https://github.com/octocat) <img alt="avatar" src="https://avatars.githubusercontent.com/u/583231?v=4">

这段是模板的"头部三件套"：H1 姓名、blockquote 联系信息、头像。三者共同构成了简历的第一屏视觉焦点。结合 styles/main.css 源码可以看到它们的排版规则：H1 与 blockquote 均为text-align: center居中布局，blockquote p使用独立的--blockquote-size字号；而img[alt="avatar"]则被渲染为圆形头像并右浮动，宽度由--avatar-width变量控制。

联系信息栏：alt="icon" 与转义 Unicode 的协作

模板的联系信息栏使用了一段精妙的"Markdown + HTML 混合"写法：

> <span alt="icon">&#xe60f;</span> `(123)456-7890`&emsp;&emsp; <span alt="icon">&#xe7ca;</span> `octocat@github.com`&emsp;&emsp; <span alt="icon">&#xe600;</span> [octocat](https://github.com/octocat)

这里的关键技术点是<span alt="icon">标记 + 转义 Unicode 字符：

• 、、是 HTML 实体转义形式表示的 Unicode 字符，它们来自随主题打包的iconfont.ttf图标字体（见 Typora 经典样式 中的@font-face定义：字体族名为LapisCV Icon）；
• alt="icon"是一个约定属性，styles/main.css 中的选择器.icon, span[alt="icon"]会把这类元素文字颜色设置为主题色--color-accent，让图标在简历中呈现为蓝色主题点缀；
• `(123)456-7890`用反引号包裹电话号码，在 Typora 中会以等宽字体--code-font渲染，与图标形成"图标 + 等宽文字"的配对样式；
•   是两个全角空格实体，用于在三个条目之间制造间距。

从 styles/main.css 源码看，链接（a与a span）统一使用--link-font（默认JetBrainsMono）渲染，而普通正文p, li的字体族为"LapisCV Icon", var(--text-font)——字体列表第一位是LapisCV Icon，这正是图标字符能够正确渲染的底层原因：正文元素在绘制图标字形时回退到了图标字体。

头像：一段 HTML 搞定圆形裁剪与浮动

模板第 5 行是头像：

<img alt="avatar" src="https://avatars.githubusercontent.com/u/583231?v=4">

• alt="avatar"是触发头像样式的关键属性，styles/main.css 中.avatar, img[alt="avatar"]选择器将其渲染为圆形（border-radius: 50%）、右浮动（float: right）、带 2px 边框与白色描边阴影；
• 头像直径由--avatar-width变量控制（经典主题默认28mm，Serif 主题默认24mm）；
• 替换头像时只需修改src指向你的图片路径；不需要头像时直接删除这一行即可。

需要注意的是，Obsidian 无法识别 HTML 格式插入的本地图片，因此在 Obsidian 中推荐先把图片上传为外链再插入；而 Typora 对img标签支持良好，本地相对路径与网络链接均可直接使用。

四大板块：entry-title 双栏布局与简历内容写法

模板在 Education、Work Experience、Projects、Skills 四个板块中使用了同一套结构化的内容组织方法，下面逐一拆解。

板块标题：H2 + 图标

每个板块的标题都是##二级标题，且标题文本前带有对应的转义图标：

##  Education ##  Work Experience ##  Projects ##  Skills

对应关系为：=教育、=工作经历、=项目经历、=技能。在 styles/main.css 中，H2 标题使用主题色--h2-color并在底部绘制一条color-mix混合出的主题色分隔线（border-bottom: 1px solid color-mix(...)），与正文形成清晰的分区。

条目标题：entry-title 双栏布局

每个工作/项目条目都用一段div[alt="entry-title"]包裹 H3 与时间信息，实现"左侧职位、右侧时间"的双栏排版：

<div alt="entry-title"> <h3>Software Engineer - OctoConnect Inc., Octoland</h3> <p>March 2008 - July 2009</p> </div>

在 styles/main.css 中，.entry-title, div[alt="entry-title"]被设置为display: flex; justify-content: space-between; align-items: center;，因此 H3（职位/项目名）靠左、<p>（时间）靠右，两端对齐。这解释了模板中为什么要把时间放进<p>标签而不是直接写成普通文本——只有这样才能被 entry-title 的 flex 布局识别为"右栏"。

教育与工作经历写法

Education 板块的结构是"学校标题 + 学历与时间 + 两个要点列表"：

<div alt="entry-title"> <h3>Octo Open-Source University</h3> </div> Sept 2008 - June 2028, Bachelor of Science, Computer Science - **Awards**: GitHub Pair Extraordinaire, GitHub Arctic Code Vault Contributor, GitHub Starstruck, etc. - **Campus Experience**: OctoStudio Captain, driving tech and open-source innovation for octopus tribe.

Work Experience 板块包含两份经历（正职 + 实习），每份经历的结构是"entry-title 双栏标题 → 一段概述 → 要点列表"，要点使用-无序列表并可用**加粗**强调关键词：

Led a team project to create a social networking platform. - Designed octopus-inspired user profiles and interactive features such as tentacle-based messaging and ink-splatter reactions to foster community engagement among octopuses and cats worldwide. - Integrated OAuth authentication with GitHub accounts to enable seamless login and profile synchronization.

撰写英文简历内容时，模板给出了很好的写作范式：概述句（过去式动词开头）+ 2～4 条要点（动宾结构、量化结果、技术名词）。

项目经历写法

Projects 板块的条目在 entry-title 中额外加入了项目链接：

<div alt="entry-title"> <h3>GitFlix</h3> <a href="https://github.com/octocat/gitflix">github.com/octocat/gitflix</a> </div>

项目名在左、项目主页链接在右。由于a与a span的字体族是--link-font（JetBrainsMono），链接会以等宽字体呈现，与正文的思源黑体形成层次区分。链接颜色默认取自--link-color（经典主题下与--color-accent相同）。

技能板块写法

Skills 板块使用简单的无序列表，每条以加粗能力类别开头：

- Proficient in multiple programming languages, including Octolang, OctoScript, and more, with a strong grasp of object-oriented and functional programming paradigms. - Excellent communication and collaboration skills, both with octopuses and fellow cats. - Solid understanding of software development principles, data structures, and algorithms, with a focus on writing clean, efficient, and maintainable code. - Extensive experience with Git version control, including strategies such as GitFlow and GitHub Flow.

图标速查表：全部可用转义 Unicode

除模板头部与四个板块标题用到的 7 个图标外，README 还提供了主题内置的完整图标表。以下编码可直接复制粘贴到模板中使用（&是 HTML 中的&实体转义形式，在 Markdown 源码中写作形式）：

注：模板与 README 中确认了（电话）、（邮箱）、（主页）、（教育）、（工作经历）、（项目）、（技能）这 7 个编码与板块/联系信息栏的对应关系；表中"其他用途"列的编码在仓库文档中仅给出了图标与编码对照，未说明具体语义，使用时请结合实际预览确认图标形状。

在 Typora 中安装主题并编辑模板

安装主题

1. 下载最新 Release 压缩包并解压；
2. 打开 Typora 主题文件夹：设置（Preferences）> 外观（Appearance）> 打开主题文件夹（Open Theme Folder）；
3. 将解压得到的lapis-cv.css、lapis-cv-serif.css以及lapis-cv目录三个文件复制进主题文件夹；
4. 完全重启 Typora，在主题菜单中选择Lapis Cv（经典黑体风格）或Lapis Cv Serif（v2.0.0 新增的衬线风格）。

这三个文件并非随意命名，其来源可以从 Makefile 的构建逻辑确认：make typora会把 styles/classic/typora.css 复制为lapis-cv.css、把 styles/serif/typora.css 复制为lapis-cv-serif.css，并把 styles/main.css 与fonts/目录一并放入lapis-cv/子目录。也就是说，主题的实际渲染逻辑分布在lapis-cv.css（编辑器专属层）+lapis-cv/styles/main.css（跨编辑器共享层）+lapis-cv/fonts/（字体资源）三层中。

编辑与导出 PDF

1. 在 Typora 中打开 templates/typora/template-en.md（构建产物位于解压目录内的typora/文件夹中），按上文结构替换为你的个人信息；
2. 导出前在设置 > 导出 > PDF中配置页面：页面大小 A4、页边距自定义、上下 13mm、左右 15mm。这一尺寸是主题视觉设计所依据的目标版面，与 CSS 中的@media screen预览内边距（padding-left/right: 20mm; padding-top: 13mm）配合，能保证屏幕预览与最终 PDF 视觉一致；
3. 执行文件 > 导出 > PDF即可得到简历文件。

分页与页码

• 分页：在需要分页的位置插入---分隔线即可。其原理见 styles/main.css 的@media print规则：hr在打印时触发page-break-after: always并隐藏自身，从而实现"一行横线 = 强制分页"；
• 页码：在 Typora 的设置 > 导出 > PDF中设置页脚模板，例如${pageNo} / ${totalPages}，即可输出"当前页 / 总页数"格式的页码。

通过 CSS 变量定制版式

模板本身不含任何样式代码，排版全部由主题的 CSS 变量驱动。若简历内容体量较大或想调整视觉细节，可在 Typora 主题文件夹的lapis-cv.css（经典）或lapis-cv-serif.css（Serif）中修改:root下的变量。以下是 README 整理的核心变量含义：

/* Custom Configs */ /* 基础配置 */ --text-size: 10pt; /* 文本字体大小 */ --line-height: 1.8; /* 文本行高 */ --avatar-width: 29mm; /* 头像宽度 */ /* 字体配置 */ --h1-size: 16pt; /* 一级标题字体大小 */ --h2-size: 12pt; /* 二级标题字体大小 */ --h3-size: 10.5pt; /* 三级标题字体大小 */ --blockquote-size: 9.3pt; /* 信息栏（联系信息）字体大小 */ --text-font: 'SourceHanSansCN'; /* 文本字体 */ --title-font: 'SourceHanSerifCN'; /* 标题字体 */ --link-font: 'JetBrainsMono'; /* 链接字体 */ --code-font: 'JetBrainsMono'; /* 代码字体 */ /* 色彩 */ --color-accent: #4870ac; /* 主题色 */ --text-normal: #353a42; /* 文本颜色，若需打印请改为纯黑 */ --link-color: #0563c1; /* 链接颜色 */

这些变量与源码中的默认值一一对应。例如 styles/classic/typora.css 中经典主题的实际默认值为--text-size: 10pt、--avatar-width: 28mm、--title-font: 'SourceHanSansCN'（经典主题标题用黑体）；而 styles/serif/typora.css 中 Serif 主题则使用--text-size: 9.5pt、--avatar-width: 24mm、--title-font: 'SourceHanSerifCN'（标题换用思源宋体），并且 H1 字号放大到25pt、头像改为绝对定位贴右上角——这就是两套主题视觉差异的全部来源。

修改变量后，部分样式需要重启 Typora 才能生效。若需要打印纸质简历，建议把--text-normal改为纯黑（如#000），以获得更好的打印对比度。

与 Obsidian 模板的写法差异

仓库还提供了一份 Obsidian 英文模板，内容与 Typora 模板完全一致，但在标记写法上有两处差异，值得注意：

1. 图标标记不同：Typora 模板写作<span alt="icon">&#xe60f;</span>，Obsidian 模板写作<span class="icon">&#xe60f;</span>。两者对应 styles/main.css 中的同一组选择器.icon, span[alt="icon"]，因此效果等价——但 Obsidian 对alt自定义属性支持较弱，故采用class写法；
2. 时间位置不同：Typora 模板把时间直接作为entry-title内的<p>文本渲染，Obsidian 模板则在标题旁显式写出<p>Sept 2008 - June 2028</p>，让时间在源码中更醒目。

如果你同时使用多个编辑器维护同一份简历，需要注意这些细微差异，避免在 Obsidian 中粘贴 Typora 模板后出现图标样式失效。

注意事项小结

• 修改模板时不要删除alt="icon"/alt="avatar"/alt="entry-title"这些约定属性，它们是主题样式选择器的挂钩点，删除后图标、头像、双栏布局将全部失效；
• &#xeXXX;形式的转义字符在 Typora 源码中按原样书写即可，它们依赖随主题分发的iconfont.ttf，主题未正确安装时图标会显示为乱码；
• 导出 PDF 前务必确认页面设置为 A4 与 13mm/15mm 边距，否则版面会与预览不一致；
• 若同时安装了其他 Typora 主题或插件，可能存在样式干扰，遇到排版异常时优先检查主题文件是否被覆盖。

从模板到最终 PDF，LapisCV 的核心思路始终是"纯 Markdown 写内容 + 约定 HTML 属性做挂钩 + CSS 变量控样式"。理解了 templates/typora/template-en.md 这套结构，你不仅能 10 分钟内产出一份排版专业的英文简历，还能基于 styles/classic/typora.css 与 styles/main.css 的变量体系，定制出完全属于你自己的简历版式。

• 前端
• 文档