用Google表和高度创建一个可编辑的网站

该教程展示了使用Google表和Epertyty建立一个可编辑的网站，对客户端数据获取的重大改进。我们将利用高度的静态站点生成功能在构建过程中获取数据，从而导致加载时间更快并增强了安全性。这消除了客户端JavaScript在每个页面视图上获取数据的需求。

问题：不断的客户修订

即使在网站启动之后，开发人员通常会面临客户的无休止的内容修订的挑战。这个迭代过程可能是耗时的和破坏性的。

该解决方案使客户能够使用熟悉的工具独立更新内容：Google表。

介绍高度

虽然我们上一篇文章使用tabletop.js与Google表相互作用，但这种方法集成了Extenty（静态站点生成器）。高架将该站点作为纯静态站点渲染，无需包括客户端的JavaScript进行数据处理。内容在构建过程中获取，创建一个高度优化的index.html文件。这种静态方法可改善页面负载速度和安全性。

设置Google表格

Google表作为数据存储。创建一个新的电子表格，将您的数据与列标题构造为参考（例如“标题”，“ Body”）。这些标题将在您的JavaScript代码中引用。用您的内容填充表。

接下来，将表发布到Web（文件→发布到Web）。虽然生成的链接未直接使用，但此步骤使电子表格数据可公开访问。注意来自URL的唯一表ID；稍后您需要。

node.js和项目设置

需要node.js。对于简化的设置，请克隆提供的存储库并运行：

 NPM安装
NPM运行种子
NPM运行开发

npm run seed命令至关重要；它可以在开发过程中使用Google Sheep的数据（ src/site/_data/dev/sheet.json ）预填充本地JSON文件（SRC/SITE/_DATA/DEV/SHEED.JSON），从而消除了对重复API调用的需求。

数据获取和转换（src/site/_data/prod/sheet.js）

核心逻辑位于src/site/_data/prod/sheet.js中。该脚本使用Axios从Google表中获取数据，将其转换为可用的JavaScript对象，并保存本地JSON副本进行开发。切记用表格的唯一ID替换sheetID 。

 Module.exports =（）=> {
  返回新的承诺（（分辨率，拒绝）=> {
    console.log（`请从$ {googlesheeturl}`请求内容）;
    axios.get（googlesheeturl）
      然后（响应=> {
        var data = {content：[]};
        response.data.feed.entry.foreach（item => {
          data.content.push（{{
            标题：item.gsx $ header。$ t，
            header2：item.gsx $ header2。$ t，
            // ...其他字段...
          }）;
        }）;
        种子（json.stringify（data），`$ {__ dirname} /../ dev/sheet.json`）;
        解析（数据）;
      }））
      .catch（错误=> {
        console.log（'错误：'，错误）;
        拒绝（错误）;
      }）;
  }）;
};

该脚本使用forEach迭代片段的条目，将列标题映射到对象属性。 seed功能将数据保存为JSON。

使用nunjucks（或您的首选引擎）模板

转换后的JSON数据很容易使用Nunjucks等模板引擎使用。例如：

<div>
  {％ -  eNek.content-％}中的项目}
    <h1 id="item-header">{{item.header}}</h1>
  {％ -  endfor-％}
</div>

将其适应您选择的模板引擎和数据结构。

建造和部署

建立网站：

 NPM运行构建

这将在dist文件夹中生成静态站点。对于Google表更新后自动部署，请集成Zapier以将Google表和您的托管平台（例如NetLify）连接。每当将新的或更新的行添加到Google表中，配置ZAP以触发NetLify部署。这会创建一个无缝的自动化工作流程。

这种全面的方法提供了一个具有自动部署的性能，可编辑的网站，从而大大改善了开发工作流程和客户协作。

以上是用Google表和高度创建一个可编辑的网站的详细内容。更多信息请关注PHP中文网其他相关文章！