使用 Eleventy 以 HTML 格式创建简历

banq
过去几年，我一直在学习有关前端 Web 开发的知识，所以这一次，我学习了 HTML 和 CSS。看，我的简历（网站）！

在本文中，我将介绍我做出的一些决定以及在此过程中遇到的一些挑战。

HTML 和 CSS 的好处
使用 Web 原生技术构建简历的直接好处是，我可以在线托管我的简历！Web 原生文档允许灵活的布局，使我的简历在各种浏览器和字体大小下都能看起来不错。HTML 的许多语义元素为文档提供了有意义的结构，有助于提高可访问性。

近年来，CSS 得到了极大的改进，融入了许多新的语言特性，这些特性对开发和格式化功能都有好处。原生CSS 嵌套的出现使编写 CSS 变得更加愉快，而基于网格的布局是一种简单而强大的用户界面设计方法。CSS 的普及以及社区的热情高涨也带来了大量优秀的文档、指南和讨论，这些在我研究期间都非常有用。

Eleventy 
很多很棒的工具可用，例如静态站点生成器，其主要目的是将数据、结构和样式融合到 Web 文件中。

我选择使用Eleventy，这是一个用 JavaScript 编写的静态站点生成器，使用纯 JS 进行配置，但 JS 和其他语言也有很多选择。该过程有三个主要步骤：

  1. 写入简历的数据。
  2. 使用 HTML 构造数据。
  3. 使用 CSS 设置结构样式。

数据
Eleventy 支持多种数据文件类型，但我选择使用 JSON，因为它很简单。JSON简历模式为我们的内容提供了坚实的基础，并且有数百个公开的“JSON 简历”主题使用各种构建系统。我确实添加了一些新字段，以防我想包含模式之外的内容，例如我在研究生学习期间的研究重点：

{
  "education": [
    {
      "studyType": "Doctor of Philosophy",
      "area": "Mathematics",
      "focus": "Combinatorics", // New!
      // ...
    },
    // ...
  ],
  // ...
}

这些数据将被汇集到 Eleventy 的数据级联中，然后再注入其 HTML 模板。

Eleventy 将在构建时读取数据，并使用模板语言将其插入 HTML 模板中。 默认情况下，Eleventy 使用 Liquid 模板语言，其简单明了的界面非常适合这种使用情况。 所需的主要 Liquid 语法非常简单。

在 .liquid 文件中，

  • 代码段 {{ myVariable }} 将由 myVariable 代替，
  • 代码段 {% include "file.ext" %} 将由 "file.ext "的内容代替，而 "file.ext "本身可能就是一个模板。

我们的文档 只需要这些结构：

<head>
  <meta charset="UTF-8" />
  <meta 
    name="viewport" 
    content="width=device-width, initial-scale=1" 
  />
  <style>
    {% include "styles.css" %}
  </style>
  <title>
    {{ resume.basics.name }}'s Resume 
  </title>
</head>

除了一些 HTML 样板之外，我还内联了样式表，这样我的简历就只包含在一个文件中。我的简历有四个部分：

  • 标题/联系信息，
  • 摘要，
  • 相关工作经验，以及
  • 正规教育。
我用自己的模板标记了每个部分，仅传递了该部分所需的数据：

<body>
  {% 
    include "components/header.liquid", 
    basics: resume.basics
  %}
  <main>
    {% 
      include "components/summary.liquid", 
      summary: resume.basics.summary 
    %}
    {% 
      include "components/experience.liquid", 
      work: resume.work
    %}
    {% 
      include "components/education.liquid", 
      education: resume.education
    %}
  </main>
</body>

在上述{% include %}语句中，我只传递了 "渲染 "模板所需的简历数据。 引用的模板可以非常简单，比如我的摘要：

<section>
  <h2>Summary</h2>
  <p>{{ summary }}</p>
</section>

或者，这些模板可以更加丰富，比如我的工作经历模板，它可以循环显示工作数组，还可以选择通过 "2017 年夏季 "这样的时间段而不是范围来显示日期。

<section>
  <h2>Experience</h2>
  {% for work in resume.work %}
    <section>
      <header>
        <h3>{{ work.position }}</h3>
        <span>{{ work.name }}</span>
        <span class="date">
          {% if work.period %}
            {{ work.period }}
          {% else %}
            {{ work.startDate }} &ndash; {{ work.endDate }}
          {% endif %}
        </span>
      </header>
      <ul>
        {% for highlight in work.highlights %}
          <li>{{ highlight }}</li>
        {% endfor %}
      </ul>
    </section>
  {% endfor %}
</section>

设计
在设计简历布局时，我希望使用单个内容列来提供自然的阅读顺序，同时保持主要内容的宽度足够短，以免影响可读性。我选择将部分标签放在页面左侧的装订线中，这样我的内容就可以填满大部分页面宽度，但不是全部。

CSS 可以通过几种方式解决这个问题，但首先让我们看一下删除大部分内容的简历的基本结构：

<main>
  <section>
    <h2>Experience</h2>
    <section>
      <!-- Much experience -->
    </section>
    <section>
      <!-- Wow -->
    </section>
  </section>
  <section>
    <h2>Education</h2>
    <section>
      <!-- University -->
    </section>
    <section>
      <!-- College, maybe -->
    </section>
  </section>
</main>

我希望章节标签沟槽列的宽度与其内容一样宽，这可以通过将

标签放入同一列并将其宽度设置为最大内容来实现，但这些标签没有共同的父代！ 幸好它们有一个共同的祖辈，而祖辈的每个子代都可以通过子网格继承祖辈的列：grid-template-columns: subgrid;


我的简历是双栏布局。

main {
  display: grid;
  grid-template-columns: max-content 1fr;

  >section {
    grid-column: 1 / 3;

    display: grid;
    grid-template-columns: subgrid;
    justify-items: start;
    align-items: start;

    h2 {
      grid-column: 1 / span 1;
    }
    section {
      grid-column: 2 / 3;
    }
  }
}

此外，我希望将部分标签折叠起来，与简历的内容保持一致，以适应窄视口，这只需要在媒体查询中更改一些网格布局参数。

main {
  >section {
    @media screen and (max-width: 50rem) {
      h2 {
        grid-column-end: span 2;
        justify-self: center;
      }
      section {
        grid-column-start: 1;
      }
    }
  }
}

开发经验 
有了这些，我将概述我的 "开发经验"--以这种格式编辑和发布简历需要什么？ 设置完成后，

我会使用 npx @11ty/eleventy 或 npm run build 生成简历的简洁版本，从而生成单个 HTML 简历文件。 在编辑简历时，Eleventy 会使用 npx @11ty/eleventy --serve 或 npm run start 在 localhost:8080 上架设本地网络服务器。

这很方便，因为它包含了根据源代码的变化重新加载网页的功能，因此任何编辑都会在保存内容时反映出来。

本地服务器对制作 PDF 版本的简历也很有帮助，因为我们可以使用网络自动化工具从命令行打印成 PDF！ 我使用了这个简短的 print.js 脚本，它使用 Puppeteer 制作 PDF，并通过 node print.js 运行。

import puppeteer from "puppeteer";
 
async function printPDF() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('http://localhost:8080/', { waitUntil: 'networkidle0' });
  await page.pdf({ format: 'letter', path: './resume.pdf' });
  await browser.close();
}

await printPDF();

对于那些感兴趣的人，我已将这个项目上传到GitHub。如果你想了解 HTML 简历的其他方法，请参阅Eric Bailey、Max Böck和David Reed的这些帖子。