用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中文網其他相關文章！