制作一份 A4 简历添加到您的网站（并使其可打印）

网格我

大家好，欢迎阅读我的第一篇博客文章。

我是 Cooper，一名来自墨尔本的开发人员，最近开始寻找新工作，因此，当我重新设计和构建新的投资组合网站时，我想分享一些知识。

主要目标之一是在我的网站上建立一份简历，但采用 A4 格式，以便潜在的招聘人员或雇主更容易将其保存为 PDF 或打印出来（对于那些真正复古的组织）。

TL;DR如果您只想查看代码库，或访问已发布的网站，请访问这里

我最近学习了一点 SASS，所以我用过它，单独使用嵌套样式就能产生奇效，而不必对每个单独的 div 进行分类，所以 SASS 是 bae 💁🏼‍♀️。

一旦构建完成，我就会将其转移到我的 Svelte 投资组合中，我不会在那里详细介绍，但稍后我会介绍让我困惑了几个小时的 Gotcha。

首先，您需要创建页面模板，在您的 HTML 主体中创建一个容器 div（我将它命名为 resumeCanvas，但您可以自行决定），在 SCSS 中我们创建一个画布来绘制我们的杰作。

那么这里发生了什么？

Box-sizing - border-box 我们确保一切都保持在选定的尺寸范围内。

边距 - 为 0 并自动将所有内容设置到中心。

填充 - 这个在边框和内部之间设置了 0.3 英寸，你可以添加更多一点，比如 0.5 英寸，但我最终缩短了它，因为最后我没有足够的空间。

宽度和高度 - 这些是重要的，我做了一些研究并获得了 A4 页面的宽度和高度（好吧，可能会有轻微的差异，但在我们设置打印属性时这并不重要）。

背景颜色 - 应该是白色，你可以把它做成任何你想要的颜色，但请记住它应该考虑到打印，所以尽量不要在这里考虑黑暗模式。

框阴影 - 这会在网页上提供一个漂亮的小灰色轮廓，以区别于背景页面。

太棒了！现在，我们有了一张漂亮的 A4 大小的页面，现在我们该如何填充它呢？

好吧，因为我们使用的是一个固定尺寸，它不是为响应而设计的，而且我们需要一个布局，所以网格是完美的解决方案......

你说的是网格……

我想我刚刚听到了一声集体叹息

好吧，别担心，我的朋友，因为有一位名叫Sarah Drasner的超级明星（她也有一个令人惊叹的作品集），她为我们创建了一个网格模板生成器网站。

正如我们上面看到的，我选择了标题栏来显示我的名字，左侧面板用来显示所有内容，右侧面板用来显示所有链接（后来我把右侧面板改成了固定像素长度，因为在项目进行过程中，我整理画布的宽高时发现东西发生了移动）。不过，无论你想如何布局你的项目，都可以按照下面的方法进行。

现在继续并单击“请给我一些代码”按钮，然后获取切达干酪🧀。

我继续把parent改名为gridParent，div1改名为titleHeader，div2改名为leftSummary，div3改名为rightInfo，只是为了避免混淆。命名规范之类的。

将其弹出到您的 CSS/SCSS 文件中，并在 HTML 文件中创建这些 div，然后您就可以使用您的简历数据填充您的 HTML 文件了。

这是有趣的部分🙊，我将把这部分留给你。

我不会撒谎，那部分需要一些时间，不仅仅是文字，还有一些样式，因为我讨厌无聊的黑白文档，所以我在悬停时添加了一些彩虹交互元素，但这些在打印文档时不会显示。

在此阶段，当您生成页面并运行操作系统的打印命令时，您应该会得到一个完美的 A4 大小的 PDF/打印页面。

它是完美的，直到我将它转置到我的 Svelte 应用程序中，然后我遇到了各种各样的问题，因为它不只是抓住所需的 div，它还开始从页面的左上角裁剪。

在这里我了解了印刷媒体查询，这可以通过两种方式完成，但另一种方式对于我想要实现的目标来说更加严厉。

通过将标签添加到您的标题中，您可以创建一个完全不同的样式表，如果您想设计一个漂亮的网站风格的简历，然后在该样式表中使用备用代码，那么这将非常有用，该代码仅在被调用以打印时显示（我稍后会探讨这个选项）。



<link rel="stylesheet" type="text/css" href="print.css" media="print">

但因为我只是想按原样打印它，所以我们只需在部分或 Svelte 页面的 CSS/SCSS 文件，并以父 div 类（我将其重命名为 resumeCanvas）为目标，它会忽略树上更高的所有内容。

我之前提到的另一个小问题是，一旦我将所有内容转置到我的 Svelte 应用程序，格式就会正确，感谢另一位 CSS 超级明星Rachel Andrew（网站），我读到页面需要根据我们在 Canvas 中设置的尺寸来定义，如下面的代码所示。

设置@page { size: 8.5in 12in; }以匹配使其像手套一样合适。

在这个阶段，我还不能链接 Svelte 应用程序，因为它仍在建设中，但当它准备就绪时它将取代我当前的网站，所以也许会继续检查。

如果有任何疑问，或者我可以做得更好，请联系我。