Membuat tapak yang boleh diedit dengan Helaian Google dan Eleventy

Tutorial ini menunjukkan membina laman web yang boleh diedit menggunakan Helaian Google dan sebelas, peningkatan yang ketara ke atas pengambilan data sisi klien. Kami akan memanfaatkan keupayaan penjanaan tapak statik Eleventy untuk mengambil data semasa proses membina, menghasilkan masa pemuatan yang lebih cepat dan keselamatan yang dipertingkatkan. Ini menghapuskan keperluan untuk JavaScript sisi klien untuk mengambil data pada setiap paparan halaman.

Masalahnya: semakan pelanggan yang berterusan

Pemaju sering menghadapi cabaran semakan kandungan yang tidak berkesudahan dari pelanggan, walaupun selepas pelancaran tapak. Proses berulang ini boleh memakan masa dan mengganggu masa.

Penyelesaian ini memberi kuasa kepada pelanggan untuk mengemas kini kandungan secara bebas menggunakan alat yang biasa: Lembaran Google.

Memperkenalkan Eleventy

Walaupun artikel sebelumnya kami menggunakan tablet.js untuk berinteraksi dengan Helaian Google, pendekatan ini mengintegrasikan Eleventy, penjana tapak statik. Sebelas menjadikan tapak sebagai tapak statik tulen, menghapuskan keperluan untuk memasukkan JavaScript sisi klien untuk pengendalian data. Kandungan diambil semasa proses membina, mewujudkan fail index.html yang sangat dioptimumkan. Pendekatan statik ini meningkatkan kelajuan beban halaman dan keselamatan.

Menyediakan Lembaran Google

Lembaran Google berfungsi sebagai kedai data. Buat spreadsheet baru, menstrukturkan data anda dengan tajuk lajur sebagai rujukan (misalnya, "header," "body"). Tajuk ini akan dirujuk dalam kod JavaScript anda. Mengisi lembaran dengan kandungan anda.

Seterusnya, siarkan lembaran ke web (Fail → Terbitkan ke Web). Walaupun pautan yang dihasilkan tidak digunakan secara langsung, langkah ini menjadikan data spreadsheet dapat diakses secara terbuka. Perhatikan ID lembaran unik dari URL; Anda akan memerlukannya kemudian.

Node.js dan persediaan projek

Node.js diperlukan. Untuk persediaan yang diselaraskan, klon repositori yang disediakan dan lari:

 Pemasangan NPM
NPM Run Seed
NPM Run Dev

npm run seed Command adalah penting; Ia pra-populasi fail JSON tempatan ( src/site/_data/dev/sheet.json ) dengan data dari lembaran Google, menghapuskan keperluan untuk panggilan API berulang semasa pembangunan.

Pengambilan Data dan Transformasi (Src/Site/_Data/Prod/Sheet.js)

Logik teras berada di src/site/_data/prod/sheet.js . Skrip ini mengambil data dari lembaran Google menggunakan AXIOS, mengubahnya menjadi objek JavaScript yang boleh digunakan, dan menjimatkan salinan JSON tempatan untuk pembangunan. Ingatlah untuk menggantikan sheetID dengan ID unik lembaran anda.

 modul.exports = () => {
  Kembalikan janji baru ((menyelesaikan, menolak) => {
    console.log (`Meminta kandungan dari $ {googlesheeturl}`);
    axios.get (googlesheeturl)
      .tua (respons => {
        var data = {content: []};
        response.data.feed.entry.Foreach (item => {
          data.content.push ({
            Header: item.gsx $ header. $ t,
            header2: item.gsx $ header2. $ t,
            // ... bidang lain ...
          });
        });
        benih (json.stringify (data), `$ {__ dirname} /../ dev/sheet.json`);
        menyelesaikan (data);
      })
      .catch (error => {
        console.log ('ralat:', ralat);
        menolak (ralat);
      });
  });
};

Skrip menggunakan forEach untuk meleleh melalui penyertaan lembaran, pemetaan tajuk lajur ke objek objek. Fungsi seed menjimatkan data sebagai JSON.

Templat dengan nunjucks (atau enjin pilihan anda)

Data JSON yang diubah mudah digunakan dengan enjin templating seperti nunjucks. Contohnya:

<div>
  {% - untuk item dalam sheet.content -%}
    <h1 id="item-header">{{item.header}}</h1>
  {% - endfor -%}
</div>

Menyesuaikan ini dengan enjin templating dan struktur data yang anda pilih.

Bangunan dan penempatan

Bina laman web ini:

 NPM Run Build

Ini menghasilkan tapak statik dalam folder dist . Untuk penyebaran automatik selepas kemas kini lembaran Google, mengintegrasikan Zapier untuk menyambungkan Helaian Google dan platform hosting anda (misalnya, Netlify). Konfigurasikan zap untuk mencetuskan penempatan Netlify setiap kali baris baru atau dikemas kini ditambahkan ke lembaran Google. Ini mewujudkan aliran kerja yang lancar dan automatik.

Pendekatan yang komprehensif ini menyediakan laman web yang boleh diedit, dengan penyebaran automatik, meningkatkan aliran kerja pembangunan dan kerjasama pelanggan.

Atas ialah kandungan terperinci Membuat tapak yang boleh diedit dengan Helaian Google dan Eleventy. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!