npm 包 resume-to-html 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

简介

resume-to-html 是一个针对前端开发者的 npm 包，可以将 JSON 格式的简历转换成精美的 HTML 页面，方便展示和分享。它支持自定义主题样式，可以根据自己的需求进行调整。

安装

使用 npm 安装：

--- ------- -- --------------

使用

1. 编写简历

首先，我们需要编写我们的简历。简历采用 JSON 格式，具体格式可以参考 resume-schema。

-
  --------- -
    ------- ----- -----
    -------- -----------------------
    -------- ------ ----------
    ---------- ---------------------
    ---------- -- ------- -- ---- --------
    ----------- -
      ---------- ----- -------- ----
      ------------- --- -------
      ------- ---- -----------
      -------------- -----
      --------- ------------
    --
    ----------- -
      -
        ---------- ----------
        ----------- -------
        ------ -------------------------
      -
    -
  --
  ------- -
    -
      ---------- ----------
      ----------- ------------
      ---------- ---------------------
      ------------ -------------
      ---------- -------------
      ---------- -----------------
      ------------- -
        -------- --- ---------
        ----- --- --------
      -
    -
  -
-

2. 转换成 HTML

将 JSON 格式的简历转换成 HTML 格式：

-------------- ----------- -- ---------------

其中，resume.json 是我们编写好的简历，themes/eloquent 是自定义主题样式。

3. 查看生成的 HTML

生成的 HTML 文件位于 out/index.html，我们可以打开它查看转换后的效果。

自定义主题

resume-to-html 内置了一些主题样式，我们也可以自定义主题样式。主题样式位于 themes 目录，我们可以在这个目录下新建一个文件夹，然后添加样式文件。

添加样式文件

在新建的文件夹下添加两个文件：

  • index.jade：Jade 模板，用来渲染 HTML 结构。
  • main.scss：Sass 样式表，用来设置样式。

Jade 模板可以参考已有的模板，Sass 样式表可以参考 themes/basic 目录下的样式表。

使用自定义主题

在使用 resume-to-html 命令时，使用 -t 参数指定自定义主题即可：

-------------- ----------- -- ---------------

示例代码

以下是一个简单的示例代码：

-
  --------- -
    ------- ----- -----
    -------- -----------------------
    -------- ------ ----------
    ---------- ---------------------
    ---------- -- ------- -- ---- --------
    ----------- -
      ---------- ----- -------- ----
      ------------- --- -------
      ------- ---- -----------
      -------------- -----
      --------- ------------
    --
    ----------- -
      -
        ---------- ----------
        ----------- -------
        ------ -------------------------
      -
    -
  --
  ------- -
    -
      ---------- ----------
      ----------- ------------
      ---------- ---------------------
      ------------ -------------
      ---------- -------------
      ---------- -----------------
      ------------- -
        -------- --- ---------
        ----- --- --------
      -
    -
  -
-
-------------- ----------- -- ---------------
------- ----
---------------
  ----
    ---------------
    ---------------------
    ---------------------------------- ------------------
    --------------------- ---------------------------- ---------------- ---------------- ------------------

    -----
      -  ---- -
      -    ------- ---- -----
      -    ------ --------
      -    ---------- -----
      -    ------------ ------- -----------
      -    ------------ -----
      -  -
    ----- ------

  ----
    ------
      ----------------------
      -- ------------
        --------------------------
      -- --------------
        ----------------------- -------

    ---------------
      ----------------
      -----------------

    ------------------
      -------------------
      ---- --- -- ---------------
        -------
          ---------------
          --------------------
          - --------------------- ------------
          ---- --------- -- --------------
            --
              ------------

    ----------------
      -----------------
      ---- ------- -- -----------------
        -------
          ----------------
          ------------------------
          - ------------------------- ----------------
          ---- --------- -- ------------------
            --
              ------------

    -----------------
      ------------------
      ---- ----------- -- ----------------------
        -------
          ------------------------
          -------------------------------
          - ----------------------------- --------------------
          -- --------------------------
            ------------------
            -----------------------------------------

    --------------
      ---------------
      ---- ----- -- -------------
        -------------
        --
          ---- ----- -- ------------
            ------------- -- -----------
              ----------------
                -------------------------- -----------------

    ---------------
      ----------------
      -
        ------------
        ------------------
      -
        ------------
        -----------------------------------------------
      -
        ------------
        ----------------------- ---------------

    ----- -------
    ---------------------------------------------------------
    ---------------------------------------------------------------------
    ------
      - ---------------------------- -
      -   ----------
      -     --------- -----
      -     ------- ------------------
      -   ---
      - ---
    ----- -------
------- -
  ------- ---- --

  -- -
    ---------- -----
    ------- ---- --
    ------------ -------
  -

  -- -
    -------- --
    ------- --

    -- -
      ------- --- --
      -------- -----
      ------------ -------

      ------------- -
        ------------ -----
        ----------- --------
        -------------- ----
        ------- ----
        ------ -----

        --------- -
          ------- -----
          -------------- ----
          ----------- ------------------ ------ -------- ---------
        -
      -
    -
  -
-

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb3ebb5cbfe1ea06111e7

阅读全文

猜你喜欢

  • npm 包 @ipld/printify 使用教程

    @ipld/printify 是一个用于将 JavaScript 对象转换为人类可读的格式的 npm 包。它旨在方便在开发过程中根据需要和调试需求打印和输出对象。它支持各种 JavaScript 数据...

    4 年前
  • npm 包 @ipld/schema-gen 使用教程

    随着区块链等技术的不断普及，数据结构的验证变得愈加重要。此时，一些工具包，例如 @ipld/schema-gen 就显得尤为重要。本文将为大家介绍如何使用此工具包，并分享一些实用的技巧。

    4 年前
  • npm 包 hundreds 使用教程

    在前端开发中，我们经常需要进行数字格式化，比如将 10000 格式化成 10,000。但是这个过程既繁琐又易错，因此我们常常需要借助一些工具来完成这个任务。而 hundreds 就是其中一款非常实用的...

    4 年前
  • npm 包 bytesish 使用教程

    随着互联网技术的发展，前端的开发变得越来越重要，而使用 npm 包也成为了前端开发不可或缺的一环。其中一个常用的 npm 包是 bytesish，它提供了一种方便的方式来实现字节到字符串的转换，而且可...

    4 年前
  • npm 包 rabin-generator 使用教程

    前言 在前端开发中，我们经常需要生成随机数据来模拟测试数据。这时，快速生成强随机性的数据非常有用。 npm 包 rabin-generator 是一个生成随机数据的好工具，同时该工具还支持各种数据类型...

    4 年前
  • npm 包 ipld-schema 使用教程

    在前端开发过程中，我们经常需要处理各种各样的数据，而 IPLD（InterPlanetary Linked Data）是一个分布式 Web 的数据协议，为我们提供了一种标准的数据结构和查询语言，可以很...

    4 年前
  • npm 包 @ipld/unixfsv2 使用教程

    简介 @ipld/unixfsv2 是一个 JavaScript 库，用于处理 Unix 文件系统中的数据。它提供了一种简单的方式来解析 Unix 文件系统中的各种对象和数据，例如目录树、文件、链接、...

    4 年前
  • NPM 包 Reg 的使用指南

    NPM（Node Package Manager）是一个包管理器，Reg 是一个类库，用于从 NPM 库中快速搜索和获取包的信息。在前端开发中，我们经常需要查找和使用各种 NPM 包，而 Reg 提供...

    4 年前
  • npm 包 @alexbosworth/saxophone 使用教程

    在开发 Web 前端应用程序时，我们常常需要对 XML 或 HTML 文档进行解析和处理。其中一个流行的工具是解析器，@alexbosworth/saxophone 就是一个基于流的事件驱动的 SAX...

    4 年前
  • npm 包 @alexbosworth/html2unicode 使用教程

    在前端开发中，我们常常需要处理 Unicode 字符串。为了方便地将 HTML 字符串转换成 Unicode 字符串，我们可以使用 @alexbosworth/html2unicode 这个 npm ...

    4 年前
  • npm 包 @babel/plugin-transform-react-pure-annotations 使用教程

    前言 在 React 应用中，性能优化是一个十分重要的话题。React 中的 Pure Component 和 memo 函数都可以帮助我们优化性能。但是，纯组件和 memo 函数只有在接收到的 pr...

    4 年前
  • npm 包 @octokit/plugin-paginate-rest 使用教程

    简介 @octokit/plugin-paginate-rest 是一个用于 JavaScript 和 TypeScript 语言的 npm 包，它为 Octokit REST API 操作提供了分页...

    4 年前
  • npm 包 @octokit/plugin-request-log 使用教程

    众所周知，前端开发过程中，对网络请求的监控和分析是非常重要的一环。而 @octokit/plugin-request-log 是一个专门用于监控请求的 npm 包，它可以帮助你更好的分析网络请求并进行...

    4 年前
  • npm 包 zetta-led-mock-driver 使用教程

    1. 引言 zetta-led-mock-driver 是一款 npm 包，可以帮助开发者模拟 IoT 设备的 LED 灯光，非常适合在前端开发中进行测试和调试。本文将介绍如何安装和使用这个 npm ...

    4 年前
  • npm 包 zetta-photocell-mock-driver 使用教程

    前言 在开发嵌入式系统或物联网设备时，模拟传感器和执行器的行为是相当重要的。zetta-photocell-mock-driver 就是这样一款 npm 包，它可以模拟光敏电阻，用于测试和调试 zet...

    4 年前
  • npm 包 keydir 使用教程

    介绍 npm 是世界上最大的软件库之一，其中包含了许多前端开发所需的工具和库。其中一个非常常用的 npm 包就是 keydir。keydir 是一个轻量级的 JavaScript 工具，可以在前端和后...

    4 年前
  • npm 包 leveldown-open 的使用教程

    npm 是世界上最大的软件包管理器之一，它帮助前端开发人员轻松地安装、更新、删除、共享和管理 JavaScript 包。本文将介绍 npm 包 leveldown-open 的使用教程，该包是一个基于...

    4 年前
  • npm 包 medeadown 使用教程

    介绍 medeadown 是一个基于 Node.js 的 markdown 编辑器，提供了一系列实用的功能，可以帮助前端开发者更高效地编写 markdown 文档。

    4 年前
  • npm 包 zetta-auto-scout 使用教程

    随着智能家居市场的发展，越来越多的智能设备进入到我们的生活中。在这样的背景下，为了方便开发者进行智能设备的开发，开源社区不断推出各种工具，其中 npm 包 zetta-auto-scout 是一款非常...

    4 年前
  • npm 包 minimatch-with-regex 使用教程

    简介 minimatch-with-regex 是一个基于 minimatch 的 npm 包，可以通过正则表达式进行文件匹配。对于前端工程师来说，它可以方便地在打包构建、代码压缩等环节中，根据正则表...

    4 年前

相关推荐

    暂无文章