Eleventy

Eleventy 是一款免遥测静态站点生成器。可以使用自定义数据文件解析器来增强数据管道。

¥Eleventy is a telemetry-free static site generator. The data pipeline can be augmented with custom data file parsers.

SheetJS 是一个用于从电子表格读取和写入数据的 JavaScript 库。

¥SheetJS is a JavaScript library for reading and writing data from spreadsheets.

该演示使用 Eleventy 和 SheetJS 从电子表格中提取数据并在页面中显示内容。我们将探索如何在自定义数据文件格式解析器中加载 SheetJS 库并生成在页面中使用的对象数组。

¥This demo uses Eleventy and SheetJS to pull data from a spreadsheet and display the content in a page. We'll explore how to load SheetJS libraries in a custom data file format parser and generate arrays of objects for use in pages.

下图描绘了练习册华尔兹：

¥The following diagram depicts the workbook waltz:

无遥测

作者公开表示 Eleventy 不嵌入任何遥测或数据收集。[^1]

¥The author has publicly stated that Eleventy does not embed any telemetry or data collection.[^1]

集成详情

¥Integration Details

SheetJS NodeJS 模块可以加载到 .eleventy.js 中并在自定义数据文件格式解析器中使用。

¥The SheetJS NodeJS module can be loaded in .eleventy.js and used in custom data file format parsers.

数据文件解析器

¥Data File Parser

自定义数据文件解析器必须在 .eleventy.js 中注册

¥Custom data file parsers must be registered in .eleventy.js

Eleventy config addDataExtension 方法 [^2] 接受文件扩展名列表和解析器配置对象。

¥The Eleventy config addDataExtension method[^2] accepts a list of file extensions and a parser configuration object.

解析器对象必须包含选项 read: true 和 encoding: null 。 Eleventy 将读取文件并将原始 Buffer 对象传递给解析器回调。

¥The parser object must include the options read: true and encoding: null . Eleventy will read files and pass raw Buffer objects to the parser callback.

parser 回调可以使用 SheetJS read 方法 [^3] 解析原始 Buffer 数据。该方法返回一个工作簿对象 [^4]。

¥The parser callback can parse the raw Buffer data with the SheetJS read method[^3]. The method returns a workbook object[^4].

在此示例中，解析器将使用 SheetJS sheet_to_json 方法 [^5] 从第一个工作表中的数据生成对象数组：

¥In this example, the parser will use the SheetJS sheet_to_json method[^5] to generate an array of objects from the data in the first worksheet:

.eleventy.js
const XLSX = require("xlsx");

/* list of file extensions */
const exts = [ "numbers", "xlsx", "xlsb", "xls" ].join(", ");

module.exports = (eleventyConfig) => {
  eleventyConfig.addDataExtension(exts, {
    /* read file and pass raw Buffer object to parser */
    encoding: null, read: true,

    /* parser callback */
    parser: (contents) => {
      /* contents is the data stored as a Buffer */
      const wb = XLSX.read(contents);
      /* generate array of row objects from first worksheet */
      return XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    }
  });
};

用法

¥Usage

添加到 _data 子目录中的电子表格文件可以使用名称 Stem 从模板文件中访问。

¥Spreadsheet files added in the _data subdirectory are accessible from template files using the name stem.

例如，可以使用模板中的变量 pres 来访问 pres.numbers：

¥For example, pres.numbers can be accessed using the variable pres in a template:

index.njk


<table><thead><tr><th>Name</th><th>Index</th></tr></thead>
  

<tbody>
  {% for row in pres %}
    <tr>
      <td>{{ row.Name }}</td>
      <td>{{ row.Index }}</td>
    </tr>
  {% endfor %}
  </tbody>


</table>

完整示例

¥Complete Example

测试部署

本 demo 在以下环境下进行了测试：

¥This demo was tested in the following environments:

Eleventy	日期
`2.0.1`	2024-03-15
`3.0.0-alpha.5`	2024-03-15

项目设置

¥Project Setup

创建一个新项目：

¥Create a new project:

mkdir sheetjs-11ty
cd sheetjs-11ty
npm init -y

安装 Eleventy 和 SheetJS 库：

¥Install Eleventy and SheetJS libraries:

Stable
Alpha

npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz @11ty/eleventy@2.0.1

npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz @11ty/eleventy@3.0.0-alpha.5

在项目中新建 _data 子目录。将示例文件 pres.xlsx 下载到 _data 中：

¥Make a new _data subdirectory in the project. Download the example file pres.xlsx into _data:

mkdir _data
curl -Lo _data/pres.xlsx https://xlsx.nodejs.cn/pres.xlsx

将以下文件下载到项目文件夹中：

¥Download the following files to the project folder:

_eleventy.js（重命名为 .eleventy.js）

¥_eleventy.js (rename to .eleventy.js)
index.njk

curl -L -o .eleventy.js https://xlsx.nodejs.cn/eleventy/_eleventy.js
curl -LO https://xlsx.nodejs.cn/eleventy/index.njk

实时重新加载

¥Live Reload

启动实时重载服务器：

¥Start the live reloading server:

npx @11ty/eleventy --serve

服务器将从 index.njk 生成 index.html 并显示服务器 URL：

¥The server will generate index.html from index.njk and show the server URL:

[11ty] Writing _site/index.html from ./index.njk
[11ty] Wrote 1 file in 0.23 seconds (v2.0.1)
[11ty] Watching…
[11ty] Server at http://localhost:8080/ <-- this is the URL

在网络浏览器中打开 URL。该页面应包含一个表格。

¥Open the URL in a web browser. The page should include a table.
在电子表格编辑器中打开 _data/pres.xlsx。在 "Sheet1" 工作表的底部添加一行（将 A7 设置为 "SheetJS 开发"，将 B7 设置为 47）。保存文件。

¥Open _data/pres.xlsx in a spreadsheet editor. Add a row to the bottom of the "Sheet1" sheet (set A7 to "SheetJS Dev" and B7 to 47). Save the file.

服务器日志将注意到文件已更改：

¥The server log will note that the file changed:

[11ty] File changed: _data/pres.xlsx
[11ty] Writing _site/index.html from ./index.njk

浏览器将刷新以显示新数据。

¥The browser will refresh to show the new data.

静态站点

¥Static Site

停止实时重新加载服务器并构建静态站点：

¥Stop the live reload server and build the static site:

npx @11ty/eleventy

Eleventy 会将生成的站点放置在 _site 子文件夹中。

¥Eleventy will place the generated site in the _site subfolder.

启动 Web 服务器来托管静态站点：

¥Start a web server to host the static site:

npx http-server _site

打开 Web 浏览器并访问显示的 URL ( http://localhost:8080 )。查看页面源码，确认页面中没有添加 JS。它仅包含 HTML 表中文件的内容。

¥Open a web browser and access the displayed URL ( http://localhost:8080 ). View the page source and confirm that no JS was added to the page. It only contains the content from the file in an HTML table.

[^1]: 请参阅 Eleventy 作者对站点生成器评论的 "遥测" 部分。当最后一次查看此页面时，作者自豪地断言 Eleventy 拥有 "没有已知的遥测或数据收集"。

¥See the "Telemetry" section of the site generator review from the author of Eleventy. When this page was last checked, the author proudly asserted that Eleventy had "No known Telemetry or data collection".

[^2]: 请参阅 Eleventy 文档中的 "自定义数据文件格式"。

¥See "Custom Data File Formats" in the Eleventy documentation.

[^3]: 见 read 于 "读取文件"

¥See read in "Reading Files"

[^4]: 有关 SheetJS 工作簿对象的更多详细信息，请参阅 "工作簿对象"。

¥See "Workbook Object" for more details on the SheetJS workbook object.

[^5]: 见 sheet_to_json 于 "实用工具"

¥See sheet_to_json in "Utilities"

集成详情​

数据文件解析器​

用法​

完整示例​

项目设置​

实时重新加载​

静态站点​