Tapak yang didorong oleh komuniti dengan Eleventy: Membina laman web ini

Dalam artikel sebelumnya, kami meneroka fasa perancangan untuk laman web yang didorong oleh komuniti. Kami membincangkan banyak pertimbangan yang terlibat dalam menerima penyerahan pengguna, menarik dari peringkat gaya bangunan saya.

Sekarang, mari kita menyelam ke dalam kod! Kami akan membina satu persediaan yang berfungsi sebagai asas untuk laman web komuniti (atau peribadi) anda.

Siri:

1. Merancang sumbangan
2. Membina laman web ini (artikel semasa)

Artikel ini merangkumi:

• Menyediakan sebelas dan mewujudkan skrip pembangunan dan membina.
• Penyesuaian konfigurasi yang disyorkan.
• Menentukan data tersuai dan menggabungkan pelbagai sumber data.
• Mewujudkan susun atur dengan nunjucks dan sebelas susun atur chaining.
• Menggunakan Netlify.

Visi Projek

Bayangkan platform di mana pengguna menyerahkan foto kucing dan anjing mereka, bersaing dalam pertandingan kelucuan.

Artikel ini hanya memberi tumpuan kepada penyerahan PET; Pengundian pengguna (mudah dilaksanakan dengan fungsi tanpa pelayan) dibiarkan untuk pembangunan masa depan. Pengguna menyerahkan profil haiwan kesayangan mereka, menghasilkan "pertempuran" mingguan yang memaparkan kucing rawak berbanding anjing rawak di laman web.

Eleventy Persediaan

Mulakan dengan memulakan projek baru menggunakan npm init , kemudian pasang Eleventy:

 NPM Install @11ty/Eleventy

Secara pilihan, ubah bahagian package.json SCRIPTS:

 "Skrip": {
  "Kembangkan": "Sebelas -serve",
  "Bina": "Sebelas"
},

Ini membolehkan pembangunan dengan BrowserSync Hot-Reloading ( npm run develop ) dan pengeluaran pengeluaran ( npm run build ).

Pasang fast-glob untuk pengendalian data yang cekap:

 Pemasangan NPM--Save-Dev Fast-Glob

Struktur direktori

Sebelas membolehkan penyesuaian direktori input dan output. Buat eleventy.js di Root Projek:

 modul.exports = fungsi (EleventyConFig) {
  kembali {
    dir: {
      Input: "src",
      Output: "Awam"
    },
  };
};

Buat direktori pets untuk menyimpan data haiwan kesayangan, selanjutnya dibahagikan kepada subdirektori cats dan dogs :

 <code>pets/ cats/ dogs/</code>

Data setiap haiwan akan menjadi fail JSON dengan skema berikut:

 {
  "Nama": "",
  "Petcolor": "",
  "Kegemaran Food": "",
  "Favoritetoy": "",
  "Photourl": "",
  "nama sendiri": "",
  "ownertwitter": ""
}

Buat fail CONTRIBUTING.md (atau README.md ) untuk membimbing pengguna pada garis panduan penyerahan dan skema data. Perhatikan bahawa favoriteFood , favoriteToy , dan ownerTwitter adalah pilihan. photoURL harus menjadi URL, bukan muat naik fail, untuk alasan keselamatan dan hosting.

Pengendalian data

Buat cats.js dan dogs.js dalam direktori _data untuk menggabungkan fail haiwan peliharaan individu ke dalam array:

 // Cats.js
const fastglob = memerlukan ("fast-glob");
const fs = memerlukan ("fs");

modul.exports = async () => {
  const catfiles = menunggu fastglob ("./ src/haiwan/kucing/*. json", {
    CassensitiveMatch: Palsu,
  });

  biarkan kucing = set baru ();
  untuk (biarkan kucing catfiles) {
    const catdata = json.parse (fs.readFileSync (CAT));
    cats.add (CatData);
  }

  kembali [... kucing];
};

( dogs.js adalah sama, menggantikan "kucing" dengan "anjing"). Pendekatan ini meminimumkan gabungan konflik.

Output dan templat data

Tambah beberapa fail JSON sampel ke pets/cats dan pets/dogs . Buat index.njk dalam direktori src :

<h1 id="Kucing"> Kucing</h1>

{ % for Cat in Cats %}
• {{Cat.name}}
{ % endfor %}

Anjing

{ % for dog in dogs %}
• {{dog.name}}
{ % endfor %}

Halaman profil haiwan kesayangan dan penomboran

Buat cats.njk dan dogs.njk dalam direktori src dengan bahan depan penomboran (contoh untuk cats.njk ):

 ---
Pagination:
  Data: Kucing
  Alias: Kucing
  Saiz: 1
Permalink: "https://www.php.cn/link/543817ed62fa34e371bb229d4f7b603f"
---

Ini menjana halaman individu untuk setiap haiwan kesayangan.

Susun atur dan data yang dikira

Buat base.njk dan pets.njk dalam src/_includes . base.njk menyediakan html boilerplate dengan {{ content | safe }} . Tambah layout: base.njk Bahan depan ke index.njk . Juga tambah layout: base.njk ke pets.njk untuk susun atur chaining.

Gunakan eleventyComputed dalam cats.njk dan dogs.njk untuk berkongsi pembolehubah templat:

 ---
Eleventy Computed:
  Tajuk: "{{Cat.name}}"
  Petcolor: "{{Cat.petcolor}}"
  Favoritfood: "{{Cat.FavoriteFood}}"
  FavorItetoy: "{{Cat.FavoriteToy}}"
  Photourl: "{{cat.photourl}}"
  ownername: "{{cat.ownername}}"
  ownertwitter: "{{cat.ownertwitter}}"
---

Tambah Kandungan ke pets.njk untuk memaparkan data PET. Tambah layout: pets.njk ke cats.njk dan dogs.njk .

Penempatan ke Netlify

Menyebarkan laman web ini ke Netlify. Konfigurasikan Netlify untuk berkhidmat dari direktori public dan menjalankan npm run build pada gabungan. Fail netlify.toml boleh memudahkan proses ini. Dayakan pratonton untuk permintaan tarik.

Menerima penyerahan

Mengkaji garis panduan sumbangan dan menetapkan peraturan perlindungan cawangan. Proses penyerahan melibatkan forking, pengklonan, membuat fail JSON, melakukan perubahan, membuka permintaan tarik, dan penggabungan.

Kesimpulan

Ini mewujudkan tapak berfungsi dengan penggunaan automatik. Peningkatan selanjutnya termasuk surat berita e -mel, pratonton media sosial, sistem komen, dan Netlify CMS. Contoh lengkap boleh didapati di GitHub.

Atas ialah kandungan terperinci Tapak yang didorong oleh komuniti dengan Eleventy: Membina laman web ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!