本文将介绍如何使用 npm 包 websheets-core 来生成基于 Google Sheets 的动态数据网站。
websheets-core 简介
websheets-core 是一个 node.js 库，它可以从 Google Sheets 中读取数据，并将这些数据转换为动态的网站内容。它使用 Google Sheets API 和 Handlebars 模板引擎，支持自定义模板和自定义数据源。
安装 websheets-core
使用 npm 进行安装：
npm install websheets-core
配置 Google Sheets API
在使用 websheets-core 前，需要先在 Google Cloud Console 中创建一个项目，并启用 Google Sheets API。具体方法请参考 Google Sheets API 快速入门指南。
将相关配置信息写入一个名为 .env 的文件中，如下所示：
CLIENT_EMAIL=<your-client-email> PRIVATE_KEY=<your-private-key> SPREADSHEET_ID=<your-spreadsheet-id>
其中，CLIENT_EMAIL 和 PRIVATE_KEY 是 Google Cloud Console 中创建的服务账号的邮箱和私钥，SPREADSHEET_ID 是 Google Sheets 的文件 ID。
使用 websheets-core
以下是一个简单的使用示例，它从指定的 Google Sheets 中读取一组数据，并将其渲染为一个网站页面。
创建一个名为 index.js 的文件，然后添加以下代码：
-- -------------------- ---- -------
---------------------------
----- --------- - --------------------------
----- ---- - ----------------
----- ------- - -
--------- --------------
------- --------------
----- -
-
------ ---------
------ -------
--- --------
--
--
--
--------------------------- ----- -- -
-- ----- -
-------------------
- ---- -
---------------------
-
---上面的代码指定了一个模板文件 ./index.hbs，一个输出文件 output.html，以及要读取的数据源。
接下来，我们需要创建这些文件和配置数据源。
创建名为 index.hbs 的文件，然后添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
--------------
----
------- -------
------------------- -------------------
---------
-----
-------
-------上面的代码定义了一个简单的 HTML 页面，并使用 Handlebars 模板语言来渲染数据。
接下来，我们需要创建 Google Sheets 中的数据源。打开 Google Sheets，创建一个名为 Sheet1 的工作表，然后在 A1~C2 单元格中填写以下内容：
| title | description | price |
|---|---|---|
| Item 1 | Description | 9.99 |
| Item 2 | Description | 19.99 |
| Item 3 | Description | 29.99 |
然后选择“文件”→“发布到网络”，将其发布为公共访问。
现在我们已经准备好了一切，可以运行下面的命令：
node index.js
这将使用指定的模板和数据源生成一个名为 output.html 的文件，其中包含一个 HTML 页面，它将从 Google Sheets 中读取数据并将其渲染。
总结
本文介绍了 npm 包 websheets-core 的基本使用方法，通过一个简单的示例演示了如何使用它从 Google Sheets 中读取数据，并将其渲染为动态的网站内容。学会了这些基础知识后，你就可以开始探索更多高级功能，如自定义模板和数据源，以及更复杂的数据处理操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffddec