Membuat Bragdoc anda sendiri dengan sebelas

Sebagai pemaju, pencapaian kami, besar atau kecil, menyumbang dengan ketara kepada pertumbuhan profesional kami. Walau bagaimanapun, pencapaian ini sering tidak disedari, hilang di tengah -tengah tugas lain. Ini "kerja yang tidak kelihatan," seperti yang diterangkan oleh Ryan T. Harter dalam ceramahnya "mendapatkan kredit untuk kerja yang tidak kelihatan," mudah dilupakan, terutama semasa ulasan prestasi.

Artikel Julia Evans mengenai mengekalkan "Dokumen Brag" menawarkan penyelesaian. Dokumen membanggakan hanyalah rekod sumbangan berharga anda, termasuk penglibatan projek, bantuan kepada rakan sekerja, penambahbaikan proses, persembahan, bengkel, pengalaman pembelajaran, aktiviti ekstrakurikuler (blog, projek peribadi), anugerah, dan kemajuan kerjaya.

Walaupun pelbagai alat wujud untuk membuat dokumen membual, seperti bragdocs.com, membina sendiri menawarkan penyesuaian yang lebih besar. Tutorial ini menunjukkan cara mencipta tapak seperti bragdocs.com menggunakan penjana tapak statik sebelas. Dengan JavaScript dan CSS yang minimum, anda boleh membina dokumen Brag yang diperibadikan anda sendiri.

Membina Dokumen Brag Anda

Cermin hasil tutorial ini Bragdocs.com, menyediakan asas untuk dokumen Brag unik anda sendiri. Demo langsung boleh didapati di sini .

Prasyarat

• Node.js (versi 10 atau lebih tinggi) dan NPM.
• Kebiasaan dengan HTML dan CSS.
• Memahami markdown, templat nunjucks, dan javascript (membantu, tetapi tidak diperlukan dengan ketat).
• Konsep pengaturcaraan asas (jika pernyataan, gelung, mengakses pembolehubah JSON).

Pengenalan kepada Eleventy

Eleventy adalah penjana tapak statik. Tidak seperti pembangunan stack penuh, ia membolehkan penciptaan kandungan yang fleksibel menggunakan pelbagai bahasa templat (HTML, markdown, cecair, nunjucks, dan lain-lain). Sebelas proses kandungan ini, menghasilkan halaman HTML statik untuk menjadi hosting mudah.

Menyiapkan Projek Sebelas Anda

Tutorial ini menggunakan repositori Eleventy-Bragdoc .

1. Penciptaan Projek: Buat repositori GitHub (misalnya, eleventy-bragdoc ) dengan README.md dan a .gitignore file for Node.

2. Inisialisasi: Navigasi ke direktori eleventy-bragdoc di terminal anda dan lari: npm init -y Ini mencipta fail package.json .

3. Sebelas Pemasangan: Pasang Sebelas: npm install @11ty/eleventy

4. Konfigurasi ( package.json ): Kemas kini bahagian scripts package.json :

 {
  // ...
  "Skrip": {
    "Mula": "Sebelas -serve",
    "Bina": "Sebelas"
  },
  // ...
}

5. Fail Konfigurasi Sebelas ( .eleventy.js ): Buat fail .eleventy.js untuk menentukan direktori input dan output:

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

6. Penciptaan Kandungan: Buat direktori src dan tambahkan fail index.md (halaman pertama anda). Eleventy menyokong pelbagai bahasa templat; Contoh ini menggunakan markdown.

7. Penciptaan templat: Buat direktori src/_includes/layouts dan tambahkan fail base.njk (template asas anda menggunakan nunjucks).

8. Menyambungkan CSS dan Imej: Buat direktori src/css dan src/images . UPDATE .eleventy.js :

 modul.exports = fungsi (EleventyConFig) {
  EleventyConFig.AddWatchTarget ("./ SRC/CSS/")
  EleventyConfig.AddWatchTarget ("./ Src/Images/")
  EleventyConFig.AddpassthroughCopy ("./ Src/CSS/")
  EleventyConFig.AddpassthroughCopy ("./ Src/Images/")
  // ...
}

Langkah -langkah selebihnya terperinci pembinaan fungsi Bragdoc, termasuk koleksi, pengendalian data, gaya, dan penempatan. Kod lengkap dan penjelasan terperinci untuk setiap langkah boleh didapati dalam teks asal.

Atas ialah kandungan terperinci Membuat Bragdoc anda sendiri dengan sebelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!