使用 Google 电子表格和 Tabletop.js 创建可编辑网页

如果您曾经遇到过来自客户的无休止的内容修改请求，请举手。 并不是说更改本身很困难，但如果客户可以自己进行修改，会不会更简单一些？ 这将为每个人节省宝贵的时间，并让您能够将注意力集中在更重要的任务上。

如果网站构建在平面文件（例如 HTML、CSS 和 JavaScript）而不是 CMS（例如 WordPress）上，则需要其他一些解决方案来编辑内容，而无需直接编辑这些文件。

Tabletop.js 允许我们使用 Google 电子表格作为一种数据存储，通过获取电子表格并使其通过 JavaScript 轻松访问。 它以 JSON 格式提供 Google 电子表格中的数据，然后可以在应用程序中使用，就像从任何其他 API 中提取数据一样。 在本文中，我们将向电子表格添加数据，然后设置 Tabletop 以便它可以将数据从数据源提取到我们的 HTML 中。 让我们直接进入代码！

本文将基于我最初尝试了解 Tabletop 时构建的一个真实 网站。 顺便说一句，我始终建议开发人员使用他们正在尝试学习的任何形式的技术构建应用程序，即使是在观看或阅读教程之后。

我们将使用我制作的 演示，以及它的源 代码 和 电子表格。 我们首先需要一个 Google 帐户 来访问电子表格。

打开一个新的电子表格，并在列中输入您自己的值，就像 我的 一样。 每列的第一格是稍后在 JavaScript 中使用的引用，第二格是网站的实际内容。 例如 header 是引用名称，Please edit me! 是第一列中的实际内容。

接下来，我们将通过点击菜单栏中的“文件”→“发布到网络”将数据发布到网络。

将提供一个链接，但对我们来说在技术上毫无用处，因此我们可以忽略它。 重要的是电子表格（及其数据）现在可以公开访问，以便我们可以为我们的应用程序获取它。

也就是说，我们需要一个链接。 点击页面右上角的绿色“分享”按钮将触发一个模态窗口，该窗口提供电子表格的可共享链接，并允许我们设置权限。 让我们获取该链接并设置权限，以便任何拥有该链接的人都可以查看电子表格。 这样，数据就不会意外地被其他人编辑。

现在是时候在我们项目中初始化 Tabletop 了。 让我们链接到他们托管的缩小文件。 同样，我们可以复制原始的缩小代码，将其放到我们自己的脚本文件中并自行托管它。

这是链接到 Tabletop 的 CDN 的文档文件，以及从 文档 中获取的代码。

<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>

<script type='text/javascript'>    
  var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1sbyMINQHPsJctjAtMW0lCfLrcpMqoGMOJj6AN-sNQrc/pubhtml';

  function init() {
    Tabletop.init( {
      key: publicSpreadsheetUrl,
      callback: showInfo,
      simpleSheet: true 
    } )
  }

  function showInfo(data, tabletop) {
    alert('Successfully processed!')
    console.log(data);
  }

  window.addEventListener('DOMContentLoaded', init)
</script>

将代码中的 publicSpreadsheetUrl 变量替换为电子表格的可共享链接。 看，告诉过你我们会需要这个！

现在到有趣的部分了。 让我们为 HTML 提供唯一的 ID 并将其留空。 然后，在 showInfo 函数内部，我们将使用 forEach() 方法循环遍历每个电子表格列，同时将其与相应的 ID.innerHTML 方法等同，该方法依次通过 ID 将电子表格的数据加载到 HTML 标签中。

function showInfo(data, tabletop) {
  data.forEach(function(data) {
    header.innerHTML = data.header;
    header2.innerHTML = data.header2;
    body.innerHTML = data.body;
    body2.innerHTML = data.body2;
    body3.innerHTML = data.body3;
    body4.innerHTML = data.body4;
    body5.innerHTML = data.body5;
    body6.innerHTML = data.body6;
    body7.innerHTML = data.body7;
    body8.innerHTML = data.body8;
    body9.innerHTML = data.body9;
    body10.innerHTML = data.body10;
    body11.innerHTML = data.body11;
    body12.innerHTML = data.body12;
    body13.innerHTML = data.body13;
    body14.innerHTML = data.body14;
    body15.innerHTML = data.body15;
    body16.innerHTML = data.body16;
    body17.innerHTML = data.body17;
 });
}
window.addEventListener('DOMContentLoaded', init)

这是我的演示中 HTML 的一部分，显示了空标签。 这是一个不错的做法，但可以通过直接从 JavaScript 创建 HTML 元素来进一步抽象。

<!-- Start Section One: Keep track of your snippets -->
<section class="feature">
  <div class="intro-text">
    <h3 id="body"></h3>
    <p id="body2">
      
    </p>
  </div>
  <div class="track-snippets">
    <div class="snippet-left"><img src="img/image-computer.png" alt="computer" /></div>
    <div class="snippet-right">
      <div>
        <h4 id="body3"></h4>
        <p id="body4">
        </p>
      </div>
      <div>
        <h4 id="body5"></h4>
        <p id="body6"></p>
      </div>
      <div>
        <h4 id="body7"></h4>
        <p id="body8">
        </p>
      </div>
    </div>
  </div>
</section>

嘿，看看！ 现在我们可以通过编辑电子表格中的内容来实时更改网站上的内容。