該教程展示了使用Google表和Epertyty建立一個可編輯的網(wǎng)站，對客戶端數(shù)據(jù)獲取的重大改進。我們將利用高度的靜態(tài)站點生成功能在構(gòu)建過程中獲取數(shù)據(jù)，從而導(dǎo)致加載時間更快并增強了安全性。這消除了客戶端JavaScript在每個頁面視圖上獲取數(shù)據(jù)的需求。

問題：不斷的客戶修訂

即使在網(wǎng)站啟動之后，開發(fā)人員通常會面臨客戶的無休止的內(nèi)容修訂的挑戰(zhàn)。這個迭代過程可能是耗時的和破壞性的。

該解決方案使客戶能夠使用熟悉的工具獨立更新內(nèi)容：Google表。

介紹高度

雖然我們上一篇文章使用tabletop.js與Google表相互作用，但這種方法集成了Extenty（靜態(tài)站點生成器）。高架將該站點作為純靜態(tài)站點渲染，無需包括客戶端的JavaScript進行數(shù)據(jù)處理。內(nèi)容在構(gòu)建過程中獲取，創(chuàng)建一個高度優(yōu)化的index.html文件。這種靜態(tài)方法可改善頁面負(fù)載速度和安全性。

設(shè)置Google表格

Google表作為數(shù)據(jù)存儲。創(chuàng)建一個新的電子表格，將您的數(shù)據(jù)與列標(biāo)題構(gòu)造為參考（例如“標(biāo)題”，“ Body”）。這些標(biāo)題將在您的JavaScript代碼中引用。用您的內(nèi)容填充表。

接下來，將表發(fā)布到Web（文件→發(fā)布到Web）。雖然生成的鏈接未直接使用，但此步驟使電子表格數(shù)據(jù)可公開訪問。注意來自URL的唯一表ID；稍后您需要。

node.js和項目設(shè)置

需要node.js。對于簡化的設(shè)置，請克隆提供的存儲庫并運行：

 NPM安裝
NPM運行種子
NPM運行開發(fā)

npm run seed命令至關(guān)重要；它可以在開發(fā)過程中使用Google Sheep的數(shù)據(jù)（ src/site/_data/dev/sheet.json ）預(yù)填充本地JSON文件（SRC/SITE/_DATA/DEV/SHEED.JSON），從而消除了對重復(fù)API調(diào)用的需求。

數(shù)據(jù)獲取和轉(zhuǎn)換（src/site/_data/prod/sheet.js）

核心邏輯位于src/site/_data/prod/sheet.js中。該腳本使用Axios從Google表中獲取數(shù)據(jù)，將其轉(zhuǎn)換為可用的JavaScript對象，并保存本地JSON副本進行開發(fā)。切記用表格的唯一ID替換sheetID 。

 Module.exports =（）=> {
  返回新的承諾（（分辨率，拒絕）=> {
    console.log（`請從$ {googlesheeturl}`請求內(nèi)容）;
    axios.get（googlesheeturl）
      然后（響應(yīng)=> {
        var data = {content：[]};
        response.data.feed.entry.foreach（item => {
          data.content.push（{{
            標(biāo)題：item.gsx $ header。$ t，
            header2：item.gsx $ header2。$ t，
            // ...其他字段...
          }）;
        }）;
        種子（json.stringify（data），`$ {__ dirname} /../ dev/sheet.json`）;
        解析（數(shù)據(jù)）;
      }））
      .catch（錯誤=> {
        console.log（'錯誤：'，錯誤）;
        拒絕（錯誤）;
      }）;
  }）;
};

該腳本使用forEach迭代片段的條目，將列標(biāo)題映射到對象屬性。 seed功能將數(shù)據(jù)保存為JSON。

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

轉(zhuǎn)換后的JSON數(shù)據(jù)很容易使用Nunjucks等模板引擎使用。例如：

<div>
  {％ -  eNek.content-％}中的項目}
    <h1>{{item.header}}</h1>
  {％ -  endfor-％}
</div>

將其適應(yīng)您選擇的模板引擎和數(shù)據(jù)結(jié)構(gòu)。

建造和部署

建立網(wǎng)站：

 NPM運行構(gòu)建

這將在dist文件夾中生成靜態(tài)站點。對于Google表更新后自動部署，請集成Zapier以將Google表和您的托管平臺（例如NetLify）連接。每當(dāng)將新的或更新的行添加到Google表中，配置ZAP以觸發(fā)NetLify部署。這會創(chuàng)建一個無縫的自動化工作流程。

這種全面的方法提供了一個具有自動部署的性能，可編輯的網(wǎng)站，從而大大改善了開發(fā)工作流程和客戶協(xié)作。

以上是用Google表和高度創(chuàng)建一個可編輯的網(wǎng)站的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！