Googleシートと110の編集可能なサイトを作成します

このチュートリアルでは、GoogleシートとEleventyを使用して編集可能なWebサイトの構築を示しています。これは、クライアント側のデータフェッチを大幅に改善しています。 Eleventyの静的サイト生成機能を活用して、ビルドプロセス中にデータを取得するため、読み込み時間とセキュリティの強化が速くなります。これにより、クライアント側のJavaScriptがすべてのページビューでデータを取得する必要性がなくなります。

問題：絶え間ないクライアントの改訂

開発者は、サイトの発売後でも、クライアントからの無限のコンテンツリビジョンの課題にしばしば直面しています。この反復プロセスは、時間がかかり、破壊的です。

このソリューションにより、おなじみのツールであるGoogleシートを使用して、クライアントが独立してコンテンツを更新することができます。

110を紹介します

以前の記事では、Tabletop.jsを使用してGoogleシートと対話しましたが、このアプローチは静的サイトジェネレーターであるEleventyを統合します。 Eleventyはサイトを純粋な静的サイトとしてレンダリングし、データ処理のためにクライアント側のJavaScriptを含める必要がなくなります。ビルドプロセス中にコンテンツが取得され、高度に最適化されたindex.htmlファイルが作成されます。この静的アプローチは、ページの負荷速度とセキュリティを改善します。

Googleシートのセットアップ

Googleシートはデータストアとして機能します。新しいスプレッドシートを作成し、列ヘッダーでデータを参照として構成します（例：「ヘッダー」、「ボディ」）。これらのヘッダーは、JavaScriptコードで参照されます。あなたのコンテンツをシートに入力します。

次に、シートをWebに公開します（ファイル→Webに公開）。生成されたリンクは直接使用されていませんが、このステップにより、スプレッドシートデータに公開されます。 URLからの一意のシートIDに注意してください。後で必要です。

node.jsおよびプロジェクトのセットアップ

node.jsが必要です。合理化されたセットアップの場合、提供されたリポジトリをクローンして実行します。

 NPMインストール
NPMランシード
npm run dev

npm run seedコマンドは重要です。 Googleシートからのデータを使用して、ローカルJSONファイル（ src/site/_data/dev/sheet.json ）を事前に定住させ、開発中にAPI呼び出しを繰り返す必要性を排除します。

データの取得と変換（SRC/SITE/_DATA/PROD/SHEIT.JS）

コアロジックはsrc/site/_data/prod/sheet.jsに存在します。このスクリプトは、Axiosを使用してGoogleシートからデータを取得し、使用可能なJavaScriptオブジェクトに変換し、開発用のローカルJSONコピーを保存します。 sheetIDシートの一意のIDに置き換えることを忘れないでください。

 module.exports =（）=> {
  新しい約束を返す（（解決、拒否）=> {
    console.log（ `$ {googleSheeturl}からコンテンツを要求する）;
    axios.get（googleSheeturl）
      .then（response => {
        var data = {content：[]};
        Response.data.feed.entry.foreach（item => {
          data.content.push（{
            ヘッダー：item.gsx $ header。$ t、
            header2：item.gsx $ header2。$ t、
            // ...他のフィールド...
          }）;
        }）;
        Seed（json.stringify（data）、 `$ {__ dirname} /../ dev/sheet.json`）;
        Resolve（data）;
      }）
      .catch（error => {
        console.log（ 'error：'、error）;
        拒否（エラー）;
      }）;
  }）;
};

スクリプトは、 forEachを使用してシートのエントリを繰り返し、列ヘッダーをオブジェクトプロパティにマッピングします。 seed関数は、データをJSONとして保存します。

nunjucks（またはあなたの好みのエンジン）とのテンプレート

変換されたJSONデータは、Nunjucksのようなテンプレートエンジンで容易に使用できます。例えば：

<div>
  {％-Sheet.Contentのアイテムの場合 - ％}
    <h1 id="item-header">{{item.header}}</h1>
  {％-Endfor -％}
</div>

これを選択したテンプレートエンジンとデータ構造に適応させます。

建物と展開

サイトを構築します：

 npm run build

これにより、 distフォルダーに静的サイトが生成されます。 Googleシートが更新された後の自動展開については、Zapierを統合してGoogleシートとホスティングプラットフォーム（Netlifyなど）を接続します。 ZAPを構成して、新しいまたは更新された行がGoogleシートに追加されるたびにnetlifyデプロイメントをトリガーします。これにより、シームレスで自動化されたワークフローが作成されます。

この包括的なアプローチは、自動展開を備えたパフォーマンスの編集可能なWebサイトを提供し、開発ワークフローとクライアントのコラボレーションを大幅に改善します。

以上がGoogleシートと110の編集可能なサイトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。